DEV Community

Cover image for Top 10 VS Code extensions you need to install right now!
Avneesh Agarwal
Avneesh Agarwal

Posted on • Updated on • Originally published at blog.avneesh.tech

Top 10 VS Code extensions you need to install right now!

Prettier - Code formatter

image.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

GitLens — Git supercharged

image.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

Live Share

image.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

Import Cost

image.png
Whenever you import something from a package, it will show its size and the gzip like this-

image.png

Install

Image Preview

image.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

CodeSnap

image.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

Install

JavaScript (ES6) code snippets

image.png

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

Install

Htmltagwrap

image.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

Auto rename tag

image.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

ES7 React/Redux/GraphQL/React-Native snippets

image.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;
Enter fullscreen mode Exit fullscreen mode

Install

Useful links-

VS Code

Connect with me

Top comments (2)

Collapse
 
majur profile image
Juraj Maťaše

GitLens is great :-) Thanks for sharing.

Collapse
 
dxtcuba profile image
dxtcuba

I’ll try it as well 😃