DEV Community

Cover image for Cool Extensions for VS Code
Hardik Chopra
Hardik Chopra

Posted on

Cool Extensions for VS Code

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 and Prettier. 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!๐Ÿ”ฅ

# 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


If you got to learn something new and useful show some love by giving this post a โค๏ธ
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
*Git Lens
*Bracket Pair Colorizer
*Browser Preview
*Javascript Code Snippet
*ES Lint
*Auto Rename Tags
*Quokka
*Better Comments
*Better Align
*Polacode
*Live-Server
*Prettier

If you have read so far, save this post and share it with your programming buddies ๐Ÿ˜ƒ

Top comments (6)

Collapse
 
alarid profile image
Yohann Legrand

Really nice ones, thanks for sharing ! I really like Polacode, Quokka, Bracket Pair Colorizer and Better Comments.
Another one I'd like to suggest is "Search node_modules" : really useful for quick imports.

Collapse
 
hardikchopra profile image
Hardik Chopra

"Search node_modules" is COOL too !!

Collapse
 
anthonygushu profile image
Anthony Gushu

Polacode's dope, thanks for putting me on to it
I also really recommend Customize UI

Collapse
 
hardikchopra profile image
Hardik Chopra

Thanx for suggesting "Customize UI" !!!

Collapse
 
saileshbro profile image
Sailesh Dahal

Great extensions.

Collapse
 
hardikchopra profile image
Hardik Chopra

There are many more, thanx to such a great community support ๐Ÿ˜ƒ๐Ÿ˜Œ