Top VS Code Extension You Must Try!

Visual Studio Code, maintained by Microsoft, is one of the most popular open source code editors out there. VSCode aims to offer all the tools you need while cutting out the complex workflows of full IDEs. Many programmers prefer VS Code because it offers so many extensions for added functionality, productivity, debugging, and speed.

Advantages of extensions

Visual Studio Code is widely used nowadays for writing software. It is highly extensible and there are a lot of contributors that create useful extensions for it, to give this editor superpowers. It’s not a joke, you can really speed up your development with these tools and enhance the contribution with teammates.

In this quick guide, we’ll go over the top 10 VS Code extensions that any web developer should use . We’ll discuss what they do and how they can make your coding life easier. Let’s jump in!

1. Live Server

Immediately see code changes reflected in the browser

This is one of my favorite extensions. Live Server launches a local development server with a live reload feature both for static and dynamic pages.

Every time you save your code, you’ll instantly see the changes reflected in the browser. You’ll be much faster at spotting errors and it’s much easier to do some quick experiments with your code.

2. Bracket Pair Colorizer

The VS extension Bracket Pair Colorizer matches corresponding brackets in your code with the same color. This is a great help when you’re working with things like nested components, objects, or functions that all have brackets or parentheses.

With this simple extension, it’s much easier to find matching pairs and understand your code. The biggest advantage of this extension is improved navigation and accessibility. It also makes it easier for others to read and understand your code.

3. Tailwind CSS IntelliSense

As you can see in the demo, the extension will automatically try to autocomplete Tailwind utility classes for you.

4. Prettier

Prettier is an opinionated code formatter, which you can set up according to your preferences. It just simply formats your code, and it is really beneficial to have a consistent formatting and styling across your code, because it can save you a lot of time, especially when you collaborate with other developers. You can use Prettier plugins to further enhance the capabilities of this extension, and you can also make it format your code automatically when you save a file.

5. GitLens

If you’re developing JavaScript projects, then there’s a big chance you’re using git. The extension: GitLens improves the git functionality in VS Code. A couple of notable features that are worth mentioning are:

  • git blame – shows who modified each line within a file
  • git changes – highlights any local (unpublished) changes or lines changed by the most recent commit
  • git revision navigation – shows the git history of a file and allows you to effortlessly navigate it

6. GitHub Copilot

The GitHub Copilot VS Code extension couldn’t be left out on this list. This is essentially an AI pair programmer that gives suggestions on what it thinks you’re going to write in your code. It can even write complete methods and classes for you.

But how is the AI able to do that? GitHub Copilot has been trained on billions of lines of public code on GitHub using Open AI (machine learning). So it has been trained to recognize patterns and with that knowledge, it’s able to determine what the developer is going to create in code.

7. Git History

Get a nice visual of the git log

Similar to GitLens, Git History is a VSCode extension that gives a visual of the git log. No longer should you look through git log in the terminal.

The extension is quite comprehensive as well. It allows you to compare branches, commits, and files across commits. You can also look up Github avatars, which is quite neat.

Get a nice visual of the git logSimilar to GitLens, Git History is a VSCode extension that gives a visual of the git log. No longer should you look through git log in the terminal.The extension is quite comprehensive as well. It allows you to compare branches, commits, and files across commits. You can also look up Github avatars, which is quite neat.

8. Better Comments

Better comments help you write more human-friendly, readable comments. Comments help you understand your own and others’ code. This extension helps to visually organize your comments, so it will be much more digestible. You can categorize your annotations to highlighted text, errors and warnings, questions, strikethrough and TODO. With these formatted annotations being visually separated you won’t miss out on any must-read comments.

Better comments help you write more human-friendly, readable comments. Comments help you understand your own and others’ code. This extension helps to visually organize your comments, so it will be much more digestible. You can categorize your annotations to highlighted text, errors and warnings, questions, strikethrough and TODO. With these formatted annotations being visually separated you won’t miss out on any must-read comments.

9. Colorize

See which colors you’re using in your style guides

Sticking with colors, Colorize instantly visualizes CSS colors in your CSS/SASS/Less/… files. This makes it very easy to see at a glance which colors you’re using where.

10. Debugger for Chrome

Debug your JS code in VScode

Developed by Microsoft, Debugger for Chromeallows you to debug your JS code in VSCode. Contrary to debuggers in other IDEs, it’s surprisingly smooth.

You can set breakpoints, step your way through the code, debug scripts added dynamically, and more.

Conclusion

To summarize, as a developer it can be a daunting task to find the right VS Code extensions to improve your workflow and productivity.

As a result, I put together this list of the top 10 VS Code JavaScript extensions, which also includes Git Lens, Git Graph, GitHub Copilot, Prettier, Tailwind CSS IntelliSense, JavaScript booster, EsLint, and DotEnv.

You’re daily productivity and focus will improve and next to that your code is less prone to bugs because of the guardrails and highlights that are present in these VS Code extensions.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *