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!
Top comments (1)
Yea, I know, Neovim is better 🌟