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 Spell Checker - No more excuses for misspelled function names
  • Better Comments Adds more readable colors to comments, highlights TODOs
  • Code Runner - lets you run the current file in a terminal
  • Error Lens - displays all issues you find in the warnings as comments next to the code. It encourages you to solve all problematic parts of your code, so you do not have to see all that visual clutter.

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
  • Ponicode - A tool that lets you generate Unit Tests.

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