DEV Community

Cover image for My Top 10 Visual Studio Code Extensions
Amy Oulton
Amy Oulton

Posted on • Updated on

My Top 10 Visual Studio Code Extensions

This article was originally published on CodeCast.

Visual Studio Code is one of the most popular code editors and a general favourite among developers. It’s definitely our editor of choice here at CodeCast. Through our never-ending pursuit of making our daily workflow easier, we have accumulated some Visual Studio Code extensions that we absolutely love. Without further ado, here are our top ten extensions:

  • Bracket Pair Colorizer 2 This is now deprecated and no longer being supported. Instead, this is now a native feature in VSCode.

Matteo Sacchetto kindly provided information on how to ensure it's enabled!

"Since the vscode release 1.60 bracket pair colorisation is natively supported, so the bracket pair colorizer extension is no more needed. To enable it you can simply enable these two settings of vscode:"

  {
   ...
   ​"editor.bracketPairColorization.enabled"​: ​true​, 
   ​​"editor.guides.bracketPairs"​: ​"active"​,
   ...
  }
Enter fullscreen mode Exit fullscreen mode
  • EsLint: This is one of the most popular extensions available, and for good reason. If you’re not familiar with EsLint it helps you "to find and fix problems in your JavaScript code". This is incredibly valuable if you work with JavaScript (or a JavaScript framework), and I would highly recommend it. ‍
  • Language Snippets: This one is more of a category of extensions, where you would install the applicable ones for the languages you work in. Currently, on my machine, I have some snippets like EJS Snippets, React/Redux Snippets, and Ruby Snippets. They help add-in integrated language support like auto-closing tags, syntax highlighting and suggestions, and other features depending on the specific extension. This is very helpful when working with templating languages (like EJS) that don’t have auto-closing tags built into the editor.‍
  • Prettier +: This is a popular extension that auto-formats your code for you on save. It doesn’t work with all languages but works with a large number of the more commonly used ones. I personally really love this auto-formatter, but I will caution you that if you're a student, only download it once you’re comfortable with the language you’re working in because it will make you lazy about adding things like semicolons, and help structure your code automatically with proper indentation.
  • Git Lens: This is another very popular extension and is a fantastic tool if you work with a team of developers. This extension provides information about the code such as who wrote it and when it was changed directly within the editor, as opposed to needing to search for this information on GitHub. It makes it much easier for teams to discuss code and possible problems as the details of the code changes are directly available.
  • Live Server: This was another extension I relied on heavily when learning to code. It starts a live server so you can see how your code will appear in the browser. This was extremely helpful when learning HTML and DOM Manipulation. It starts with a simple click and updates the changes on every refresh of the browser window.
  • ‍Footsteps: Footsteps is an extension that helps you keep track of where you were just working within a file. If you are working with hundreds of lines of code, and are scrolling back and forth between sections, this could be an incredibly helpful way to help you quickly find your place. It highlights the area or line of code you were just working on, slowly fading the line as you move away and write more code.
  • Peacock: This is an extension I just discovered, and I am honestly very excited about it. I am someone who likes having multiple instances of VSCode open at once, but it can become confusing about which window is which after working on them for a while. Peacock assigns a unique border colour to each of the instances, so you will be able to distinguish between them a lot easier. It’s a minor change, but can be incredibly helpful!

Peacock extension

  • Icon Packs: What first seemed to be a purely aesthetic extension actually proved more valuable than I initially expected. It adds a substantial amount of unique icons for a large variety of different file types you find within languages. This makes it easy to quickly spot the file type you’re looking for. I currently use Material Icons, but there are a large number of them available and you just have to find which one is right for you!‍

  • Themes: As per most popular applications, you can customize your theme. However, VSCode takes it a step further and the customization capabilities are incredible. There are a ton of ready-made and available themes for download on VSCode that make reading your code a lot easier. Some of the popular themes are Dracula, Atom One, and the one I am currently using, Andromeda. The main draw of adding an additional theme instead of the default one is how much it colorizes or textually changes different parts of your code, so you easily understand exactly what you’re looking at.

