Must-have Visual Studio Code extension for Web Development in 2022

Visual Studio Code requires no introduction. If you are even a little bit into coding, you know what VS Code is. It is a source-code editor built by Microsoft and is one of the best code editors out there. Also, it is my personal favorite!

Its simple & intuitive design, numerous features, and huge marketplace for extensions and plugins make it a top choice even among professionals. And it supports almost every language out there!

Today we are going to list the must-have plugins for VS Code that make it even better for Web Development.

Remember, these are in no specific order. I'm just listing them as they appear in my VSCode. So here goes:

1. JavaScript (ES6) code snippets

Author: charalampos karypidis

This is almost a no-brainer for Web Development. JavaScript exists at the very core of Web Dev. This extension provides all the code snippets for Javascript ES6 syntax. It works with JavaScript, TypeScript, JSX, TSX, and even HTML autocomplete making coding way faster and more efficient. I mean, you can console.log just by typing 'clg' and tab!

Link to Marketplace: https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

2. ES7 + React/Redux/React-Native snippets

Author: dsznajder

If you are a React developer, you must have this extension. This provides autocomplete snippets for React, Redux as well as React-Native.

My favorite thing about this plugin is how it makes importing stuff easier:

And also, writing boilerplate code is lighting fast! You can code a complete react component just by typing 'rafce' and hitting enter! Example:

Link: https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

3. Auto Close Tag

Author: Jun Han

I'm not going to lie, writing both the opening and closing HTML tags manually is quite cumbersome. This extension does exactly what it says, automatically closes your HTML tags for you! As you can see below:

Link: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

4. Auto Rename Tag

Author: Jun Han

Another extension by Jun, this one automatically renames the closing tag for any opening HTML tag that you rename. Saves a lot of time!

Watch it in action:

Link: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

5. Bracket Pair Colorizer 2

Author: CoenraadS

This extension renders every pair of brackets with a different color so that you don't get lost, especially in those nested loops!

Example:

Link: https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

6. ESLint

Author: Microsoft

This extension integrates ESLint into VSCode.

ESLint statistically analyzes your code to quickly find problems. Many problems ESLint finds can be automatically fixed. ESLint fixes are syntax-aware so you won't experience errors introduced by traditional find-and-replace algorithms.

Link: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint&ssr=false#overview

7. Live Server

Author: Ritwick Dey

You just HAVE to have this plugin. This will make your soo much easier. Live Server launches a local development server on your browser for static and dynamic pages. Just write some code and save it to view the changes on your browser instantly. No need to refresh the browser every time you make changes!

It also provides a button for easy & fast access:

Link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

8. Material Icon Theme

Author: Philipp Kief

This extension provides pretty icons for different file types. This makes it easy to distinguish between different files at a glance. It is also one of my favorites!

Look at how pretty those icons are:

It even provides icon for various folder depending upon their names:

Link: https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

9. Prettier - Code formatted

Author: Prettier

Prettier is an opinionated code-formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

You can just right-click and select 'Format' to instantly make your messy code 'prettier'.

I personally use this with the format-on-save feature of VS Code. Just go to your settings and search for formatOnSave and make sure that it is enabled. This will make Prettier format your code every time you hit save!

Link: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

10. Thunder Client

Author: Ranga Vadhineni

If you work with APIs, you just cannot miss this one. Thunder Client is a lightweight Postman alternative. That means you can test out and manage your APIs right inside of VS Code. No need to switch to your browser window!

Link: https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client

That's it. These are all the extensions that I currently use in my day-to-day development. Subscribe to this blog if you think this helped you and share with others too! Good luck!