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
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.
2. ES7 React/Redux/GraphQL/React-Native snippets
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.
Check out my previous article HERE for more details.
3. 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
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
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
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
This extension is very useful to quickly find a matching bracket by showing underline for the matching bracket.
8. vscode-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
This extension automatically renames the ending HTML tag while renaming the starting tag and vice versa.
10. 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.
11. 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 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.
Latest comments (17)
Good list so many good extensions in there.
Thank you!
Prefer Gitlens, really powerful
Okay. Thanks for the suggestion.
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! 🙂
VS Code: You don't need that extension
Rob OLeary ・ Aug 5 ・ 7 min read
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.
Thanks! I will take a look at it
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
I'm glad, you found it helpful
Awesome!
Thank you!
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
sure... thanks.. does it work on all operating systems?
Most of time I connect from windows to CentOs. I think also to other unix system will do.
Great 👍
I would also add bracket pair colorizer 🔥🔥
it's really cool... thanks