I have used editors like Brackets, Atom and Sublime in the past but VS Code is my favorite code editor right now. It is also the most popular code editor out there and I have been using it for about two years now and here is what I think are the top 12 VS Code extensions that every developer should consider having in 2020.
1. Prettier
Prettier as the name suggests makes your code prettier. It supports a lot of file formats and is configurable as well. You should definetely check it out if you think you are wasting time formatting code by yourself. Also, make sure to format on save in vs code settings.
2. Bracket Pair Colorizer 2
Do you struggle to find which bracket ends where? Well, Bracket Pair Colorizer 2 helps with just that, it allows matching brackets to be identified with colours. The main difference between v1 and v2 is the performance.
3. Path Intellisense
Path Intellisense adds auto-completion to file paths. While VS-Code natively supports auto-completion, it is limited to only HTML, CSS and JavaScript files. This extends it to all languages and file types.
4. ESLint
This adds direct eslint support into vs code, and it helps you to fix your eslint problems. Also a must-have.
5. Visual Studio IntelliCode
The Visual Studio IntelliCode extension provides AI-assisted development features for Python, TypeScript/JavaScript and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.
6. Debugger for Chrome
Believe it or not, debugging JavaScript means more than just writing console.log() statements (although that’s a lot of it). Chrome has features built in that make debugging a much better experience. This extension gives you all (or close to all) of those debugging features right inside of VS Code!
7. Live Server
Make changes in code editor, switch to browser, and refresh to see changes. That’s the endless cycle of a developer, but what if your browser would automatically refresh anytime you make changes? That’s where Live Server comes in!
It also runs your app on a localhost server. There are some things you can only test when running your app from a server, so this is a nice benefit.
8. Auto Rename Tag
Need to rename an element in HTML? Well, with Auto Rename Tag, you just need to rename either the opening or closing tag, and the other will be renamed automatically. Simple, but effective!
9. VS Code Icons
Did you know you can customize the icons in VS Code? If you look in settings, you’ll seen an option for “File Icon Theme”. From there you can choose from the pre-installed icons or install an icon pack. This extension gives you a pretty sweet icon pack that is used by over 11 million people!
10. Material Theme
Bored with the default Dark + Theme that is shipped with VS Code? Then you should definetely try out the Material Theme.
11. Code Spell Checker
If you make spelling mistakes and don’t realize it, spell checker is for you, it validates your spellings.
12. Live Share
It’s a real jewel when you want to collaboratively edit and debug a project or a file with others in real-time. You can share your code, terminal and server with other users and if you use the live audio extension then you can even add… audio to your communication.