Discover essential tools for web development with ’10 Must-Have VSCode Extensions.’ Enhance your coding workflow and productivity with these indispensable Visual Studio Code extensions tailored for web developers.

Visual Studio Code is a widely-used source code editor that has gained immense popularity, boasting over 160k stars on GitHub. What makes it so well-loved is its lightweight design, flexibility, open-source nature, user-friendly simplicity, and impressive extensibility.

Visual Studio Code is super flexible with thousands of extensions you can add to boost your productivity and avoid repetitive tasks. You can find them all in the Visual Studio Code marketplace, and most of them are free.

This post introduces 10 strong Visual Studio Code extensions that make web development better. It includes examples of how to use them and links for easy installation.

1. Prettier

Prettier is a helpful tool for coding. It organizes your code automatically, making sure it looks consistent. This is especially useful when many people are working together on a project, as it helps everyone follow the same style rules

The Prettier extension in Visual Studio Code smoothly connects the code editor with Prettier. It lets you quickly format your code with a keyboard shortcut or right after saving the file.

Watch Prettier in action:

Prettier instantly formats the code after the file is saved.

Install: Prettier — Code formatter — Visual Studio Marketplace

2. JavaScript Booster

This extension enhances Visual Studio Code by adding helpful tools for fixing and improving your JavaScript code. It simplifies common tasks like refactoring while you’re programming

It can do many things, like changing an ‘if…else’ statement to a shorter ternary operator:

splitting a declaration and initialization into multiple statements:

and converting a function to an arrow function:

Install: JavaScript Booster — Visual Studio Marketplace

3. ESLint

ESLint is a tool that helps you find and fix issues in your JavaScript code. It looks for both quality and style problems, making it easier to catch mistakes and avoid tricky bugs in your programming.

The ESLint extension in Visual Studio Code connects ESLint with the code editor. This means ESLint can directly alert you to any issues within the editor, making it easier to spot and fix problems in your code.

For instance, it can use a red wavy line to notify of errors:

We can view details on the error by hovering over the red line:

We can also use the Problems tab to view all errors in every file in the current VSCode workspace.

Install: ESLint — Visual Studio Marketplace

4. GitLens

GitLens is another powerful extension & useful extension that makes it easier to use Git for managing your code in Visual Studio Code.

GitLens shows you important details about your code repository, like file history, commits, branches, and remotes. It’s all conveniently displayed in the views.

Simply put your cursor on a line in the editor, and GitLens will show you information about the latest commit where that line was changed:

Install: GitLens — Git supercharged — Visual Studio Marketplace

5. Live Server

The Live Server extension in VSCode creates a local server for your project files. It automatically updates and reloads the page whenever you make changes to a file in your workspace

In the demo, a new server is started to show the content of the index.html file. When you make changes to index.html and save the file, the server updates automatically. This means you don’t have to manually refresh the browser every time you make a change

In the demo, you noticed that you can quickly start a new server by right-clicking on a file in the VSCode Explorer and choosing Open with Live Server from the menu.

Install: Live Server — Visual Studio Marketplace

6. CSS Peek

With the CSS Peek Extension, you can easily check the CSS styles for different class names and IDs used in your HTML.

There are three ways to use CSS Peek:

• Hold down the Ctrl key and hover over a class name or ID to quickly see its definition.
• Use a keyboard shortcut to open a window that shows the CSS definition of a class name or ID.
• Use a keyboard shortcut to jump to the location of the definition in its CSS file.”

Here is a demonstration of all these methods:

Install: CSS Peek — Visual Studio Marketplace

7. Intellisense for CSS Class Names in HTML

This extension works well with CSS Peek. It helps by suggesting code for the HTML ‘class’ attribute based on existing CSS definitions in your current Visual Studio Code project.

You’ll find this extension especially useful when dealing with third-party CSS libraries that have many classes to choose from.

Install: IntelliSense for CSS class names in HTML — Visual Studio Marketplace

8. JavaScript (ES6) Code Snippets

Just as the name suggests, this extension is packed with lots of ready-to-use code snippets for JavaScript, written in the ES6 syntax.

Watch this demo where the ‘imp’ and ‘imd’ snippets from the extension are used to swiftly import two modules using ES6 syntax.

Install: JavaScript (ES6) code snippets — Visual Studio Marketplace

9. Visual Studio Intellicode

Artificial Intelligence is boosting productivity across different jobs, including for developers. IntelliCode is a tool that provides intelligent code completion suggestions based on the current code context. It does this by using an AI model trained on thousands of widely-used open-source projects from GitHub.

When you type the dot (.) to access an object’s method or fields, IntelliCode suggests a list of members that are likely to be used in that specific situation. These suggestions are marked with a star symbol, as you can see in the demo.

IntelliCode is available for JavaScript, TypeScript, Python, and a number of other languages.

Install: IntelliCode — Visual Studio Marketplace

10. VSCode Icons

You can customize the appearance of files in Visual Studio Code using icon packs. These packs not only make the application look better but also help you quickly identify and differentiate between different types of files.

One of the most popular icon pack extensions is ‘VSCode Icons,’ known for its extensive collection of icons and has been downloaded over 11 million times.

VSCode Icons doesn’t just differentiate based on file extensions; it also gives unique icons to files and folders with specific names like package.json, node_modules, and .prettierrc

Install: vscode-icons — Visual Studio Marketplace

Conclusion

These 10 essential extensions can really help with web development in Visual Studio Code. Install them now to make your life as a web developer easier and improve your productivity.