Must have VS Code Extensions for Web Developers

Published in

7 min readApr 18, 2020

Visual studio code, arguably the best code editor to use in present time. Due to its wide range of extensions and support from Microsoft this editor is widely adopted.

Visual studio code is built on top of open source Monaco editor by Microsoft. This project has received around 14k stars on GitHub.

For me it’s all about getting the most out of my IDE and handling most of my web development operations in it, so I can save time. As developers, we need to be quick and efficient. Thankfully, VS Code offers extensions that enables us to extend the capability of the code editor. Below is a list of my favorite extensions for VS Code and how you can use them.

1. PRETTIER — A CODE FORMATTER

Prettier does what the name suggests, formatting your code in a consistent and prettier style. You can configure it to automatically format your code on saving, or manually apply it using the command palette. This can save you a lot of time, as you can avoid repetitive tasks, such as hitting tab multiple times to format your code.

Go to Settings -> Text Editor to configure your preferences

2: CSS PEEK

As its name suggests, CSS Peek extension lets you jump to the CSS code using classess and IDs.

3. MATERIAL THEME & MATERIAL ICON THEME

Choosing the proper theme for your IDE is crucial and Material Theme is one of my favorites. Use ctrl + p to access the command palette after installing it and navigate to Preferences: Color Theme. It provides a variety of Light and Dark Themes as also the option to customize them.

You can combine this with the Material Icon Theme that helps distinguish files with a variety of icons, and you have the perfect companion to your IDE!

4. BRACKET PAIR COLORIZER

I am sure you often find yourself in the situation where you are trying to see where a bracket ends, especially when you have a lot of nested items.With the Bracket Pair Colorizer matching brackets are identified with colors, and you can configure which characters to match and which colors to use.

Below is an example of how the previous code transforms with the Bracket Pair Colorizer:

5. AUTO RENAME TAG

If you are writing HTML/XML, Auto Rename Tag can also be a time saver. Just rename the opening tag and it will automatically rename its closing tag.

6. PEACOCK — CHANGES THE COLOR OF VISUAL STUDIO CODE WORKSPACE

I often need to switch between projects to do a quick bug fix or reference a function I previously wrote or library I previously used. So, I find myself in a situation where I have 2 or 3 projects open on my laptop. Peacock helps you to visually distinguish those projects by applying a different color to them.

Use the command palette to search for Peacock after installing it and apply a color to your project.

7. JAVASCRIPT (ES6) CODE SNIPPETS

No need to mention that JavaScript is the core of web development. There are lots of code snippets that we used on a daily basis and this extension helps you by not writing that repetitive code again and again.

Javascipt (ES6) Code Snippets provides JavaScript, TypeScript, Vue, React and HTML code snippets. I personally believe this is a must-have extension for web development.

8. ESLINT

ESLint is the linting utility for JavaScript. It checks your code for common errors and lets you know in the editor itself. It’s like a virtual peer who is validating your code while you are writing it.

Before installing ESLint in visual studio, install it as a global package first.

npm install -g eslint

9. PATH INTELLISENSE

Importing code from other files is what everyone does on a daily basis. Path Intellisense extension makes the development time faster by autocompleting file names.

You type the name of the file in statements and it will search and give you suggestion.

10. Live Server

Live Server extension provides the live preview of your web application right within the editor.

This is very handy and useful for the front end developers.

11. DEBUGGER FOR CHROME

Believe it or not, debugging JavaScript means more than just writing console.log() statements. Chrome has features built in that make debugging a much better experience. Debugger for Chrome extension gives you all (or close to all) of those debugging features right inside of VS Code!

12. BITBUCKET (OR GITHUB)

With the Bitbucket (or Github) extension you can do all your git-related tasks through VS Code. Open the command palette after the installation and type Atlassian to see a list of the available commands.

13. BROWSER PREVIEW

I love the Live Server extension (mentioned above), but this extension goes another step further in terms of convenience. It gives you a live-reloading preview right inside of VS Code. No more having to tab over to your browser to see a small change!

14. COMMAND RUNNER

In our project setup, we are using npm scripts to minify and autoprefix our css, js files and more. I use the VS Code terminal to run those commands when needed. With the Command Runner extension, you are able to create and run custom shell commands. Create them in your settings JSON file and then use ctrl + shift + r to bring up the available commands.

15. BETTER COMMENTS

Better Comments extension helps you to create more human-friendly and easy to read comments.

16. IMAGE PREVIEW

The Image Preview extension allows you to see a preview of your images in the gutter of your file and on hover. A real time saver when you are trying to remember what an image looks like.