VSCode extensions every web developer should know
Tags: productivity, tooling, webdev, beginners
Published: 2022-07-12 18:23:04

The community is one of the reasons why Visual Studio Code is the most popular code editor. Any product can become successful if it has a strong community behind it. The VSCode community has created numerous extensions to make development easier and to boost developer productivity. In this article, I'll share a few extensions that I've found helpful for web developers.

## Let's get started

## 1. [PWA studio](https://marketplace.visualstudio.com/items?itemName=PWABuilder.pwa-studio)
If you're building a Progressive Web App (PWA), PWA studio will come in handy.

![pwa studio](https://i.imgur.com/pAoV1xt.png)


- Start building your PWA from scratch with their starter template.
- Convert the existing app into a PWA.
- Package your PWA for different stores like Microsoft store, Apple app store, and more.
- Generate service workers and icons for different devices in order for your web app to be store-ready.


## 2. [Import cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)
Performance is an important aspect of a web application. The use of large npm packages reduces performance. The import cost extension displays the package size for each third-party import in a file. So that you may make better decisions about using third-party packages and adjust the way you import from third-party packages.

![import cost](https://i.imgur.com/U0lUXKs.png)

## 3. [Mintlify Doc Writer](https://marketplace.visualstudio.com/items?itemName=mintlify.document)
Do you hate documenting your code? No problem! Mintlify Doc Writer helps you generate nice documentation with a single click.

- Just highlight the code and hit `CTRL` + `.`.

![Mintlify Doc Writer](https://i.imgur.com/NsbsS1S.png)

## 4. [npm Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)
npm intellisense autocompletes npm modules in import statements.

![npm intellisense](https://i.imgur.com/9UZmstN.gif)

## 5. [REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)
We have to use external tools like Postman to build or test REST APIs, which might be burdensome for small REST APIs or if you just want to test an endpoint quickly. As a solution, you may use the REST client vscode addon to test APIs right from the code editor. Handy! Handy!!

![rest client](https://i.imgur.com/okHBnNq.png)


## 6. [Turbo Console Log](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log)
One of the most stressful movements for a developer is writing console log messages. In log statements, we often write shit. But, this extension allows you to create meaningful log messages with a single shortcut.

- Install the extension.
- Select a varible.
- Press `CTRL` + `ALT` + `L` or `CTRL` + `OPTION` + `L`

That's it! A logging statement will be added to the next line of the selected variable.

![Turbo Console Log](https://i.imgur.com/uIWhsTI.png)

## 7. [Better comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)
What makes you a good developer? - Writing comments. This plugin aims to make those remarks easier to read. Your comments can be divided into TODOs, Alerts, Highlights, and Queries.

![better comments](https://i.imgur.com/XZF3QZT.png)

## 8. [ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=rodrigovallades.es7-react-js-snippets)
In our react applications, we frequently write boilerplate code. We also hate writing boilerplate code. This extension consists of various of react/redux/react-native/graphql code snippets that can be inserted using simple prefixes.

![es7 react snippets](https://i.imgur.com/PC84fhh.png)

## 9. [CSS peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)
CSS becomes increasingly jumbled as your codebase expands. Eventually, it becomes difficult to debug CSS and see the CSS for a class or id. CSS peep comes to the rescue. Simply hold `CTRL` and hover over any class or id, and the extension will display CSS for that class or id.

![css peek](https://i.imgur.com/7LKcgbo.gif)

---

What is your favorite VSCode extension? Share in the comments 👇.

---

I hope you found these extensions helpful. Follow for more 💯🚀.