GrannePack CSS

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

Extensions

• CSS Flexbox Cheatsheet: open a flexbox cheatsheet directly in VS Code
• IntelliSense for CSS class names in HTML: class attribute completion, even for remote files
• Live Sass Compiler: automatically compile Sass to CSS

Optional Settings

I have created a GitHub Gist titled “VSCode settings for the extensions installed via GrannePack CSS”. 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. If you already have settings you wish to keep, you will need to carefully remove the curly braces ({ & }) from my Gist after you paste it in, & pay attention to the rules of formatting JSON files.

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.