Evergreen

Complete Guide to Set up Visual Studio Code (Updated 2020)

This is my VSCode setup. I am working currently primarily with TypeScript and ReactJS.

Last updated: May 2020

tl;dr

code --install-extension quinusocio.vsc-material-theme
code --install-extension PKief.material-icon-theme
code --install-extension CoenraadS.bracket-pair-colorizer-2

code --install-extension visualstudioexptteam.vscodeintellicode
code --install-extension kisstkondoros.vscode-codemetrics

code --install-extension streetsidesoftware.code-spell-checker
code --install-extension pnp.polacode
code --install-extension wayou.vscode-todo-highlight
code --install-extension formulahendry.code-runner
code --install-extension mhutchie.git-graph

code --install-extension joelday.docthis
code --install-extension herrmannplatz.npm-dependency-links
code --install-extension dbaeumer.vscode-eslint
code --install-extension pflannery.vscode-versionlens

code --install-extension orta.vscode-jest
code --install-extension markis.code-coverage

Look and Feel

Theme

Current Theme:

Past Themes:

Programming Font

Current Font: Jet Brain Mono

Additionally you need to add following configuration to your settings.json:

    "editor.fontFamily": "'JetBrains Mono', 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'",
    "editor.fontSize": 13,
    "editor.lineHeight": 22,
    "editor.fontLigatures": true,

Past Fonts:

Here you can find more fonts specialized for coding:

Other

  • Material Icons - This icon set has an additional feature where folders with a specific name like src also get dedicated icons.
  • Bracket Pair Colorizer 2 - this adds colors to brackets making it easier to see which brackets belong together.

General

Web Development

  • Code Metrics - Calculates and displays the complexity of your JavaScript/TypeScript code. This should encourage you to keep your code as simple as possible.
  • Edge Dev Tools
  • Prettier Prettier parses js/ts code and re-formats it with its own rules.
  • EsLint

Testing

  • Jest - Executes Jest Tests in the background and indicates inline which tests failed

Additional Settings

Organize imports on save

VSCode can automatically organize your imports (sorting, removing unused)

"editor.codeActionsOnSave": {
		"source.organizeImports": true
}

Always open files in a new Tab

Instead of replacing the current file with the selected file, you can set this setting to false:

  "workbench.editor.enablePreview": false

Past Extensions

  • TODO Highlight - Adds Highlights to // TODO: and // FIXME: etc.
  • npm Dependency Links - Adds Ctrl-Click to quickly open the package on npmjs.com page
  • Polacode - Beautiful Screenshots of your code
  • Version Lens - Adds information to package.json if newer versions of packages are available.