Visual Studio Code Setup

Extensions

Install the following extensions:

  1. Click each link below.
  2. And then follow these steps:
  • Click the Install button
  • Click the Open Visual Studio Code button
  • Click the Install button in VS Code

Configure settings

  1. On the bottom left of VS Code > click the Gear Icon
  2. Choose Command Palette..
  3. Type open settings
  4. Choose Open Settings.JSON
  5. Paste the settings below into the file.

If you have existing USER SETTINGS you will want to add the following settings below your current settings. Otherwise, you can replace the contents of the file with the JSON below.

settings.json

{
"files.autoSave": "afterDelay",
"editor.fontFamily": "Fira Code iScript, Menlo, Monaco, 'Courier New', monospace",
"editor.fontLigatures": true,
"editor.multiCursorModifier": "alt",
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"emmet.includeLanguages": {
"typescript": "html",
"javascript": "javascriptreact"
}
}
  1. Create a directory (somewhere on your computer that you would easily remember) named code where you will write code during the course.
  2. Copy prettier.config.js into the code directory.

Install a font for programming (optional)

If you are interested in trying a new font designed for programming.

  1. Install the free FiraCodeiScript font on your system.
  1. Close and reopen VS Code to see the new font.

Reference

Other Extensions (not required)

Edit this page