WDD 231: Web Frontend Development I

📑 Customizing Visual Studio Code

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

Auto Save Files

  1. In the VS Code menu bar, click File ► Preferences ► Settings
    You can always get into the Settings panel by pressing the shortcut ⌘+, [Mac] or Ctrl+, [Windows/Linux].
  2. Type auto save in the search box.
  3. In the Files: Auto Save panel, change the dropdown menu from off to afterDelay.
    Option: You can set the delay to your preferred time in milliseconds in the Files: Auto Save Delay setting.

Format Code on Save

  1. Go to Settings panel by pressing the shortcut ⌘ + , [Mac] or Ctrl + , [Windows/Linux].
  2. Type format in the search box.
  3. Check the box for ☑️Editor: Format on Save.

Auto-Updating Tags

When modifying a tag, the linked editing feature automatically updates the matching closing tag.

Documentation: 📑Auto-Update Tags

Managing 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.
Documentation: 📑VS Code Extensions

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

Code snippets are templates that make it easier to enter repeating code or markup.
Demonstration: 🎦User Snippets

Documentation: 📑User-Snippets

Emmet - Code Shorthand

Support for Emmet snippets and expansion is built right into Visual Studio Code, no extension required.

Documentation: 📑Emmet