Published on

Complete Guide to Set up Visual Studio Code (Updated January 2022)

Authors
Complete Guide to Set up Visual Studio Code (Updated January 2022)

This is a guide to my current VSCode setup. Currently I am primarily working with TypeScript and ReactJS.

Last updated: January 2022

Look and Feel

Theme: One Dark Pro

Icons: Material Icons This icon set has an additional feature where folders with a specific name like src or test get dedicated icons.

Font: Jet Brain Mono

With following configuration in settings.json:

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

To find a font that suits you best go to https://www.codingfont.com/ and you then can find the perfect font by selecting them in a series of tournaments.

Here you can find more fonts specialized for coding:

General Plugins

Code Assistants

  • GitHub Copilot - While still very experimental and sometimes quite wierd suggestions, its an incredible coding experience.

Alternatives:

Git

  • Git Lens - Supercharges your git experience in VSCode
  • Git Graph - Displays a graph of your git history

Code Quality

  • SonaLint - A static code analysis tool for multipe programming languages.
  • Code Metrics - Calculates and displays the complexity of your JavaScript/TypeScript code. This should encourage you to keep your code as simple as possible.

Web Development

  • Prettier Prettier parses js/ts code and re-formats it with its own rules.
  • EsLint - Displays and runs eslint validation on your code.
  • TypeScript Hero Automatically organizes your imports and deletes unused imports.

Refactoring

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

Discuss on Twitter • View on GitHub