WDD 230 - Web Frontend Development I

Setup Help: Customizing Visual Studio Code

Format Code | Auto-Update | Extensions | Color Theme | User Snippets | Emmet

Format Code on Save

You must have selected a formatting option prior to these settings taking affect.
  1. In the VS Code menu bar, click File➡️Preferences➡️Settings or just open the settings panel by pressing the the shortcut ⌘+, [Mac] or Ctrl+, [Windows/Linux].
  2. Type format in the search box.
  3. Check the box for ☑️Editor: Format on Save.
  4. Finished. You can close the Settings tab.

Auto-Updating Tags

Documentation: 📑Auto-Update Tags

Managing Extensions

Documentation: 📑VS Code Extensions
  1. In the VS Code menu bar, click View➡️Extensions or just open the extensions panel by pressing the the shortcut ⌘+Shift+X [Mac] or Ctrl+Shift+X [Windows/Linux].
  2. Search for the extension you want to install.
  3. Click the Install button.
  4. Finished. You can close the Extensions tab.

Code Color Theme Selection

  1. In the VS Code menu bar, click File➡️Preferences➡️Theme➡️Color Theme.
  2. Select your preferred color theme from the list provided.
Additional color themes can be found through VS Code Extensions. Example, Winter is Coming

User Snippets

Documentation: 📑User-Snippets
  1. Demonstration: 🎦User Snippets

Emmet - Code Shorthand

Documentation: 📑Emmet