vscode-setup.md

VSCode setup used in the course

Theme

I use the Oceanic Next theme with the dimmed bg option. Link →

Extensions used in course videos

For each of the extensions, read the overview page in order to learn how to use it.

Prettier to automatically format code (there is a video in the course on how to set it up). Link →

ESLint to automatically find errors in code (there is a video in the course on how to set it up). Link →

DotENV to enable syntax highlighting for .env files. Link →

Pug beautify to automatically format Pug code. Link →

TODO Highlight to highlight annotations in code. Link →

Image previews for previews on image hover and in the gutter. Link →

TabNine to autocomplete everything, code and text. Link →

Path Intellisense to autocomplete filenames. Link →

Other extensions I use

Bracket Pair Colorizer 2 to make it easy to find matching brackets. Link →

Settings sync to synchronize all your settings between computers. Link →

Project Manager to easily switch between projects. One of the most useful extensions. Link →

Terminal

To make your terminal as pretty as mine, you need to use a tool called oh-my-zsh. I followed this tutorial → to set it up.

Settings

If you want your editor to work and look exactly the same way as mine does in the course videos, you can copy these settings to your own settings file (settings.json).

{
  "workbench.colorTheme": "Oceanic Next (dimmed bg)",
  "files.autoSave": "onFocusChange",
  "editor.formatOnSave": true,
  "editor.minimap.enabled": true,
  "workbench.statusBar.visible": true,
  "workbench.activityBar.visible": true,
  "editor.formatOnSave": false,
  "editor.wordWrap": "on",
  "editor.trimAutoWhitespace": false,
  "eslint.run": "onSave",

  "workbench.colorCustomizations": {
    "statusBar.background": "#333333",
    "statusBar.noFolderBackground": "#333333",
    "statusBar.debuggingBackground": "#263238"
  }
}