Best VS Code extensions you must use

Visual Studio Code is free, open-source, and runs everywhere. But to make coding easier, faster, maintaining standard practices it’s always great to use extensions in VS Code. By using these extensions coding becomes interesting, faster and also increases productivity. Visual Studio Code is very popular so there are many extensions available in vs code marketplace. Therefore I have listed out the best VS Code extensions that you must try.

1. Debugger for chrome

In JavaScript, developers mostly debug using console.log(). Chrome browser has built-in features that make debugging simpler and better. With the “Debugger for Chrome” extension you can use these features inside VS Code. So, by using the “Debugger for Chrome” extension you can debug your JavaScript code running in Google Chrome from VS Code.
Link: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

2. Live Server

Normally when you make changes in a code editor, you have to refresh the browser to see the changes. And doing this repeatedly, developers get frustrated. This problem gets solved by the Live Server extension.
Live Server extension launch a development local Server with live reload feature for static & dynamic pages.
The Live Server extension adds the Go Live button to the status bar. When clicked it opens your project on the localhost server.
Link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

3. GitLens

There are many git extensions present on vs code marketplace. But GitLens is more powerful having many features. With GitLens you get features like repositories view, file and line history view, compare view, search commits view, blame information, and many more.
Link: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

4. ESLint

ESLint helps you write better code. It helps you maintain standard practices like indentation, formatting, and positioning of code. It also shows errors and warnings when you don’t maintain standard practices.
Link: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

5. Auto Rename Tag

This extension automatically renames paired HTML/XML tags. So you can either rename starting or closing tag and the other one automatically gets renamed. This extension saves time by avoiding renaming both opening and closing tags. You only need to rename one.
Link: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

6. vscode-icons

This extension provides icons for the Visual Studio Code. This extension provides icon packs with many great icons. vscode-icons has features like:

• Icon Customization
• Project Auto-Detection
• Custom Configuration

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

7. CSS Peek

CSS Peek extension allows peeking to CSS ID and class strings as definitions from HTML files to respective CSS. Allows peek and goto definition. This extension as you don’t have to go into CSS files to check what CSS properties are applied to a certain id or class. You can do it from the HTML file itself.
Link: https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

8. IntelliSense for CSS class names in HTML

This extension provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element.
This extension is very useful as it suggests class names as you start to type class names from your CSS files.
Link: https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

9. Path Intellisense

Remembering specific file names and the directories of your files is difficult sometimes. This problem helps to solve this problem. As soon as you start to type the path, it shows your file names and directories.
Link: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

10. Code time

The Code Time extension is an open-source plugin that provides programming metrics right in the Visual Studio Code. Code Time is safe, secure, and free. Code Time shows data visualizations such as your work hours and rates per project for advanced time tracking. You can also connect Google Calendar to visualize your Code Time vs. meetings in a single calendar.
With Code Time you can:

• Track your progress during the day
• Check out your coding activity
• Generate your Code Time dashboard
• View Code Time heatmap
• View Project-based reports
• Get to know your work-life balance
• Check your commit velocity

Link: https://marketplace.visualstudio.com/items?itemName=softwaredotcom.swdc-vscode

11. Code Spell Checker

The Code spell checker is a spelling checker for source code. By using this extension you will never have to worry about screwing up spellings in your comments, strings, and plain text.
Link: https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

12. Open in Browser

Open in browser extension allows you to open the current file in your default browser or application. You can choose in which browser you want to open your application.
Link: https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser

13. Browser Preview

If you don’t like to open a browser every time you make changes, you can use Browser Preview Extension. Browser Preview opens a real browser inside VS code by from which you can see output changes every time without going into another browser tab. This helps to save time while coding.
Browser Preview extension enables you to open a real browser preview inside your editor that you can debug. This enables a secure way to render web content inside the VS Code.
Link: https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview

14. JavaScript (ES6) code snippets

JavaScript (ES6) code snippets extension helps by providing Code snippets for JavaScript in ES6 syntax.
This extension supports following languages(file extensions):

• JavaScript (.js)
• TypeScript (.ts)
• JavaScript React (.jsx)
• TypeScript React (.tsx)
• Html (.html)
• Vue (.vue)

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

15. Prettier

Prettier extension sets a consistent style by parsing your code and re-prints it with its own rules that take the maximum line length into account, wrapping code when necessary. This helps to make your code easily readable.
Link: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

16. TODO Highlight

Sometimes, you add TODO’s in your code to certain things later and forget them. Here, the TODO highlight comes to the rescue. TODO Highlight extension highlights TODO, FIXME, and other annotations within your code.
So, this extension is very useful.
Link: https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

17. Project Manager

With the Project Manager extension, you can easily switch between projects.
Link: https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

18. Angular Essentials

Angular Essentials extension is a pack of multiple extensions that are amazingly useful for Angular development.
This extension pack includes the following amazing extensions:

• Angular snippets
• Angular Language Service
• Angular console
• Chrome Debugger
• Edge Debugger
• Editor Config
• ESLint
• Material Icon Theme
• npm
• Peacock
• Prettier
• Winter is coming

Link: https://marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials

19. Vetur

This is the official Vue js extension. Vetur extension makes Vue js development easier. This extension contains the following features:

• Syntax-highlighting
• Snippet
• Emmet
• Linting / Error Checking
• Formatting
• Auto Completion
• Debugging
• VTI / CLI

Link: https://marketplace.visualstudio.com/items?itemName=octref.vetur

20. Python

Python extension for Visual Studio Code provides rich support for python language. Python extension provides features such as IntelliSense, linting, debugging, code navigation, code formatting, Jupyter notebook support, refactoring, variable explorer, test explorer, snippets, and more!
Link: https://marketplace.visualstudio.com/items?itemName=ms-python.python

Your Thoughts?

Out of the above best vs code extensions which are the ones you liked? What are other interesting and useful extensions? You can tell me through the comment section.

See Also:

Best VS Code Themes you must try