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
• Auto Rename Tag: automatically rename changed tag pairs
• Color Picker: generate colors using a GUI
• File Templates Manager: manage individual page templates
• File Utils: duplicate, move, rename, & delete files & folders
• indent-rainbow: colorize indentation levels
• Live Server: see changes to your webpages as you update your code
• Live Share Extension Pack: collaborate on editing with optional chat
• Path Autocomplete: autocomplete paths as you type
• Placeholder Images: insert placeholder images
• Project Templates: create projects from folder templates
• Projects+: manage your projects
• Spell Right: check spelling

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 & copy the contents of the Gist.
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. Paste the contents of my Gist into your User Settings, between the curly braces ({ & }). Pay attention to the rules of formatting JSON files.
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.