Must-Have VS Code Extensions

Jan 10, 2022
--- views
VS Code Extensions I Use - Banner Image

Visual Studio Code (VS Code) is the most popular coding editor for developers made by Microsoft. It is a free and open source software made by developers for developers. According to the Stack Overflow 2022 survey, VS Code is the IDE of choice across all developers.


VSCode Stack Overflow Developer Survey 2021

While VSCode comes with so many useful features that helps developers build their software of choice, additionally, there are more than 30,000 extensions created by the community that will help you fast forward your development process and get instance feedbacks on your code.

Here are some of the extensions that I use as a developer. If not all developers, JavaScript developers must have them while building their software.

1. JavaScript Code Snippets

JavaScript Code Snippets is a collection of code snippets for JavaScript in ES6 syntax for VS Code. This extension supports JavaScript, TypeScript, JS React, TS React, HTML, and Vue languages.

This extension comes with so many great snippets like import/export, class helpers, and console methods that will enhance the development experience.

2. Bracket Pair Colorizer

Bracket Pair Colorizer Extension

Bracket Pair Colorizer can highlight matching brackets in the editor, so developers can easily understand which 2 brackets belong to each other. By default (), [], and {} are matched, but you can also configure custom bracket characters.

3. NPM

NPM is a super handy extension for VS Code that runs the npm scripsts in your package.json file and also it validates the packages installed in your project, which are listed in the package.json file.

4. NPM Intellisense

This extension autocomplete names and locations when you import modules and files in to your code.

5. Prettier

As the name describes, Prettier - Code Formatter is a formatting extension for VS Code that helps you auto format your code. This extension can be more helpful when working in team, because it will help you format your code in a consistent way.

Prettier has so many config options that you can setup in your VS Code general settings section, like saving on save, adding simicolons instead of double quotes, number of tab space and etc.

6. Tabnine

Bracket Pair Colorizer Extension

I love the Tabnine extension for VS Code. It's a super fast and powerful extension that completes your code with the best suggestions. You are reading this, its autosuggested and autcompleted with this extension.

Tabnine suggets code for different programming languages and frameworks like JavaScript, Python, TypeScript, PHP, Go, Java, C, C++, C#, Swift, Kotlin, Ruby, etc.

Tabnine is a free extension for VS Code, but it has a pro plan as well which is an advance AI model if you want to get more correct and powerful suggestions for your code.

7. GitHub Copilot

VSCode Stack Overflow Developer Survey 2021

GitHub Copilot is an AI Pair Programmer that helps developers write better code. Copilot suggests a single line or a complete function based on your code. This is super handy when working with APIs as it suggests more accurate code and saves a lot of time.

GitHub Copilot is built on the top of Open AI and it uses Open AI's API to generate suggestions.

8. GitHub Themes

VSCode Stack Overflow Developer Survey 2021

GitHub's VS Code Themes brings the themse to the VS Code environment. It includes different color themes like GitHub Dark, GitHub Dark Default, GitHub Light, GitHub Light Default, GitHub Dark Dimmed, and a few others.

9. Live Server

VSCode Stack Overflow Developer Survey 2021

Live Server is a local server with live reload feature so developers don't need to refresh their browser for new changes. Live server reloads your browser whenever a new change is happed and file is saved. It's a time saving VS Code extension for all kinds of developers, especially for frontend developers.

10. ESLint

When working with Node.js projects, most of the time you will be installing ESLint which is a lenting package for the JavaScript code. The VS Code ESLint extension will look at your eslint config rules to find pattern issues in your JavaScript code.

11. Settings Sync

This extension allows you to store your VS Code settings on Github Gist as a private JSON config file in the cloud and sync them across all your VS Code instances.

Settings Sync is helpful when you have VS Code installed on multiple devices and you need to have the same settings across all your devices.

Below are the VS Code shortcuts to upload and download settings to and from the cloud.


  • macOS: Shift + Option + U
  • Windows/Linux: Shift + Alt + U


  • macOS: Shift + Option + D
  • Windows/Linux: Shift + Alt + D

12. VS Code Icons

The VS Code Icons extension is a collection of icons for VS Code. It adds icons to every single file and folder in your project which is better for readability and helps you find the file you are looking for.

13. VS Code ES7+ React/Redux Snippets

If you are working with React.js or Next.js projects, you will need ES7+ React/Redux Snippets extension to speed up your development process with some cool React snippets. It includes awesome snippets for React, Redux, and Next.js.

14. Vetur

Vetur is the official Vue.js framework extension for VS Code. It provides a lot of features like code completion, code linting, code format, and much more.

15. Angular TypeScript Snippets

This extension for VS Code adds code snippets like autocomplete, linting and format for the Angular framework.

16. CSS Peek

If you are a busy developer, the CSS Peek extension will help you to view the CSS code for an id and class when you hover over them within your HTML code.

17. HTML CSS Support

This extension provides intellisense for CSS in HTML code based on id and class attribute.

18. Sass

Sass is a VS Code extension that provides autocompletion/ intellisense, syntax highlighting, and code format. It also provides a Sass linter.

19. Live Sass Compiler

VSCode Stack Overflow Developer Survey 2021

This extension will compile your Sass code to CSS and will update your CSS file in real time. It also provides a live preview of the CSS code.

20. Tailwind CSS IntelliSense

VSCode Stack Overflow Developer Survey 2021

If you are using Tailwind CSS as your styling framework, then Tailwind CSS IntelliSense is a must have extension for VS Code. It provides intellisense for Tailwind CSS classes and variables, syntax highlighting, autocompletion, and linting.

21. Code Spell Checker

Code Spell Checker is an extention that helps developers check the spelling of a word, comment, string and plain text. It supports multiple languages including English, French, German, Italian, Spanish, and many other languages.

22. Markdown Lint

The Markdown Lint extension is a linter for Markdown files. It checks for common mistakes in Markdown files and encourages developers to write Markdown files in a consistent style.

23. Better Comments

Better Comments extension allows you to write more readable code comments in your code. You will be able to categories your annotations into:

  • Alerts
  • Queries
  • TODOs
  • Highlights
  • And more

Closing thoughts

There are are so many extensions on the VS Code Marketplace that are helpful when doing softare development, but to find the best among them will get some used to. I have listed some of the best extensions and I will be updating this article regularly to add more extensions that may come in the future.