Top 20 Best Visual Studio Code Extensions For Web Development

Visual studio code, arguably the best code editor to use at the present time. Due to its wide range of extensions and support from Microsoft this editor is widely adopted.

Visual studio code is built on top of an open-source Monaco editor by Microsoft. This project receives around 14k stars in Github.

Top 5 visual studio code editor

Visual studio code offers a wide range of extensions. Here is how to install the extension.

Press SHIFT+COMMAND (or Windows)+X or just click on the extension icon of visual studio code. Search for the extension and press install.

top 5 visual studio code extension

Here I am listing down the top 20 best visual studio code extensions for web development. The choices of the extension are my personal opinion.

1: Javascript (ES6) Code Snippets

No need to mention that JavaScript is the core of web development. There are lots of code snippets that we used on a daily basis and this extension helps you by not writing that repetitive code again and again.

It provides JavaScript, TypeScript, Vue, React, and HTML code snippets. I personally believe this is a must-have extension for web development.

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

You can install it by searching the name on the extension section of the visual studio code.

2: Live Server

Live Server extension provides the live preview of your web application right within the editor.

This is very handy and useful for the front end developers.

Link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
You can install it by searching the name on the extension section of the visual studio code.

3: CSS Peek

As its name suggests, this extension lets you jump to the CSS code using classes and IDs.

15 best visual studio code extension

Link: https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

You can install it by searching the name on the extension section of the visual studio code.

4: Auto Close Tag

This extension automatically adds the closing tag of HTML and XML. Thank me later 🙂

Link: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

You can install it by searching the name on the extension section of the visual studio code.

5: REST Client

Testing API and integration to the UI is a huge part of web development. I am sure you have done it so many times.

I often used REST clients such as Postman to test my APIs. Using this extension, we can test APIs and view their response directly in the visual studio code.https://giphy.com/embed/Swr9ld1UnphiJkR7lS

via GIPHY

Link: https://marketplace.visualstudio.com/items?itemName=humao.rest-client

You can install it by searching the name on the extension section of the visual studio code.

6: Debugger for Chrome

This extension brought the powerful chrome debugger right into the visual studio code.

It is very useful for front-end developers to perform the testing and debugging.

Link: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
You can install it by searching the name on the extension section of the visual studio code.

7: ESLint

ESLint is the linting utility for JavaScript. It checks your code for common errors and lets you know in the editor itself. It’s like a virtual peer who is validating your code while you are writing it.

top 5 visual studio code extension - eslint

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

You can install it by searching the name on the extension section of the visual studio code.

Before installing ESLint in visual studio, install it as a global package first.npm install -g eslint

8: Prettier – Code formatter

This extension performs the formatting of the JavaScript, CSS, and HTML code.

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

You can install it by searching the name on the extension section of the visual studio code.

9: Path Intellisense

Importing code from other files is what everyone does on a daily basis. This extension makes the development time faster by autocompleting file names.

You type the name of the file in statements and it will search and give you suggestions.

top 5 must have visual studio code extension - file manager

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

You can install it by searching the name on the extension section of the visual studio code.

10: GitLens

We use Git almost every day of our life. GitLens is the visual studio code plugin to supercharge git capabilities.

With GitLens, it’s so easy to view code authorship, check commit number, view changes between the last commit and existing changes, and so on.

top 5 visual studio code extensions - gitlens

Link: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
You can install it by searching the name on the extension section of the visual studio code.

11: Code time

This extension tracks your development time and provides you with useful stats such as how many hours you have code today etc.

It’s pretty useful to keep track and see the progress. This is not strictly for web development only, anyone can use this extension.

Link: https://marketplace.visualstudio.com/items?itemName=softwaredotcom.swdc-vscode
You can install it by searching the name on the extension section of the visual studio code.

12: Settings Sync

I use a different machine for my work and personal use. I use visual studio code in both machines, however, I don’t want to repeat the same steps to configure the editor every time.

Enters Setting Sync extension. It creates and stores your configuration in Github gist and synchronizes wherever you want. Simple and awesome!

Link: https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
You can install it by searching the name on the extension section of the visual studio code.

13: Polacode

Like code snippet like this?

15 best visual studio code extension for web development

Then this extension is for you. We can use this extension to create a beautiful code polaroid and share it.

Link: https://marketplace.visualstudio.com/items?itemName=pnp.polacode

You can install it by searching the name on the extension section of the visual studio code.

14: Project Manager

Do you work on multiple projects and switch back and forth? I know I do and the project manager has been a savior to manage multiple projects in visual studio code.

top 5 must have visual studio code extension - project manager

Link: https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

You can install it by searching the name on the extension section of the visual studio code.

15: GitHub Copilot

GitHub Copilot is the AI pair programmer that excels at providing hints at which code snippets you may want to use. It’s like being able to search StackOverflow right inside of VS Code.

Some of the time, it gives some outrageous snippets. This is due to it being backed by AI. But when it works (and it often works well), it is magical.

Link: https://marketplace.visualstudio.com/items?itemName=GitHub.copilot

16: JavaScript Booster

I use this extension to speed up my JavaScript development. It doesn’t do much, but it does make it easier to refactor some code. It can do things like:

  • Replace a string with a template string
  • Convert a named function to an arrow function
  • Convert an arrow function to a named function
  • In React, wrap certain things with JSX brackets {}
  • More helpful utilities

Link : https://marketplace.visualstudio.com/items?itemName=sburg.vscode-javascript-booster

JavaScript Booster

17: ESLint

This extension is an absolutely required extension when working in VS Code. This extension catches so many errors that you can’t even tell if you’ve made a mistake or not.

It’s a great way to catch your own errors and it’s also a great way to enforce certain code rules when working on a team.

View on the VS Code Marketplace

ESLint

18: EditorConfig

EditorConfig is an extension that helps to enforce similar rules across a repo. For instance, we can force our editor to always use 2 spaces instead of 4 spaces or tabs when working with JavaScript. This is especially helpful when working with a team and you want to enforce consistent code style across your team.

View on the VS Code Marketplace

editorconfig

19. Thunder Client

It’s like POSTman but inside of VS Code and much faster. It will let you send HTTP requests to your servers and APIs and see the response.

View on the VS Code Marketplace

Thunder Client

20. amVim

For the Vim users out there, there are two major VS Code extensions to bring vim bindings into VS Code. The first is amVim which is a vim plugin for VS Code. The second is Vim which is a vim plugin for VS Code.

I personally like the amVim extension since it is less intrusive than the main Vim extension. Try both and see which fits your workflow.

View on the VS Code Marketplace

amVim

Conclusion

If you like this article, please do share it on social media to help spread the word. Thanks for the read!

We covered a lot of ground in this article and showcased some of the best web developer extensions for Visual Studio Code. There are plenty more available at the VS Code Marketplace, so make sure you browse the different categories and find some more developer tools to help you in your development endeavors.

One Comment

  1. Admiring the persistence you put into your website and
    in depth information you offer. It’s awesome
    to come across a blg every once in a while that isn’t the same outdated rehashed information.
    Wondeful read! I’ve savced your site and I’m adding your RSS feeds to my Google account.

Leave a Comment

Your email address will not be published.