Top 10 Visual Studio Code extensions for web developers
Tags: vscode, webdev, firstpost
Published: 2021-09-25 06:08:45

### Don't know about the Visual Studio Code? here is a quick summary!
**Visual Studio Code** is a lightweight but powerful source **code** editor which runs on your desktop and available for multiple operating systems like Windows, Linux, and macOS. Visual Studio Code is one of the most popular code editors out there. It's **free**. and it comes with built-in support for multiple programming languages. Thanks to Microsoft for making developer's life easier.
### How to install extensions in Visual Studio Code
There are many extensions on the VS Code Extensions Marketplace.You can Install these extensions and many other popular extensions that include snippets in their language support from the Extensions Marketplace tab in VS-Code.

![Screenshot (58).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624618439883/RDXeWG-gR.png)

**1**. **Tabnine**




**TabNine** is an AI code autocomplete tool that predicts the rest of the code programmers are typing, much like word or phrase autocomplete in a Google search window. 
 [install TabNine](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode) 

**2**. **ES7 React/Redux/GraphQL/React-Native snippets**

![Screenshot (47).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624533030538/Zn_t1aaFG.png)

This snippet extension is much more powerful and useful for **React** development with over 2 million-plus downloads. this extension provides you Javascript and **React/Redux** snippets in **ES7** with Babel plugin features for Visual Studio Code.
 [install ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) 

**3**. **Auto Import - ES6, TS, JSX, TSX**

![Screenshot (48).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624534523968/3QaIkx_wy.png)

**Auto Import - ES6, TS, JSX, TSX** (VSCode Extension) Automatically finds, parses, and provides code actions and code completion for all available imports. Works with JavaScript (ES6) and TypeScript (TS).
 [install Auto Import - ES6, TS, JSX, TSX](https://marketplace.visualstudio.com/items?itemName=NuclleaR.vscode-extension-auto-import) 

**4**. **GitLens — Git supercharged**

![Screenshot (52).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624536127892/AOUSY2OrN.png)![Screenshot (51).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624535339805/RdzdcUc3Q.png)
**GitLens** supercharges the **Git** capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via **Git** blame annotations and code lens, seamlessly navigate and explore **Git ** repositories, gain valuable insights via powerful comparison commands, and so much more.
 [install GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) 

**5**. **Live Server**

![live-server.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624624067284/nMJgHpww-.png)
**Live Server** - Makes your existing server live - this is a Web Extension that helps you to live to reload feature for dynamic content (PHP, Node.js, ASPNET -- Whatever, it doesn't matter). **static files** located on your computers like HTML, CSS, and JS don't need a **server** to be opened by your **browser**. What your extension does is just reloading your browser when it detects changes in your static files.
 [install Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) 

**6**. **Auto Rename Tag**


![auto-rename tag.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624624085362/3evzNPONr.png)

**Automatically rename** paired HTML/XML tag, same as Visual Studio IDE does. it's one of the useful extensions for web development.
 [install Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) 

**7**.  **Prettier - Code formatter**

**Before Prettier**

![Screenshot (53).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624541424912/FiwT-1xmJ.png)
                                    **After Prettier**

![Screenshot (54).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624541459164/X1Hz_lOVc.png)

**Prettier** is an opinionated **code formatter**. It enforces a consistent style by parsing your code and re-printing it with its own **rules** that take the maximum line length into account, wrapping **code** when necessary.
 [install Prettier-Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) 

**8**. **ESLint**

![Screenshot (55).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624599302546/aZa-lItQx.png)
It's one of the useful extensions for **Javascript ** development with **15 million-plus **downloads. **ESLint** is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, to make code more consistent and avoiding bugs. In many ways, it is similar to JSLint and JSHint with a few exceptions: **ESLint uses** Espree for JavaScript parsing.  [install ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

**9**. **Live Sass Compiler**

![Screenshot (56).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624602279973/rvV9uNSJH.png)

 A VSCode Extension that helps you to compile/transpile your **SASS/SCSS** files to CSS files in real-time with **live** browser reload. This extension saves a lot of time, you don't have to manually compile the Sass file and reload the browser again and again.  [install Live Sass Compiler](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass) 

**10**. **Bracket Pair Colorizer**

![Screenshot (57).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624603194172/9n1eYn1JP.png)

We can use a VS Code extension called **Bracket Pair Colorizer** to add color to each set of opening and closing brackets, making it easier to identify each set of brackets. It's up to you to decide whether you'd like to add this feature to VS Code or not. However, it's a popular tool and many developers find it useful. the best thing about this extension you can customize the color of brackets.
 [install Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) 
### Conclusion
 The main focus of this blog is to introduce you to some awesome and useful extensions of Visual Studio Code. by using these extensions you can make your development much faster 🔥. 
____
Thank you for reading. 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up. 👍

Feel free to ask any questions in a comment section and share which Visual Studio Code extensions do you use for your daily development.

Let's Connect. 👋

 [Github](https://www.github.com/deepak-webdev) |  [LinkedIn](https://www.linkedin.com/in/deepak-webdev)  |  [Twitter](https://www.twitter.com/deepak_webdev)