Best VS Code Extensions You Can Use to Boost Your Productivity

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.

Marketplace Link: 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.

Marketplace Link: Error Lens

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.

Marketplace Link: Prettier - Code formatter

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.

Marketplace Link: GitLens — Git supercharged

Code Spell Checker

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

Marketplace Link: 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.

Marketplace Link: 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.

Marketplace Link: Multiple 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.

Marketplace Link: indent-rainbow

Tailwind CSS IntelliSense

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

Marketplace Link: Tailwind CSS IntelliSense

Import Cost

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

Marketplace Link: 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!