DEV Community

Cover image for Step up Your VSCode Game With These 10 Must-Have Extensions
Gaël Thomas
Gaël Thomas

Posted on • Originally published at gaelgthomas.com

Step up Your VSCode Game With These 10 Must-Have Extensions

Are you looking to take your VSCode game to the next level? Look no further! In this article, we will explore 10 must-have extensions that will enhance your workflow, productivity and make your coding experience even more enjoyable.

Let's use this article as a place where everyone can discover powerful extensions. Feel free to share your favorite extensions in the comments below, and let's expand our VSCode toolkit together!

Project Manager 📁

Are you tired of constantly searching for your projects in different folders or repositories? If yes, this extension is for you!

Project Manager allows you to always keep track of your projects. With it, you can easily access and organize your projects, no matter where they are on your computer.

It comes with many features, such as the possibility to add tags to your repositories.

➡️ Download the "Project Manager" extension

GitLens — Git supercharged 🔎

Even if I use an external application to manage my Git repository, I like using GitLens because it brings Git insights right inside VSCode.

One of my favorite features is the ability to visualize code authorship. When working on a repository with other developers, GitLens makes it easy to see who wrote what and when which saves me time. And, if I need to compare a branch with another one, GitLens makes it a breeze.

But this extension has even more features than that, and I'm sure you'll love them!

➡️ Download the "GitLens" extension

Colorize 🎨

This extension makes colors more visual in your code by generating a colored background for each of them. I like to use it because it makes my IDE more colorful and easy to read.

Below, here's a demonstration coming from the extension page.

➡️ Download the "Colorize" extension

Better Comments 💬

Writing clear and concise comments in your code is essential as a developer. But sometimes, more than plain text comments are needed to communicate effectively with your team or future self. That's where the Better Comments extension comes in.

I mainly use Better comments to make my TODO comments stand out, but you can use it with many other annotations. For example, if you're adding an alert, making a query, creating a TODO, or highlighting important information.

Here's an example coming from their extension page.

➡️ Download the "Better Comments" extension

Code Spell Checker ✅

Do you want to ensure your code is always pretty and grammatically correct? I have an extension for you!

Code Spell Checker is a spellchecker for coders. It'll help you to catch spelling errors by highlighting them in your code.

➡️ Download the "Code Spell Checker" extension

Live Server 🎙️

In a few words, this extension allows you to launch a local development server with a live reload feature for static and dynamic pages.

For example, let's say you're working on a static website project; you can launch a server that will listen to the changes you make to the page and auto-reload accordingly (e.g., a portfolio, a simple HTML page, etc.).

It can also be helpful if you want to do some tests on a simple web codebase.

➡️ Download the "Live Server" extension

Prettier - Code formatter ✍️

As per its name, Prettier is a code formatter. If you're like me and like to have your code auto-formatted whenever you save your changes, this extension is for you!

It'll ensure that all code conforms to a consistent style.

➡️ Download the "Prettier" extension

ESLint 📘

This one is well-known and used by most projects in JavaScript! ✨

ESLint is a static code analysis tool. It helps you to catch potential errors and enforce consistent code styles in your projects. It ensures that your code adheres to a set of coding standards and improves the maintainability of your codebase.

Additionally, it'll help you catch common mistakes and potential problems early on.

Something handy is this tool is highly customizable. Indeed, you can configure it to match your specific coding style and the requirements of your project. For example, you can make your project follow the Airbnb style using ESLint.

➡️ Download the "ESLint" extension

Import Cost 💰

Here's what you can find on the Import Cost extension page: "This extension will display inline in the editor the size of the imported package.".

I love using it because it's a small package that can make you more conscious about the libraries you are importing. Also, it helps to catch non-optimized imports (e.g., with Lodash).

➡️ Download the "Import Cost" extension

Auto Rename Tag 🔖

This handy extension can effortlessly keep your HTML/XML tags in perfect harmony. It's like having a tag-renaming ninja right at your fingertips!

You won't have this kind of compilation problem anymore:

<!DOCTYPE html>
<html>
  <head>
    <title>Fix my tag!</title>
  </head>
  <body>
    <!-- Without Auto Rename Tag -->
    <p>
      You need to edit the tag twice
    </span>

    <!-- With Auto Rename Tag -->
    <p>
      You need to edit the tag once
    </p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

➡️ Download the "Auto Rename Tag" extension

Bonus: Bracket Pair Colorizer 🖌️

I could not have finished this article without a bonus! 🎁

Previous Bracket Pair Colorizer was an extension, but in a recent release, VSCode integrated this as a setting in the IDE. If like me, you're coding in JavaScript, you probably got lost in the indentation of parenthesis and brackets.

Thanks to this, you'll not meet the issue anymore. Indeed, this setting will highlight your parenthesis and brackets by pair. Here's an example from the Bracket Pair Colorized page:

As you can see, the first {} are pink, and the second {} are blue. It becomes even more helpful in more complex operations.

If you want to enable this option, you need to add these instructions in your VSCode settings.json:

{
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs":"active"
}
Enter fullscreen mode Exit fullscreen mode

That’s a Wrap!

I hope this article has introduced you to some new and useful extensions you can add to your VSCode setup. If you have any favorites that aren't on this list, please share them in the comments section! 👀

As we kick off the new year, I want to share one of my new goals with you. My focus for this year is to be consistent and deliver daily educational content on my Twitter that can help you unlock your web development skills. 🚀 From tips to tutorials, I'll share everything I know to help you grow and succeed in your coding journey. 📚

