VS Code Cheatsheet

Visual Studio Code is a source-code editor made by Microsoft for Windows, Linux and macOS. Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git. Users can change the theme, keyboard shortcuts, preferences, and install extensions that add additional functionality. from Wikipedia

If you already have a favourite code editor, feel free to use it. Otherwise, VS Code is the (current) favourite among most web developers.

---

Key Takeaways

• Always open a folder (blue bar along bottom of window), not a file (purple bar). This is for two reasons:
  • It will open the file navigation sidebar
  • It will enable the Live Server extension (it needs to know what directory to attach the web server to)

Tutorials:

• Youtube: Freecodecamp Crash Course
• Youtube: James Quick's VS Code Playlist

---

Initial setup

• Install VS Code

Configuration

• Set indents to 2 spaces in the VS Code Preferences.
  • For some reason, VS Code indents code with four spaces. Very embarrassing. The industry standard is to indent with two spaces.
  • You will lose marks if you indent with four spaces so be sure to make this change.

Recommended extensions

• Live Server
  • Allows you to open vanilla HTML websites in the browser using a local web server.
• ES Lint
  • Javascript syntax suggestions, checking and highlighting.
• HTMLHint
  • HTML and CSS syntax suggestions, checking and highlighting.

See: Popular VS Code Extensions contributed by Tony's colleagues.