Almost all developers who use VS Code take advantage of some of the extensions because they’re incredibly practical and easy to use. If you’re just starting, take time to learn about the extensions in VS Code and how they can improve your work process.  

So, without further delay, here are my favorite ones! 

1. ESLint 

ESLint is a great addition to any JavaScript project. It allows teams to agree on code-formatting rules from the start, making the code review smoother, and easing the onboarding of new members. All in all, it’s a functional and user-friendly tool, especially for the following rules that I like to apply: 

• curly (Enforce consistent brace style for all control statements) 
• padding-line-between-statements (This rule requires or disallows blank lines between the given two kinds of statements. Proper blank lines help developers to understand the code) 
• simple-import-sort (Easy auto fixable import sorting) 
• no-restricted-imports (Disallows specified modules when loaded by import) 

2. GitLens 

VSCode is great for basic git operations such as adding, committing, pushing and creating new branches. However, if you want to enhance your productivity with more advanced features, then the GitLens extension should be your go-to choice for a supercharged git workflow. 

GitLens makes git straightforward & easy to use with a user-friendly GUI. It even offers features that you may not have been aware of – making it indispensable for anyone working with git. I’d go as far as to say it does almost everything you could think of! 

Some of my favorite features include: 

• Current line blame. When your cursor is placed on a particular line, you can easily identify the person who last modified it. This allows for greater tracking of changes and makes collaboration a breeze. 
• Commits view. Installing this extension provides you with an easily accessible menu for quick actions in your side menu. Out of all the options available in its sidebar menu, such as repositories, file history, line history, etc., my most used feature is the commits view. The current branch commits log reveals many features, such as the ability to delve into altered files in the commit and browse the associated PRs. This is incredibly useful for keeping up with the project progress. 
• Go through the last revisions with a quick top-right toolbar. This extension provides an effortless way to switch between the older revisions of a selected file with a toolbar in the upper right corner. It’s an amazing way to quickly compare your changes and jump back and forth between different file versions. 

3. Prettier 

Writing code is an art form, and having an opinionated code formatter can help developers express their creativity in a consistent, organized way. The right code formatter can save time and energy while ensuring a high quality of coding standards. With support for many languages, integration with most editors, and various options, an opinionated code formatter can help developers create well-structured code quickly and efficiently. 

4. Gremlins Tracker  

This Visual Studio Code Extension helps you identify any unsafe characters as some of them may be invisible or look like regular characters. This can be dangerous, so this extension gives you peace of mind that anything you type in is secure. 

5. LiveShare 

LiveShare makes it easier to work with your colleagues on the same codebase in no time. It doesn’t ask you to synchronize code or configure the same development tools, settings, and environment, thus simplifying the collaboration process. 

6. Color Highlight 

Colorize makes creating any color palette a breeze. The application quickly & vividly displays the exact colors of each variable by highlighting them with their respective hex codes or names – saving you a lot of time & effort. 

7. CSS peek 

If you are a web developer who finds it tedious to switch between HTML & CSS files all the time, you should definitely take a look at CSS Peek. It allows you to preview your CSS without having to leave the HTML file open, making things much easier! 

8. Material Icon Theme 

I’m passionate about creating visually appealing applications – it’s part of my job as a front-end developer, and I like when my work environment looks good, as well. The Material Icon Theme is an all-time classic among the other icon themes in VS Code. No wonder it’s become one of the most popular downloads; it has icons for all scenarios – even those which are not related to programming languages. 

9. SVG Preview 

VS Code is great for checking out your .svg files, but if you want a preview of the image itself, then SVG Preview is a must-have. It even opens an additional side window that gives you a live updated preview based on any changes you make to the code. 

10. TODO Highlights 

The TODO Highlight extension for VS Code is quite beneficial for software developers because it lets them add visual cues to their code, like the NOTE, TODO, DEBUG and HACK highlights. What’s more, it has detailed customization options so that developers can achieve the desired look & feel of the code interface. 

The Final Word 

I’m almost completely dependent on the VS code extensions described above – they make me feel like I have superpowers! But, on the other hand, it’s them who are the real heroes here, not me, since they hold my hand as I code.  

To sum up, I hope this overview will make you see VS Code extensions in a new light and regularly use them in your daily work.  

About Author

Aleksandar Beronja is a frontend-based software engineer with extensive expertise in engineering and sports. He proficiently speaks React, Angular, and React Native. Immersed in code-writing for visually stunning and unique solutions, Aleksandar is one of the brightest MVPs in BrightMarbles.