There is no shortage of extremely valuable extensions available on Visual Studio Code. You can easily search to find exactly what you’re looking for, or for extensions that help make writing in your preferred language easier. But if you’re new to extensions, hopefully some of our faves will help get you started and make your coding that much easier!

For more of my content, follow me on like Twitter & CodeCast! You can also read my last blog on branding yourself as a developer here.

Discussion (21)

Collapse
jiayi profile image
jiayi

Bracket Pair Colorizer 2 It's been abandoned.

Vs Code already supports this feature

Collapse
amyoulton profile image
Amy Oulton Author

I just saw this prompt myself - that's good to know!

Collapse
ritvikbithub profile image
Ritvik Github

Oh

Collapse
lucy_codes profile image
Lucy Gibson • Edited on

I love Prettier and Eslint, that keeps my code clean and well formatted! For the snippets, I started using Codiga and I like that I can define my own snippets and share them with friends!

Collapse
lgrammel profile image
Lars Grammel

Great extension list! Footsteps looks like a great one, need to give it a try.

I'd be curious what you think about a refactoring extension that I've built: P42 JavaScript Assistant

Collapse
franzcmarcelo profile image
Franz Carhuaricra Marcelo

I just tried it in my project, it's fantastic! ty.

Collapse
resourcefulmind profile image
Opeyemi Stephen

Thanks for this Amy. I already have prettier, ESlint, live server and Git Lens but thanks to you my workspace is no longer lookinf boring as I just installed the Andromeda theme. It's pretty nice too. Liver Server has always been a life saver, God bless the people behind that one.

On a final note, the Bracket Pair Colorizer 2 gave a prompt about not being maintained any longer going into 2022...got any suggestions on a suitable replacement?

Collapse
amyoulton profile image
Amy Oulton Author

Apparently VSCode supports it itself now. I need to look more into that!

Collapse
ziker22 profile image
Zikitel22

Nice list. From the more general ones i like also

StepSize - for tracking tech debt
Todos Tree - for keeping track of todos
Auto Rename Tag - well name says it all
Spotify - well :)

Collapse
amyoulton profile image
Amy Oulton Author

Will definitely heck these out! Thank you!

Collapse
hlucas13 profile image
Homero Lucas do Prado • Edited on

Nice content!
I would like to suggest Live Preview instead of Live Server. I have been using it since the launch. Besides being developed by Microsoft (and may soon become native to VSCode as happened with Bracket Pair), it has two main advantages: embedded browser and live refresh, without the need to save the file:
live-refreshing

Collapse
idered profile image
Kasper Mikiewicz

Footsteps extension looks great! Thanks for sharing.

I've also created VS Code extension, it helps managing project node dependencies. If you work with npm install everyday then you might really like it: Node Dependencies

Collapse
peterwitham profile image
Peter Witham

+1 for Peacock, super helpful on those multi-open project days.

Collapse
rajendrasinh_09 profile image
RAJENDRASINH PARMAR

Thank you for the nice article @amyoulton.

I found one new extension(footsteps) that actually can be useful in large code bases.

Collapse
chrispycode profile image
chrispycode

That's cool they were many extensions I didn't had after switching from other ide's

Collapse
balduinofernando profile image
Balduino Fernando

Andromeda Theme is great, but I switched to Aura 2 and Nord.
But now pair colorizing is a native feature, you don't need extension for that.

Collapse
amyoulton profile image
Amy Oulton Author

Yes! I will be updating the article with that information.

Collapse
qymmore profile image
Sarah Qym

Thank you so much for this! I've been looking for something like Prettier+ and peacock so this really helps :)

Collapse
amyoulton profile image
Amy Oulton Author

So happy to hear!

Collapse
marcosrjjunior profile image
Marcos RJJunior

they are all good extensions, that is the amount of extensions I have installed hah.

others that I find helpful:
macros
Past JSON as Code
CSS modules

Collapse
cadoteu profile image
& Co.

thanks for peacock ;-)
i like mintlify ...