Best VS Code Extensions You Can Use to Boost Your Productivity
Tags: vscode, webdev, productivity, tips
Published: 2024-01-27 09:13:36

As developers, we spend most of our time in our code editor. And most of us are using Visual Studio Code. So today, I will show you some of the best VS Code extensions that I use to create programs.

## ESLint

ESLint is one of the best linting extensions I have ever used. It helps you to implement the best practices in your code while writing the syntax.

![ESLint Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uchr47cwdy79jowncgo0.png)

**Marketplace Link:** [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

## Error Lens

So as you have seen in the previous image, you have to hover over the text to see the error. But this extension makes it easy for you by showing it directly next to your code.

![Error Lens Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c68bnu0acuqwo3cosc08.png)

**Marketplace Link:** [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)

## **Prettier - Code formatter**

Yeah, it's a code formatter. It formats the code once you save the file. You can always customize how you want it to format.

![Prettier Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ipijkykrjejkmuze1hi0.png)

**Marketplace Link:** [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

## **GitLens — Git supercharged**

This extension is helpful for git users. This extension helps you to see the author of the code in your code editor by hovering over the line.

![GitLens Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4srj5h4enj41xcvnet3.png)

**Marketplace Link:** [GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

## **Code Spell Checker**

This extension checks your code for any wrong spelling including comments, variables, functions, etc.

![Code Spell Checker Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/evytiayhh02t9655aldi.png)

**Marketplace Link:** [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)

## Vim

I know we're talking about VS Code. But let's be fair, vim motions increase your moving speed. And you can get the vim motions in your VS Code with this extension.

![Vim](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vxw8dqniea9i5gspcoya.png)

**Marketplace Link:** [Vim](https://marketplace.visualstudio.com/items?itemName=vscodevim.vim)

## **Multiple cursor case preserve**

Many times we want to select the text by pressing `CTRL + D` or `CMD + D` (in Mac) and try to edit it. But the problem we get is, that it changes to the exact case we type in and doesn't match the previous case. So, this extension solves that problem.

![Multiple cursor case preserve Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cm2axxy9b9rafjczak36.png)

**Marketplace Link:** [Multiple cursor case preserve](https://marketplace.visualstudio.com/items?itemName=Cardinal90.multi-cursor-case-preserve)

## **indent-rainbow**

This extension makes reading the code in segments easier by colorizing the indentation in front of the text, alternating four different colors on each step.

![indent-rainbow Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xn7avuay55qz833h80ax.png)

Marketplace Link: [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)

## **Tailwind CSS IntelliSense**

If you work with Tailwind CSS, this extension auto-completes the class names before you even type them.

![Tailwind CSS InteliSense](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zj4wesmt6xkaa2ns2q7r.png)

**Marketplace Link:** [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)

## **Import Cost**

This extension displays inline in the editor the size of the imported package. The extension utilizes webpack to detect the imported size.

![Import Cost Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9egxsgxden6v10hvt3hw.png)

**Marketplace Link:** [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)

## Conclusion

VS Code is a very good code editor we use for everything. In this article we see some awesome extensions however there are a lot of extensions to explore. With the extensions VS Code becomes even more powerful.

Thanks for reading and happy coding!