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>

➡️ 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"
}

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! 🤝📬

Comments

[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

• Bracket Pair Colorized can also be removed, and this setting can be added to our VS Code:

"editor.bracketPairColorization.enabled": true

Then you have more options to customize colors.

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

Thanks and best regards.

[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. 🙏🤩

[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 😂

[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 😉

[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.

[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. 🤩

[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!

[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. 🙂

[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.

[Gaël Thomas]

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!

[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.

[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!

[Ezinne Anne😎👩🏿‍💻]

I love this article 👏🏿👏🏿👏🏿

[Gaël Thomas]

Glad you love it, @ezinne_anne! 😊🙏

[EbenJesusSaves]

I like this one

[Gaël Thomas]

Thanks, @ebenjesussaves! Glad you like it 😄

[Alex]

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

[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.

[Mohammed Samgan Khan]

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

[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 😉️

[Amy Liu]

Big fan of GitLens, thanks for sharing.