💡 10 VS Code extensions I can't code without
Tags: vscode, javascript, webdev, productivity
Published: 2020-04-30 16:00:38

VS Code is my favourite text editor. It is the most extensible and popular code editors out there. And surprisingly it's made by Microsoft (i know). In my opinion, no other IDE or editor comes even half as close as to what VS Code does. What makes it so robust is it's extension system. It allows you to write an extension for every possible use case you can think of. Here are my top 10 extensions.

## 1. [Beautify](https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify)

![Beautify](https://dev-to-uploads.s3.amazonaws.com/i/6jh0tui9nh993l4zzlwd.png)

```
ext install HookyQR.beautify
```

Beautify allows you to format `html`, `js`, `css`, `JSON` and `sass` file with your own custom style configuration. It extends over the internal `js-beautify` and makes it customizable to your personal style.

## 2. [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)

![Better Comments](https://dev-to-uploads.s3.amazonaws.com/i/qwhm3kqyvp22rox4unwy.png)

```
ext install aaron-bond.better-comments
```

This extension allows you to add semantics to your comments. It categorizes into categories like comments into alerts, queries, todos and highlights.

![Better Comments Screen Shots](https://dev-to-uploads.s3.amazonaws.com/i/3c804dilaxhlgqhfpmmy.png)

## 3. [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ngtjai3lgko14sp51cfe.png)

This one is a lifesaver, especially if you find yourself lost in hundreds of lines of code. This extension allows you to bookmark any line of code. Then when you need to go back all you need to do is browse through the list of bookmarks and select the line you want to visit.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g3mzmg6eqru89d3l0nzc.png)

## 4. [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)


![Bracket Pair Colorizer](https://dev-to-uploads.s3.amazonaws.com/i/q8whhlyzqn5a9pni5q9o.png)

```
ext install CoenraadS.bracket-pair-colorizer-2
```
This one does exactly what its name suggests. It colour codes correlated pairs of brackets. This helps a lot when you end up several scopes deep into code.

![Bracket Pair Colorizer](https://dev-to-uploads.s3.amazonaws.com/i/tz0fet4e1is8kurpzdl4.png)

## 5. [Format in Context Menus](https://marketplace.visualstudio.com/items?itemName=lacroixdavid1.vscode-format-context-menu)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lklut6q62ky3ia64h6wo.png)

```
ext install lacroixdavid1.vscode-format-context-menu
```

This extension allows you to format all your files by just selecting them from the side-bar. This is especially useful when you have tonnes of files, and your environment does not support formatters and linters.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hgqnbo219iis3i8ru9vf.gif)

## 6. [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fj1eujct11n0k02805rg.png)

```
ext install mhutchie.git-graph
```

It allows you to view a Git Graph of your repository, and quickly perform Git actions from the graph. It is highly configurable and has lots of features. Explaining the goodness of this extension will probably take a whole new post.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v800jt7z8zif3k4eo11n.gif)

## 7. [Git Lens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m7a2x37bh157ly1c7egp.png)

```
ext install eamodio.gitlens
```
GitLens helps you to reflect code authorship at a glance via Git blame annotations and code lens. It enables you to seamlessly navigate and explore Git repositories, gain valuable insights via robust comparison commands, and so much more.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6v0fm7xih9z5so6h0fno.png)

## 8. [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)

![Indent Rainbow](https://dev-to-uploads.s3.amazonaws.com/i/79m9505m369sxfm44m2v.png)

```
ext install oderwat.indent-rainbow
```
This extension colourizes the indentation of code, in different colours on each indent level. This is especially helpful in deep scopes with languages like Python.

## 9. [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ckei8za87rr4pjdq4tzd.png)

```
ext install christian-kohler.path-intellisense
```

Path Intellisense adds auto-completion to file paths. While VS-Code natively supports auto-completion, it is limited to only HTML, CSS and JavaScript files. This extends it to all languages and file types.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/koon5g53xuxxi3zsko9y.gif)

## 10. [Total Lines](https://marketplace.visualstudio.com/items?itemName=praveencrony.total-lines)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ne5j4t2bg6rlfcktfe76.png)

```
ext install praveencrony.total-lines
```

This a handy little extension add the number of lines of the currently opened file in the status bar. A neat addition to your extension collection.

----
And that is it folks. These are my top VS Code extensions. I'd like to hear your favorite extensions in the comments. Oh, BTW do you want to learn Bash? Here's my crash-course post on Shell Scripting:

{% link https://dev.to/godcrampy/the-missing-shell-scripting-crash-course-37mk %}

----
🌟 I made some [Cheat-Sheets](https://github.com/godcrampy/cheat-sheets)
🚀 Stalk me on [Instagram](https://www.instagram.com/godcrampy/) | [Github](github.com/godcrampy) | [Twitter](twitter.com/godcrampy) | [Website](sahil.surge.sh)
😄 Have a wonderful day!