Using VS Code plug-ins will save you time and increase your productivity.

VS Code has a market for plugins. Developers can install plug-ins into the text editor to enhance the editor’s functionality. From the View menu, select the extension option or press Shift + CMD + X to enter the market.

Using VS Code plugins will not only save time, but also increase productivity and make you a better developer.

1. Live Server

This plug-in allows us to automatically reload Web pages when we change code in the IDE.

​

Once Live Server is installed, right-click on the HTML file to see the option Open with Live Server[Alt + L + Q].

Download address:

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

2. Quokka.js

Quokka.js will automatically calculate the results as you type and print the results in the IDE.

​

Download address:

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

3. Code Spell Checker

It is a spell checker that reports common spelling errors for developers. It works well with hump code.

​

Download address:

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

4. GitLens

GitLens enhances Git functionality built into Visual Studio Code.

Not only does it help you visually see the author of the code through the Git Blame annotation, but it also allows you to seamlessly navigate and explore your Git repository, gain valuable insights through powerful comparison commands, and more.

Download address:

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

5. Prettier

Prettier is a strictly rule-based code formatter.

It parses the code and reprints it using its own rules to achieve style consistency. This is an important tool that allows us to get well-formed code without any developer work.

Prettier provides reasonable defaults, but you can also provide a configuration file in the root of your project to set your own standards, such as line length, number of tabs/Spaces, and so on.

​

Download address:

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

6. ESLint

ESLint is a static code analysis tool used to identify problematic patterns in JavaScript code.

Rules in ESLint are configurable and users can define and load their own rules. It also covers code quality and coding style issues.

​

Download address:

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

7. vscode-icons

The plugin adds ICONS next to the file name in the Tree view based on the file extension, making it easier to identify the file.

​

Download address:

https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

8. Live Saas Compiler

It helps you compile/translate SASS/SCSS files into CSS files in real time and provides online browser reloading.

​

Download address:

https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass

9. JavaScript (ES6) code snippets

This plug-in contains snippets of JavaScript Code for the VS Code editor’s ES6 syntax (supporting JavaScript and TypeScript).

Download address:

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

10. Browser Preview

It lets you open a real browser preview in the editor for debugging.

​

Download address

https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview

11. Path Intellisense

This extension can automatically complete the path and filename in the code.

​

Download address:

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

12. Bracket Pair Colorizer

This extension allows matching parentheses to be identified by color. The user can define the characters to match and the colors to use.

​

Download address:

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

13. Vim

VSCodeVim is a Vim emulator for Visual Studio Code that brings the power of Vim to your text editor.

​

Download address:

https://marketplace.visualstudio.com/items?itemName=vscodevim.vim

14. TODO Highlight

Highlight TODO, FIXME, and other annotations in your code.

​

Download address:

https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

15. Color Highlight

This extension stylizes CSS/Web colors found in your files, so you can see what colors they are without opening the page.

Download address:

https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

​