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