Top 10 VS Code Extensions to level up your development game
Tags: vscode, webdev, extensions
Published: 2021-03-11 06:27:58

VS Code is probably the most used code editor in the world. One of the main reasons why it has become so popular is its ability to install additional features by using extensions. There are more than thousands of extensions available on VS Code. But it can be really hard to find the extensions you might be looking for.
In this blog, we will look into 10 extensions (in no particular order) on VS Code which will immediately help you in your development journey.

## 1. Better Comments

![Better Comments Logo](https://aaron-bond.gallerycdn.vsassets.io/extensions/aaron-bond/better-comments/2.1.0/1594671781043/Microsoft.VisualStudio.Services.Icons.Default)

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

This extension allows you to add semantics to your comments. You can categorize comments into:

- Alerts
- Queries
- TODOs
- Highlights
- Commented out code can also be styled to make it clear the code shouldn't be there
- Any other comment styles you'd like can be specified in the settings

![Better Comments Example](https://raw.githubusercontent.com/aaron-bond/better-comments/master/images/better-comments.PNG)

## 2. Bracket Pair Colorizer

![Bracket Pair Colorizer Logo](https://coenraads.gallerycdn.vsassets.io/extensions/coenraads/bracket-pair-colorizer/1.0.61/1542132753296/Microsoft.VisualStudio.Services.Icons.Default)

```shell
ext install CoenraadS.bracket-pair-colorizer
```

This extension allows matching brackets to be identified with colors. The user can define which characters to match, and which colors to use.

![Bracket Pair Colorizer Example](https://raw.githubusercontent.com/CoenraadS/BracketPair/master/images/example.png)

## 3. Code Runner

![Code Runner Logo](https://formulahendry.gallerycdn.vsassets.io/extensions/formulahendry/code-runner/0.11.2/1609855032050/Microsoft.VisualStudio.Services.Icons.Default)

```shell
ext install formulahendry.code-runner
```

This extension allows you to run code snippets or code files for multiple languages like **C, C++, Java, JavaScript, PHP, Python, Perl** and many many more.

## 4. Code Spell Checker

![Code Spell Checker Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dp51c2eqnd3j46k2dt9n.png)

```shell
ext install streetsidesoftware.code-spell-checker
```

A basic spell checker that works well with camelCase code.

The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.

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

![ES7 React/Redux/GraphQL/React-Native snippets logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ph41xr00ef1jb5g5v2co.png)

```shell
ext install dsznajder.es7-react-js-snippets
```

This extension provides you with JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code.

If you are a React Developer then this extension is a must. It provides boilerplate code, auto-completion for react components, etc. which makes life a lot easier.

There are a lot of snippets available in this extension. A list of them can be found at this [link](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets).

## 6. GitLens — Git supercharged

![GitLens Logo](https://eamodio.gallerycdn.vsassets.io/extensions/eamodio/gitlens/11.3.0/1614927049929/Microsoft.VisualStudio.Services.Icons.Default)

```shell
ext install eamodio.gitlens
```

GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

![GitLens Example](https://raw.githubusercontent.com/eamodio/vscode-gitlens/main/images/docs/revision-navigation.gif)

## 7. Live Server

![Live Server logo](https://ritwickdey.gallerycdn.vsassets.io/extensions/ritwickdey/liveserver/5.6.1/1555497731217/Microsoft.VisualStudio.Services.Icons.Default)

```shell
ext install ritwickdey.LiveServer
```

If you are a web developer and code in plain HTML, CSS, and javascript then you must know the pain to continuously reload the page can be.

Live Server is an amazing extension that starts your HTML file on localhost and automatically reloads the page when you save your file.

## 8. Live Share

![Live Share Logo](https://ms-vsliveshare.gallerycdn.vsassets.io/extensions/ms-vsliveshare/vsliveshare/1.0.3912/1614890580405/Microsoft.VisualStudio.Services.Icons.Default)

```shell
ext install MS-vsliveshare.vsliveshare
```

Visual Studio Live Share enables you to collaboratively edit and debug with others in real-time, regardless of what programming languages you're using or app types you're building. It allows you to instantly (and securely) share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, voice calls, and more!

## 9. Prettier - Code formatter

![Prettier Logo](https://esbenp.gallerycdn.vsassets.io/extensions/esbenp/prettier-vscode/5.9.2/1613061160143/Microsoft.VisualStudio.Services.Icons.Default)

```shell
ext install esbenp.prettier-vscode
```

Prettier is arguably the best extension on VS Code.

Prettier is an opinionated 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.

It supports JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown, YAML.

## 10. Path Intellisense

![Path Intellisense Logo](https://christian-kohler.gallerycdn.vsassets.io/extensions/christian-kohler/path-intellisense/2.3.0/1599815793523/Microsoft.VisualStudio.Services.Icons.Default)

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

This is a simple extension which automatically completes the path files in your code.

![Path Intellisense Example](https://i.giphy.com/iaHeUiDeTUZuo.gif)

If you have any more extensions which you find quite useful then please mention them in the comments.

Happy Coding!