If you're looking for a supportive place, I invite you to join me on Twitter. Let's learn and grow together! 🤝📬

Top comments (21)

Collapse
 
javifelices profile image
Javi Felices

Hello and thank you very much for the listing.

If I may, the last two extensions are no longer needed, VS Code comes with settings to do just that.

  • Auto Rename Tag can be removed and add this setting to our VS Code:
"editor.linkedEditing": true
Enter fullscreen mode Exit fullscreen mode
  • Bracket Pair Colorized can also be removed, and this setting can be added to our VS Code:
"editor.bracketPairColorization.enabled": true
Enter fullscreen mode Exit fullscreen mode

Then you have more options to customize colors.

About this last one, here is this article in neutron about it

Thanks and best regards.

Collapse
 
gaelgthomas profile image
Gaël Thomas

Thanks, @javifelices! I love your feedback and the resource you provided!

As you mention, the "Bracket Pair Colorizer" extension is now native in VSCode. That's why I recommend changing the setting in the article.

But I didn't know about the "Auto Rename Tag" one; I just added this setting in my VSCode, and it works like a charm. 🙏🤩

Collapse
 
optimbro profile image
Rahul

As a head member of CRA, I love such comments which brings more ideas, and add value to original post. Thanks for "editor.linkedEditing": true suggestion.

Btw, CRA means Comment Reading Association 😂

Collapse
 
javifelices profile image
Javi Felices

It is true that there are many topics about the best extensions for VS Code, I like them a lot, because you can always find one that you don't know.

In this case, I saw those two, which could be removed, because VS Code supports it by default.

And I agree, many times, in the comments you learn a lot.

Best regards and thanks.

PS: Thanks for the explanation of CRA 😉

Collapse
 
lgrammel profile image
Lars Grammel

Wow, great list!

I've recently created an extension that provides Chat-GPT-like functions inside VS Code: marketplace.visualstudio.com/items...

Would love to hear if an extension like this would be useful to you as well.

Collapse
 
gaelgthomas profile image
Gaël Thomas

Thanks for your message, @lgrammel!

Wow, when I opened the extension page, this thing captured my attention: "Generate Tests". I should give it a try; if it's generating great test cases and could make me save a lot of time, that would be awesome. 🤩

Collapse
 
nicoespeon profile image
Nicolas Carlo

The "Generate Tests" is quite interesting indeed!

I tried to use it on some existing (legacy) code and took some notes. I just published them here: dev.to/nicoespeon/can-ai-help-me-w...

That being said, thanks for sharing this list Gaël. I'm definitely gonna have a look at the "Import Cost" one, it's intriguing!

Thread Thread
 
gaelgthomas profile image
Gaël Thomas

Interesting! Thanks for sharing this, @nicoespeon! Writing an article with your notes and feedback on your AI tests is a good idea. I bookmarked to read it later!

Glad you found one intriguing extension. 🙂

Collapse
 
lgrammel profile image
Lars Grammel

It works quite well when you e.g. select a single JS function and then generate tests for that. Usually gets me 60-80% of the way. The code generation takes 30s+ though, because it tends to create a lot of text.

Thread Thread
 
gaelgthomas profile image
Gaël Thomas • Edited

Just tested with a simple React component, and the output was pretty decent. Never thought of using Chat-GPT that way.
I'll have to deep-dive this. Thanks again for the suggestion and for the time saved!

Collapse
 
shanecandoit profile image
outOfBounds

I like "git graph" instead of git lens, it's more lightweight.
"Codebook" is good for a jupyter notebook style experience for javascript, go, and rust.
Of course, Ai auto-complete is cool, see "Copilot" and "TabNine".
Finally, add in a database extension for your db of choice and snippets for your language of choice.

Collapse
 
gaelgthomas profile image
Gaël Thomas

Thanks for sharing these, @shanecandoit!

I didn't know about "Git Graph". It looks good! Is it also highlighting the code ownership when you over a line? I mainly use "Git Lens" for that feature (yes, that's an overkill extension for that 😂).

Btw, I have never tried "CoPilot" or "TabNine" yet!

Collapse
 
ezinne_anne profile image
Ezinne Anne😎👩🏿‍💻

I love this article 👏🏿👏🏿👏🏿

Collapse
 
gaelgthomas profile image
Gaël Thomas • Edited

Glad you love it, @ezinne_anne! 😊🙏

Collapse
 
ebenjesussaves profile image
EbenJesusSaves

I like this one

Collapse
 
gaelgthomas profile image
Gaël Thomas

Thanks, @ebenjesussaves! Glad you like it 😄

Collapse
 
lippiece profile image
Alex

Bracket pair colorizer is deprecated, it's now a built-in feature.

Collapse
 
gaelgthomas profile image
Gaël Thomas

Yes, it is! 😊 As I mentioned in the article, it's no longer an extension, and I share how to enable the feature right inside the VSCode settings.

Collapse
 
msamgan profile image
Mohammed Samgan Khan

if u code in laravel.
here is one of the fine extenstion for pint, marketplace.visualstudio.com/items...

Collapse
 
mmueller profile image
Michael Müller

I found that VS Code lacks support for programming language aware diffs, so I created my own extension: SemanticDiff. It is obviously one of my favorite extensions, but maybe it is useful for some of you as well 😉️

Collapse
 
amyliumaiyi profile image
Amy Liu

Big fan of GitLens, thanks for sharing.