15+ VS Code Extensions For Web Developers 🤯
Tags: webdev, javascript, vscode, css
Published: 2022-06-17 05:49:13

Interested in some great extensions for Visual Studio Code that will make your web development life easier? In this article, I'll discuss the top **15+ extensions for VS Code.**

So, let's get started!

## 1. [JavaScript (ES6) Code Snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)
It provides java script, Vue, React and HTML code snippets. It is  a must-have extension for web development.
![0_xi6NDiISPHdsRvXe (1).png](https://cdn.devdojo.com/images/june2022/0_xi6NDiISPHdsRvXe%20(1).png)

## 2. [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
Live server extension provides the live preview of your web application right within the editor. This is a  handy and useful for the frontend developers.
![nvOmX (1).png](https://cdn.devdojo.com/images/june2022/nvOmX%20(1).png)

## 3. [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
This extension performs the formatting of the javascript, CSS and HTML code.
![0__4CiJ6mmnYah7RWk.png](https://cdn.devdojo.com/images/june2022/0__4CiJ6mmnYah7RWk.png)

## 4. [Better Comments ](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)
This extension helps you to create more human-friendly and easy-to-read comments.
![better-comments.png](https://cdn.devdojo.com/images/june2022/better-comments.png)


## 5. [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
This extension makes the development time faster by autocompleting file names. You type the name name of the files in statements and it will search and give you suggestions.
![iaHeUiDeTUZuo.gif](https://cdn.devdojo.com/images/june2022/iaHeUiDeTUZuo.gif)


## 6. [GitLens ](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
We use Git almost evey day of our life. Gitlens is the visual studio code plugin to supercharge git capabilities.
![739c080a5e5fb60a015fa6fafd8307cf4b2aef5e-3356x2096.png](https://cdn.devdojo.com/images/june2022/739c080a5e5fb60a015fa6fafd8307cf4b2aef5e-3356x2096.webp)

## 7. [Code Time](https://marketplace.visualstudio.com/items?itemName=softwaredotcom.swdc-vscode)
This extension tracks your development time and provides you with useful stats such as how many hours you have code today 
It’s pretty useful to keep track and see the progress (anyone can use this extension)
![best-visual-studio-code-extensions-bracket-pair-code-time.jpg](https://cdn.devdojo.com/images/june2022/best-visual-studio-code-extensions-bracket-pair-code-time1.jpeg)

## 8. [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
It 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.
![Screen-Shot-2020-04-24-at-1.39.42-AM (1).png](https://cdn.devdojo.com/images/june2022/Screen-Shot-2020-04-24-at-1.39.42-AM%20(1).png)

## 9. [Polacode](https://marketplace.visualstudio.com/items?itemName=mrrefactoring.polacode-fixed-edition)
Like code snippet like this? We can use this extension to create a beautiful code polaroid and share it. 
![2.png](https://cdn.devdojo.com/images/june2022/2.png)
![1.png](https://cdn.devdojo.com/images/june2022/1.png)

## 10. [CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)
This directly peeks CSS ID and class from HTML files and goes to the respective CSS definition.
![1_BQv_eAI2cDOknvTjD_J2EQ.jpeg](https://cdn.devdojo.com/images/june2022/1_BQv_eAI2cDOknvTjD_J2EQ.jpeg)

## 11. [Project Manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager)
Working on multiple projects and switching between them is a common
occurrence in Visual Studio Code. The project manager makes managing multiple projects in VS Code a breeze.
![SPn1w.png](https://cdn.devdojo.com/images/june2022/SPn1w.png)

## 12. [Rest Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)
REST Client allows you to send HTTP request and view the response in Visual Studio Code directly. Using this extension, we can test APIs and view their response directly in the VS Code.![rest-install.png](https://cdn.devdojo.com/images/june2022/rest-install.png)

## 13. [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)
This extension automatically adds the closing tag of HTML and XML. 
![e906ee0d0acb62a02d7aafc2c3cc48ec13345ef1.jpg](https://cdn.devdojo.com/images/june2022/e906ee0d0acb62a02d7aafc2c3cc48ec13345ef1.jpeg)

## 14. [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
With this VS Code extension, you can color code the matching pairs to help ease that pain point and work on the making the code itself work — not the editor.
![1_ioGOnjNJMLidmnWWmIADHw.png](https://cdn.devdojo.com/images/june2022/1_ioGOnjNJMLidmnWWmIADHw.png)

## 15. [Paste JSON as Code](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype)
Interactively generate types and (de-)serialization code from JSON, JSON Schema, and TypeScript. Paste JSON/JSON Schema/TypeScript as code.![JSON To Code For SPFx Solutions2.png](https://cdn.devdojo.com/images/june2022/JSON%20To%20Code%20For%20SPFx%20Solutions2.png)

## 16. [Quokka.js](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode)
Quokka.js is a developer productivity tool for rapid JavaScript/TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.![quokka.png](https://cdn.devdojo.com/images/june2022/quokka.png)


**Conclusion**

Thanks for reading, and please do share this article if you enjoyed it 🤞💜

Check out my [twitter](https://twitter.com/souptikdn) & [linkedin ](https://www.linkedin.com/in/souptikdn/)for more amazing content.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

Create your [Fueler](https://fueler.io/register) profile today!
[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/25uuhsypmfnzunr50ujl.png)](https://fueler.io/register)