Skip to content
| Marketplace
Sign in
Visual Studio Code>Extension Packs>GrannePack HTMLNew to Visual Studio Code? Get it now.
GrannePack HTML

GrannePack HTML

granneman

|
5,770 installs
| (0) | Free
HTML-related extensions for Scott Granneman’s Web Dev courses
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

This is the README for GrannePack HTML.

GrannePack HTML

This extension pack of HTML-related extensions is aimed at students in Scott Granneman’s beginning Web Development courses. Other extension packs focus on CSS, Git, & Markdown.

Extensions

  • Auto Close Tag: automatically add HTML close tags
  • Code Spell Checker: check spelling
  • Color Picker: generate colors using a GUI
  • File Templates Manager: manage individual page templates
  • File Utils: duplicate, move, rename, & delete files & folders
  • HTMLHint: find & report errors in your HTML
  • Image Preview: preview images in the gutter & by hovering over links
  • indent-rainbow: colorize indentation levels
  • Live Preview: preview your webpages with a local server
  • Placeholder Images: insert placeholder images
  • Project Templates: create projects from folder templates
  • Projects+: manage your projects

Themes

  • Monokai Dark Soda: a dark theme with bright colors
  • Material Icon Theme: icons based on the Material theme

Optional Settings

I have created a GitHub Gist titled “VSCode settings for the extensions installed via GrannePack HTML”. If you wish to use these settings:

  1. Click on the Raw button, press Command-A for macOS or Ctrl+A for Windows to select the contents of the page, & copy the contents of the page.
  2. Invoke the Command Palette (Shift-Command-P for macOS or Ctrl+Shift+P for Windows & Linux), search for Open Settings (JSON), & press Return/Enter.
  3. Again press Command-A for macOS or Ctrl+A for Windows to select the contents of your settings.json file, & then paste the contents of my Gist over what you already had there. Yes, this will overwrite any settings you have already made. If you want to keep your old settings, copy them to a separate file first, & then carefully add them back in one at a time after you paste in my settings. Pay attention to the rules of formatting JSON files if you do that!
  4. Save the file you just pasted into — settings.json — & close the tab.

If Visual Studio Code reports errors with settings.json:

  • Visual Studio Code should indicate the problems that need fixing. Look at the Common Questions section on the User and Workspace Settings page in Documentation for more information.
  • Paste the contents of your settings.json file into the JSON Formatter & Validator web tool. It will provide clear solutions to help you mitigate errors.
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft