DEV Community

loading...

Most Useful VS Code Extensions To Improve Your Productivity

myogeshchavan97 profile image Yogesh Chavan Updated on ・4 min read

Visual Studio Code (VS Code) is the most popular IDE for Developers right now because of its simplicity and the availability of extensive extensions.

In this article, we will see some of the most useful and popular extensions in the VS Code.

1. Relative Path

Relative Path

This is one of my favorite extensions. This extension allows us to quickly add the import for any file even if it’s deeply nested by using the search functionality.

Just press Ctrl+Shift+H or Cmd+Shift+H (Mac) to activate it and search for the file you want to import.

Relative Path Gif

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

Snippet

This is a must-have extension If you’re a React.js Developer.

It provides a ton of prefixes that we can use to quickly add snippets of code without wasting time in re-writing the same code again and again.

Snippet Gif

Check out my previous article HERE for more details.

3. GraphQL

GraphQL

This extension is useful for adding syntax highlighting in .graphql or .prisma files to quickly identify the error if any in the schema files.

4. Prettier

Prettier

This is a must-have extension for every developer whether you’re using HTML or JavaScript or React or any other framework or library.

It saves your lot of time by avoiding the need for formatting after every line of code. It automatically formats your code when you save the file. It also helps to catch errors in your code as it will not format the code if there is an error for example missing bracket or invalid syntax.

Check out my previous article HERE to understand its awesome features and learn how to use it.

5. Image Preview

Image Preview

This extension allows us to quickly see the preview for any image in the CSS file on the left side of the image URL or on hover.

6. Prettify JSON

Prettify JSON

If you need to quickly format JSON data then you can create a .json file with the JSON data inside it and from the VS Code command palette press Ctrl+Shift+P or Cmd+Shift+P (Mac) and type Prettify JSON to format the contents of the file.

7. Subtle Match Brackets

Subtle Match Brackets

This extension is very useful to quickly find a matching bracket by showing underline for the matching bracket.

8. vscode-styled-components

Styled Components

If you’re using styled-components in React then this extension will provide syntax highlighting for styled component code which makes it easy to write and debug it.

9. Auto Rename Tag

Auto Rename Tag

This extension automatically renames the ending HTML tag while renaming the starting tag and vice versa.

Auto Rename Tag Gif

10. Auto Close Tag

Auto Close Tag

This extension automatically closes the ending HTML tag while adding a new HTML tag which helps in avoiding the missing tags issue.

Auto Close Tag Gif

11. Markdown All in One

Markdown All in One

This extension provides shortcut commands to be used in markdown(.md) files like just selecting the text and pressing Ctrl+B or Cmd+B (Mac) to make the text bold. It also allows us to easily preview the markdown files.

12. Git History

Git History

Git History extension allows us to see the git history in our repository, compare it with the previous version, create a new branch and a lot more.
Just right click on any file/folder from VS Code that is added to git and select Git: View File History option to see all the Git history for that file/folder.

Don't forget to subscribe to get my weekly newsletter with amazing tips, tricks and articles directly in your inbox here.

Discussion (17)

pic
Editor guide
Collapse
robole profile image
Rob OLeary

Hi Yogesh,

I wrote an article recently about VS Code Extensions. There are built-in settings for auto renaming and auto closing of tags, so maybe you do not need these extensions. Have a read if you are interested! 🙂

Collapse
aravindk profile image
Aravind Kothandaraman

While yogesh's list is commendable, especially, auto close/ rename tags, prettier etc. I 100% agree with you. In my experience, to be particular, json formatter, bracketing, importing etc.

Collapse
myogeshchavan97 profile image
Yogesh Chavan Author

Thanks! I will take a look at it

Collapse
madza profile image
Madza

I would also add bracket pair colorizer 🔥🔥

Collapse
myogeshchavan97 profile image
Yogesh Chavan Author

it's really cool... thanks

Collapse
abuujurayj profile image
Buruhan/aJurayj

In your next article do not forget "remote-ssh".
Its a wonderful, and more helpful to those who make connections to their live servers in ssh

Collapse
myogeshchavan97 profile image
Yogesh Chavan Author

sure... thanks.. does it work on all operating systems?

Collapse
abuujurayj profile image
Buruhan/aJurayj

Most of time I connect from windows to CentOs. I think also to other unix system will do.

Thread Thread
myogeshchavan97 profile image
Collapse
trinwin profile image
Collapse
myogeshchavan97 profile image
Collapse
jennieji profile image
Jennie

Prefer Gitlens, really powerful

Collapse
myogeshchavan97 profile image
Yogesh Chavan Author

Okay. Thanks for the suggestion.

Collapse
twopill profile image
Elia

I've use for 7 month "Beautify", but it's annoying press all time "f1" and select the command .
Prettier is only CTRL+S, thanks man

Collapse
myogeshchavan97 profile image
Yogesh Chavan Author

I'm glad, you found it helpful

Collapse
andrewbaisden profile image
Andrew Baisden

Good list so many good extensions in there.

Collapse
myogeshchavan97 profile image