Published
- 3 min read
My Visual Studio Code Setup
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:
- Overview of Programming Fonts
- GitHub MonaSpace - A Font Family of Five different Fonts
- Cascadia Code
- FiraCode
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:
- 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
- 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
- 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