Top VS Code extensions that every developer should know

One of the best features of vs code is customizability, via extensions. So, if you are a web developer, then you should know about these extensions.

What is VS code?

Visual Studio Code is a freeware source-code editor made by Microsoft for Windows, Linux, and macOS. Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git.

VS Code Extensions

It is a part of VS code, which extends vs code’s capabilities. It allows web developers to develop applications quickly.

There are thousands of extensions available in VS Code Marketplace. These are some extensions that are part of my daily work as a web developer.

1. Debugger For Chrome

A VS Code extension to debug your JavaScript code in the Google Chrome browser, or other targets that support the Chrome DevTools Protocol.

Debugger for Chrome (marketplace.visualstudio.com)

2. ES Lint

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs. In many ways, it is similar to JSLint and JSHint with a few exceptions:

  • ESLint uses Espree for JavaScript parsing.
  • ESLint uses an AST to evaluate patterns in code.
  • ESLint is completely pluggable, every single rule is a plugin and you can add more at runtime.

ES Lint (marketplace.visualstudio.com)

3. Live Server

Make changes in the code editor, switch to the browser, and refresh to see changes. That’s the endless cycle, but what if your browser would automatically refresh anytime you make changes? That’s where Live Server comes in!

It also runs your app on a localhost server. There are some things you can only test when running your app from a server.

Live Server (marketplace.visualstudio.com)

4. Bracket Pair Colorizer

This extension allows matching brackets to be identified with colors. The user can define which characters to match, and which colors to use.

Bracket Pair Colorizer (marketplace.visualstudio.com)

5. Git Lens

There are so many extensions available in the marketplace, but it is the most powerful extension that I know so far. You get blame information, line and file history, commit searching, and so much more. If you need help with your Git, start with this extension!

Git Lens (marketplace.visualstudio.com)

6. Settings Sync

Developers, including myself, spend a lot of time customizing their dev environment. If you typically work on two different machines, you might have to manually maintain keeping your text editor the same.

With the Settings Sync extension, you can save your setting off in Github. Then, you can load them to any new version of VS Code with one command.

Settings Sync (marketplace.visualstudio.com)

6. Indent-rainbow

This extension colorizes the indentation in front of your text alternating four different colors on each step.

indent-rainbow (marketplace.visualstudio.com)

7. Duplicate Action

This last one seems like a small thing, but for some reason, VS Code doesn’t come with the ability to right-click a file and duplicate it by default.

When I’m heads down in code, I’ll typically duplicate a file, like an existing template, which allows me to only change the content. This makes creating a new page more productive.

Duplicate Action (marketplace.visualstudio.com)

What’s your favorite extension?

There are tons of extensions out there that do amazing things — what’s your favorite? Let me know by commenting.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store