DEV Community

loading...
Cover image for My 12 Favorite VSCode Extensions

My 12 Favorite VSCode Extensions

Katherine Peterson
Software Engineer
Originally published at blog.katherinempeterson.com Updated on ・3 min read

One of the reasons VSCode is such an awesome code editor is the huge library of extensions created by the community that increase developer productivity. Below are some of my favorite VSCode extensions.


1. Rainbow Brackets

Rainbow Brackets Example
This simple extension makes your brackets colorful so you can easily find matching pairs.

2. Auto Rename Tag

Auto Rename Tag Demo
There isn't really ever a time where you would want to change an html tag without changing the corresponding opening/closing tag. Automatically change both at the same time with this extension.

3. Relative Path

Relative Path Demo
This extension has saved me so much time writing import statements. Easily get the relative path to any file in your workspace with a simple keyboard shortcut.

4. Prettier

Alt Text
Keep your code style consistent with this formatter. Configure your settings exactly how you like, then format your code with a keyboard shortcut or on save.

5. htmltagwrap

htmltagwrap Demo
Highlight a block of code and use a shortcut to wrap it in any html tag.

6. Markdown Preview Enhanced

Markdown Preview Enhanced Demo
If you ever write markdown files, having a live preview is incredibly helpful.

7. Polacode

Polacode Demo
This extension allows you to take beautiful screenshots of your code.

8. Random Everything

Alt Text
There are so many better uses of our time than coming up with fake placeholder data. This extension allows you to quickly add random pieces of data to your code, such as names, emails, colors, etc.

9. CSS Peek

CSS Peek Demo
"Peek" at the styles for any CSS class, id, or HTML tag. Open the styles inline or quickly jump to the file where they are defined.

10. Turbo Console Log

Turbo Console Log Demo
Easily log variable names and their values to the console with a keyboard shortcut. Can be configured to include things like file name and line number in the log for easier debugging.

11. Simple React Snippets

Simple React Snippets Demo
Snippets for all of the React boilerplate you write over and over again.

12. Snippet Creator

Snippet Creator Demo
There are many snippet extensions like the React one above, but sometimes you might want to make your own custom snippets. This extension allows you to do that easily.

Discussion (42)

Collapse
weirdmayo profile image
Daniel Mayovsky

Vim plugin is a necessity for me

Collapse
soconn profile image
soconn

I'm a vim guy through and through, but that plugin only lasted a few minutes with me

Collapse
afthabanees profile image
Afthab Anees

Why Tho ??

Thread Thread
soconn profile image
soconn

The workflow just didn't feel right with working in an IDE.

Thread Thread
afthabanees profile image
Afthab Anees

hmm

Collapse
nickytonline profile image
Nick Taylor (he/him)

Congrats on your first post!

You did it!

Collapse
afthabanees profile image
Afthab Anees

lmao

Collapse
nald_dev profile image
Nald Dev

There have been lots of articles about vs code extensions, but from this article I just know about snippet-creator and htmltagwrap. Great extensions, extensions that make my life easier : D, thanks

Collapse
tabnine profile image
Tabnine

Great article. You're missing something for productivity, though :) have you heard of Tabnine AI code completions? It uses GPT-2 based models to predict the exact code the developer has intended to type and saves thousands of keystrokes. Works miraculously with VS Code!

Collapse
mattmattv profile image
Matthieu Vion

Super hyped by the ´console.log´ extension ! I need to test that :)

Collapse
markilabot profile image
Mark Escolano • Edited

Yeah me too. It has a windows keys shortcut instruction. For MAC users should work with ctrl+option+L.

Collapse
neatcoder profile image
Neat Coder

Nice and Useful list of Extensions!
Thanks..

Collapse
michelledev3 profile image
michelledev

Thanks Katherine -- U ROCK!

Collapse
anubra266 profile image
Abraham Anuoluwapo

This is beautiful, but you should checkout webpack aliases, you won't need No 3

Collapse
katherinecodes profile image
Katherine Peterson Author

Very cool, I didn’t know about that.

I don’t use webpack in all my projects though so it might still be useful to have both?

Collapse
anubra266 profile image
Abraham Anuoluwapo

Yeah, both is good.

Collapse
raychginge profile image
Rachel Bourne

Thanks, this list is really helpful

Collapse
amar39364236 profile image
Amar

nice :)

Collapse
andrewbaisden profile image
Andrew Baisden

Good list of extensions here.

Collapse
hendra_setiyawan_af4130da profile image
Hendra Setiyawan

Ok Thank for information 777

Collapse
maxwilliamjf profile image
Vice Cônsul da URSAL 🇪🇪

Random Everything is wonderful! Thank u :)

Collapse
williamipark profile image
William Park

These are great — thank you :)

Collapse
_bkern profile image
Barry

Some great ones in here!

Collapse
sarthology profile image
Sarthak Sharma

I always thought VSCode listicles has nothing new to offer. I guess I was wrong. Great Post Katherine. 💯🚀

Collapse
arvindpdmn profile image
Arvind Padmanabhan

Awesome. No. 6 is going to be useful for Devopedia (devopedia.org/) authors. All our content is written in Markdown and equations in MathJax. Thanks.

Collapse
pfacklam profile image
Paul Facklam

Good article and very useful extensions. Thanks for sharing!

Collapse
fjsebastiam profile image
fjsebastiam

Snipper creator looks fantastic, i'ts very helpfull

Collapse
pzelnip profile image
Adam Parkin

I used to also love Polacode, but it appears to now be broken, and hasn't been updated in almost 2 years. Related issue: github.com/octref/polacode/issues/157

Collapse
balduinofernando profile image
Balduino Fernando

I use SnapCode Instead... You should try it man.

Collapse
pzelnip profile image
Adam Parkin

Hmm, gave it a try, but pasting into the window I don't see my code?

Collapse
23ebd41776a64ee profile image
Nick Vasa

Turbo clo’s gonna save tons of my time from now🤩 Thanks

Collapse
lucalves profile image
Lucas Alves

Good! :)

Collapse
barispinar2307 profile image
Barış Selayet

Random Everything look good. Thanks.

Collapse
alimobasheri profile image
MirAli Mobasheri

Great suggestions! Thanks.

Collapse
dendihandian profile image
Dendi Handian

is Rainbow Brackets better than Bracket Pair Colorizer 2?

Collapse
katherinecodes profile image
Katherine Peterson Author

No, I think they are about the same :)

Collapse
qq449245884 profile image
qq449245884

Dear Katherine Peterson,may I translate your article into Chinese?I would like to share it with more developers in China. I will give the original author and original source.

Collapse
katherinecodes profile image
Katherine Peterson Author

Yeah, sure!

Collapse
samir7768 profile image
samir7768

Really awesome & useful.Auto rename is inbuilt on vscode.Will use these.<3

Collapse
katherinecodes profile image
Katherine Peterson Author

Thank you! I heard that the built in auto rename tag doesn’t work in jsx/tsx files, but I haven’t tested it