- Published on
Complete Guide to Set up Visual Studio Code (Updated January 2022)
- Authors
- Name
- HappyNeal
- @codeandchaos
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
Code Assistants
- GitHub Copilot - While still very experimental and sometimes quite wierd suggestions, its an incredible coding experience.
Alternatives:
- TabNine - A great Ai Assistant
- VisualStudio IntelliCode - AI assisted autocomplete
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
- glean - Tool to quickly refactor React code
- P42 Modern JavaScript - Quickly convert Code to modern JavaScript
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
- 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.
- Edge Dev Tools