Top 10 VS Code extensions you need to install right now!
Tags: vscode, extensions, productivity, tooling
Published: 2021-09-29 04:31:23

---
canonical_url: https://blog.avneesh.tech/top-10-vs-code-extensions-you-need-to-install-right-now
---


### Prettier - Code formatter

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632840482623/tvWvse0hD.png)
Prettier is one of the most used 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](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) 

### GitLens — Git supercharged

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632882714995/POS8TDbKN.png)
GitLens is a great extension that makes working in a group easier. It shows you which piece of code was committed when and by whom and also the commit message.

 [Install](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) 

### Live Share

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632882970018/V5urCY0i5.png)

If you want to code together with your friend or get some help from a person and want them to see your code easily and code in real-time in front of you then this is what you need. This extension allows you to code together with someone else.

 [Install](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) 


### Import Cost

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632887403661/w3h0zgRck.png)
Whenever you import something from a package, it will show its size and the gzip like this-

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632887387510/0DibnxsxTK.png)

 [Install](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) 


### Image Preview
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632887490339/qmv4qBr4Y.png)

This extension shows you a small image in the sidebar when you give the path of an image and a bigger image if you hover over the link. It is quite useful and it is also a way to check if the image path is correct :P

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

### CodeSnap

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632888957808/qxLP6ABmZ.png)

CodeSnap allows you to take beautiful screenshots of your code and share it with someone easily that too inside VS Code. Here is an example-

![code.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632888196146/chdgiGe10.png)

[Install](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap)


### JavaScript (ES6) code snippets

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632888526653/GhEknGXPD.png)

This extension provides various commonly used code snippets and saves a lot of time.

[Install](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)

### Htmltagwrap


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632889109557/6lr2zCJKW.png)

This is a small extension but pretty useful. If you select some tags or text then click Alt + W or Option + W for Mac then it will wrap it around a tag.

[Install](https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap)

### Auto rename tag

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632889136001/2sNt6BEjQ.png)

If you use XML or HTML then this extension is a lifesaver. Whenever you need to change the tag, if you just edit the opening or closing tag it will automatically change the other one.

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

### ES7 React/Redux/GraphQL/React-Native snippets


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632889083726/WzxMDexWF.png)

This extension provides you with commonly used React, Redux, GraphQL, and React Native snippets and saves a lot of time. For example, writing _rafce gives me a React arrow function component-
```
const Home = () => {
    return (
        <div>
            
        </div>
    )
}

export default Home;
```
 [Install](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) 


**Useful links-**

 [VS Code](https://code.visualstudio.com/) 

 [Connect with me](https://avneesh-links.vercel.app/)