WDD 231: Web Frontend Development I

📑 Customizing Visual Studio Code

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.

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.

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.

User Snippets

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

Emmet - Code Shorthand

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