Cool Extensions for VS Code
Tags: webdev, programming, javascript, tutorial
Published: 2020-12-17 09:19:38

**VS Code** is among the most popular, free, open-source code-editors out there, and one of the reasons for such high demand is the extensions and plugins it offers.

If you are a VS Code user you must be familiar with some popular extensions like [Live-Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) and [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode). If you haven't you must check them out.
Here I am sharing my list of cool extensions for VS Code that you might don't know and can make your life easy.

## 1. Path Intellisense 
In large projects, remembering specific file names and the directories your files are in can get tricky. This extension will provide you IntelliSense for just that. **As you start typing a path in quotations, you will get IntelliSense for directories and file names**. This will save you from spending a lot of time in the file explorer.

---

## 2. Git Lens
There are a bunch of git extensions out there, but one is the most powerful with tons of features. You get **blame information, line and file history, commit searching**, and so much more. If you need help with your Git workflow, start with this extension!

---

## 3. Bracket Pair Colorizer
With tons of nested code, it gets almost impossible to determine which brackets match up with each other. Bracket Pair Colorizer, as its same suggests, colors matching brackets to make your code much more readable. Trust me, you want this!

---

## 4. Browser Preview 
If you use the Live-Server Extension, this one goes another step further in terms of convenience. It gives you a live-reloading **preview right inside of VS Code**. No more having to tab over to your browser to see a small change!

---

## 5. Javascript Code Snippet
This extension provides you snippets for popular pieces of modern (ES6) JavaScript code. Now there's no need to retype the same piece of code over and over again.
 
---

## 6. ES Lint
This extension can be configured to **auto-format** your code as well as "yell" with linting errors/warnings. VS Code specifically is also perfectly configured to show you these errors/warnings.

---

## 7. Auto Rename Tags
Need to rename an element in HTML? Well, with Auto Rename Tag, you just need to rename either the opening or closing tag, and the other will be **renamed automatically**. Simple, but effective!

---

## 8. Quokka.js
Need a quick place to test out some JavaScript? Quokka gives you a **JavaScript (and TypeScript) scratchpad in VS Code**. This means you can test out a piece of code right there in your favorite editor!

---

## 9. Better Comments
This extension **color codes** various types of comments to give them different significance and stand out from the rest of your code.
You can color informatory comments with green color, to-do comments with orange color, and just like that.

---

## 10. Better Align
If you're the kind of person who loves **perfect alignment** in your code, you need to get Better Align. You can align multiple variable declarations, trailing comments, sections of code, etc. There's no better way to get a feel for how amazing this extension is than installing it and giving it a try!

---

## **Bonus!:fire:**
## # Polacode
You know those fancy code **screenshots** you see in articles and tweets? Well, most likely they came from Polacode. It's super simple to use. Copy a piece of code to your clipboard, open up the extension, paste the code, and click to save your image!
####Demo:
![PolaCode Demo Image](https://dev-to-uploads.s3.amazonaws.com/i/10f7j07ql34f8o5lpyy5.png)

---

*If you got to learn something new and useful show some love by giving this post a* :heart:
*If you also know some cool extensions then do share them in the comment section below.*

*******
To download and to learn more about these extensions visit the links:
*[Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
*[Git Lens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
*[Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)
*[Browser Preview](https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview)
*[Javascript Code Snippet](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)
*[ES Lint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
*[Auto Rename Tags](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
*[Quokka](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode)
*[Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)
*[Better Align](https://marketplace.visualstudio.com/items?itemName=wwm.better-align)
*[Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode)
*[Live-Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
*[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

If you have read so far, save this post and share it with your programming buddies :smiley: