VS code extensions that supercharge your productivity

In this article, I’ll cover 12 extensions that can supercharge your productivity. And I’ll divide them into 4 categories:

1. General software development
2. Frontend development
3. Team productivity
4. Documentation

So, let’s begin

For general software development

The extensions in this section benefits all kinds of developers, regardless of your stack or preferences.

Prettier


A formatting tool that for organizing your code to a more standard look.


Turbo Console log


Generate quick and usable console.log statements to make debugging easier.


Indent-rainbow


This extension colors your indented blocks to make your indentations much easier to read.


Bookmarks


With this tool, you can mark lines in your code and jump to it whenever.


For frontend development

This section is for extensions that benefits frontend developers. Frontend developers can also benefit from extensions in the previous section too.

CSS Peek


With this extension, you can take a look at which styles are attached to HTML elements through its id or class strings.

Auto rename tag


With this extension, it will auto rename an HTML element’s end tag as you’re changing its start tag, and vice versa.


Live server


With this extension you can launch a live server for the project folder you’re working on.


For team developments

The extensions in this section mainly benefit people developing in teams. Not to say that only teams can benefit from these extensions. Even individual developers can benefit from them too.

Git History


With this extension, you can have a look at your project’s commit history in a more graphically intuitive way.


GitLens


With this extension, you can see who wrote what line and why in directly in your code editor.

For code documentations

The extensions here benefits technical writers with their work, and developers with commenting and documenting their code.

Code spell checker


This extension checks your code and your comments for spelling mistakes and errors.

You can also get this extension in multiple languages:



Code Snap


With this extension, you can take screenshots of your code.

Better comments


This extension highlights different type of comments you make in your code with different colors so you can tell which type of comment it is at a glance.


Conclusion

Extensions are a great way to extend the functionality of VS code. And developers have already made thousands (if not millions) of extensions that you would find really useful.

In this article, I compiled a list of some of them and give links to where they are in the VS code market place. I hope you now have a more productive time coding.