Most Useful VS Code Extensions To Improve Your Productivity
Tags: react, javascript, codenewbie, vscode
Published: 2020-08-18 06:38:54

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](https://gist.githubusercontent.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/7ba99b5bbcfbec1f7791d44e3274027785e4e926/relative_path.png)

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](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/39a50de8e7cb6c69b911b514535adbbf640a9b9b/relative_path.gif)

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

![Snippet](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/39a50de8e7cb6c69b911b514535adbbf640a9b9b/snippets.png)

**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](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/39a50de8e7cb6c69b911b514535adbbf640a9b9b/snippet.gif)

Check out my previous article [HERE](https://levelup.gitconnected.com/most-popular-visual-studio-code-extension-when-working-with-react-997d04691cc7?source=friends_link&sk=6f188a0ad7830ed9836117b25bad1de0) for more details.

## 3. GraphQL

![GraphQL](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/39a50de8e7cb6c69b911b514535adbbf640a9b9b/graphql.png)

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](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/39a50de8e7cb6c69b911b514535adbbf640a9b9b/prettier.png)

**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](https://levelup.gitconnected.com/automatically-format-code-in-visual-studio-code-when-working-with-react-c48674a12dc5?source=friends_link&sk=6e94e6bc54bf43fe4ad90c66f8a82b18) to understand its awesome features and learn how to use it.

## 5. Image Preview

![Image Preview](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/39a50de8e7cb6c69b911b514535adbbf640a9b9b/img_preview.png)

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](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/39a50de8e7cb6c69b911b514535adbbf640a9b9b/json_formattter.png)

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](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/39a50de8e7cb6c69b911b514535adbbf640a9b9b/matching_bracket.png)

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

## 8. vscode-styled-components

![Styled Components](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/39a50de8e7cb6c69b911b514535adbbf640a9b9b/styled.png)

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](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/39a50de8e7cb6c69b911b514535adbbf640a9b9b/auto_rename.png)

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

![Auto Rename Tag Gif](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/39a50de8e7cb6c69b911b514535adbbf640a9b9b/auto_rename.gif)

## 10. Auto Close Tag

![Auto Close Tag](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/39a50de8e7cb6c69b911b514535adbbf640a9b9b/auto_close.png)

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](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/39a50de8e7cb6c69b911b514535adbbf640a9b9b/auto_close.gif)

## 11. Markdown All in One

![Markdown All in One](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/39a50de8e7cb6c69b911b514535adbbf640a9b9b/markdown.png)

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](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/39a50de8e7cb6c69b911b514535adbbf640a9b9b/history.png)

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](https://yogeshchavan.dev).**

[<img src="https://cdn.buymeacoffee.com/buttons/default-yellow.png" >](https://www.buymeacoffee.com/myogeshchavan97)