# 9 VSCode Web-Dev Extensions you need

### **Why extensions?**

Visual Studio Code is widely used nowadays and there are a lot of contributors that create useful extensions for it, to give this editor **superpowers.** . With these tools, you may significantly accelerate your development and enhance teamwork.

Here are my top extensions that you should try in Vs Code:

> ## 🌟 Saklash Web Pack
> 
> You can install [Saklash Web Pack](https://marketplace.visualstudio.com/items?itemName=SahilChandravanshi.saklash-web-pack) to install all Web Dev essentials at once which are mentioned in this article or you can download them one by one.
> 
> ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675277043387/a60f3309-2359-4ae6-a074-d0e61bbd5b3b.png align="center")

### 1\. ES7+ React/Redux/React-Native snippets

It provides many shorthand prefixes to accelerate development and help developers create code snippets and syntax for React, Redux, GraphQL, and React Native.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674752465372/c65ab4c4-720b-4fcd-abe8-fc64e6b28172.gif align="center")

[ES7+ React/Redux/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)

### 2\. ESLint

It is the linting utility for JavaScript. ESLint is used to find errors and bugs in the code and it lets you know in the editor itself. It also supports custom configuration, so you can define your custom validation rules for your projects.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674989073600/6011d4d9-aed8-40d9-8c58-e4fdd16feadd.png align="center")

[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

### 3\. Live server

Live Server spins up a light nodejs server and serves your HTML file and all assets from the given directory. On top of that, any saved changes you make to your website will be reflected immediately in the browser, which gives a really fast and enjoyable developer experience.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674986474148/e649b627-964c-41be-929b-fe55a1794b6d.gif align="center")

[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

### 4\. Auto Rename Tag

This is a must-have extension for web developers. As the name suggests, it automatically renames the second tag if the first one is modified and vice versa. And the great thing is that it works with JSX so you can use it with React too!

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674752991165/f84f1400-60f2-4366-953d-c4b7b6d37a1f.gif align="center")

[Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

### 5\. Prettier

Prettier is an opinionated code formatter, which you can set up according to your preferences. It enforces consistent style by parsing your code and reprinting it with its rules that take the maximum line into account and wraps the code if necessary.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674988672988/a526db22-8e32-46e7-b549-e9debe13ea2c.png align="center")

[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

### 6\. npm Intellisense

This provides autocomplete for npm modules in import statements i.e. introduces autocomplete behavior when you use `require()` to import modules into your code.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674753667467/ecdb496f-bb4d-41d6-94a5-5f23e0df5335.gif align="center")

[npm Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)

### 7\. Image preview

Shows image preview in the gutter and on hover

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674987872928/d912f5d7-bb8f-466e-a842-c995fba473b2.gif align="center")

[Image preview](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview)

### 8\. Thunder Client

Thunder Client is a lightweight Rest API Client Extension for Visual Studio Code

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674988010182/a1179c66-0b11-4a17-89c3-b7611d33d679.png align="center")

[Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client)

### 9\. SQLTools

Connects to MySQL, PostgreSQL, Microsoft SQL Server and many more

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674988204724/0910497f-1c0d-4356-a7ae-4539510af7d0.png align="center")

[SQLTools](https://marketplace.visualstudio.com/items?itemName=mtxr.sqltools)

*If you have other suggestions which I can add to this list, please mention them in the comment section.*