10 Must-Have VS Code Extensions for Web Developers — Boost Your Productivity and Streamline Your Workflow!

Gautham Dinesh
4 min readJun 12, 2023

I have been using Visual Studio Code for about 4 years now, and one of the reasons I still stick with it is because of its vast number of extensions. Recently, while setting up a new laptop for a web development project, I had to install a bunch of extensions so thought it would be helpful to share the top extensions that have helped me streamline my workflow and boost my productivity.

1. GitLens

GitLens is a powerful VS Code extension that enhances the Git capabilities built into the editor. With GitLens, you can easily navigate and explore Git repositories, view blame annotations, compare branches and commits, and much more. I personally use it to see what commits have been made by other team members and to view file and commit history. If you are an enterprise, GitLens offers a supercharged version with premium features like visual history, commit graph, focus view and more.

Screenshot showing GitLens feature
Gitlens Blame Annotations

2. Vim

The Vim extension for VS Code brings the power of the Vim text editor to your code editor. With this extension, you can use Vim commands and keybindings to edit your code more efficiently. Before using this extension, I would code in Terminal using Vim. However, now I can enjoy both the comfort of VS Code and the powerful keybindings from Vim. I also included a minor keybinding that maps j+k to Esc in Vim, which makes life so much easier since I don’t need to stretch my finger so far back every time. Read this article on how to get started with Vim and add a powerful tool to your coding arsenal.

Code showing remapping of Vim keybindings on VS Code
Vim Keybinding Remap

3. Github Copilot/Kite

Github Copilot and Kite are all AI-powered code completion extensions that use machine learning to suggest code snippets and code completions as you type. I personally started using Github Copilot since the start of this year since it is included in my education package. Prior to that I was using Kite which works across all text editors that you have installed and needs to be installed as a standalone application. Unfortunately, Kite is no longer being updated but the code is open sourced.

4. Material Icon Theme

The Material Icon Theme provides a set of icons for use in your project. It really adds life to your project than seeing the ordinary icons in VS Code. The little details make a big difference in easily identifying directories and files.

Screenshot showing directory icons with Material Icon Theme on VS Code
Material Icon Theme

5. Prettier

Prettier automatically formats your code to make it more readable and consistent. I use Prettier with Javascript, React, and basically everything else that is not Python (Autopep8). You can also define a prettierrc file to keep your team’s code formatting and styling in sync. But don’t forget to include a prettierignore to file to exclude folders like node_modules from formatting.

6. Color Highlight

The Color Highlight extension shows the block of color next to any defined colors in your code. This helps to easily identify colors in your project and visualize it at a lower level, making it easier to change if you make any errors.

Screenshot showing Highlight color extension on VS Code
Color Highlight Preview

7. Autopep8

Autopep8 automatically formats your Python code to conform to the PEP 8 style guide. If you are working with a Django or Flask backend, this extension will help to keep your team’s code standardized. You can easily clean up and organize your Python code, making it easier to read and maintain.

8. ES7 + intellisense

The ES7 + intellisense extension provides advanced JavaScript language features, including support for async/await and object spread operators. ES7+ intellisense highlights any errors and provides autocomplete features and shortcuts for React and Javascript which saves a ton of time when creating components for example.

9. Tailwind CSS intellisense

The Tailwind CSS intellisense also provides intelligent autocomplete and linting for your Tailwind CSS classes. It allows you to access all the Tailwind CSS classes including your custom classes, making development much faster than having to refer to the docs every time.

10. Docker

The Docker extension provides a set of tools for working with Docker containers and images. With this extension, you can easily create, manage, and deploy Docker containers from within VS Code. I find it especially helpful to see which containers are running, which images are built, for quickly looking into files within containers and for launching terminals within containers.

In conclusion, these 10 VS Code extensions can help streamline your workflow, improve your productivity, and make your web development experience more enjoyable. Give them a try and see how they can help improve your coding experience! Let me know if you have any questions and other content you would like to see!

--

--