Best VSCode Extensions For Developers

Why Developer Productivity Matters

Developers must frequently balance their time between two or more team responsibilities. It’s not uncommon to get into a flow, be interrupted by a meeting, be followed by someone personally contacting you on Slack about some old code you worked on, and then return to sprint work. We’re expected to swap contexts frequently and close tickets before the conclusion of each sprint.

Managing all of these different contexts is difficult!

Because of that difficulty, you can easily see the benefits of becoming more productive with the time you have. Increasing your individual output can make a large impact on your sprint work without spending extra hours working. Plus higher impact also leads to higher performance, which generally leads to higher pay, right? 

Higher pay and higher impact are exactly why you should be interested in being productive with your time.

The Best VS Code Extensions

An IDE is one of the most useful productivity tools in a web developer’s arsenal. Syntax highlighting, easy searching, IntelliSense, file icons, and so much more are all available with this fantastic tool.

There are many to choose from, but without a doubt, Visual Studio Code has become one of the most popular. It’s jam-packed with useful features and out-of-the-box niceties that make our dev life easier. Additionally, one can browse through the open-source extensions created by the community that helps fill the gap in productivity needs; but, it can quickly become difficult to choose the ones that will be most helpful due to the sheer number of choices.

In other words, a paradox of choice occurs! 

At least, that’s exactly what happened to me when I switched from Sublime to VS Code. That’s where I hope to help! I’ve curated a list of what I believe are the best VSCode extensions to improve your productivity.

Configuration

1. NPM

This NPM extension lets you easily run scripts defined in package.json (or common npm commands) and validates the versions of packages against the package.json versions.

2. Peacock

It’s common for web devs to open multiple windows of VS Code as we work on multiple repos at the same time. For example, one for the backend code and one for our front end. The Peacock extension adds colour to the different project windows, so devs can quickly identify which repo they are working on.

peacock 1

3. Settings Sync

When using Visual Studio Code across multiple machines, it can be frustrating downloading your extensions and reconfiguring all of your settings every single time (and other parts of vs code like snippets). Thanks to Settings Sync you no longer have to!

This extension saves everything via GitHub, once you set up the extension, you can upload any new changes on one machine which will be downloaded on another machine once you open visual studio code again, keeping your settings in sync.

4. Project Manager

The Project Manager extension grants you the ability to favourite projects, giving you easy access to quickly open them again. Additionally, you can specify folders it scans for git repos to automatically add them to the “Git” tab. The time spent clicking File -> Open…finding the folder, and then finally opening the project can add up. Project manager removes that workflow.

project manager

5. Profile Switcher

Do you use your VS Code app for various development reasons like creating hot tip tutorials, developing your portfolio site, or switching between tech stacks often? Profile switcher allows you to create different profiles that save specific extensions, like one for React and one for Angular, so you only have to change your configurations for each tech stack once.

profile-switcher 1

6. Vs Code icons

Identifying file types in the file explorer within VS Code makes finding files a breeze. There are many different icon packs, but VS Code Icons is a favorite of many.

icons

7. SonarLint

Does your dev team use SonarQube and wait for PR comments or analysis to report issues? With SonarLint error reports are in your IDE, so you can fix them in real-time before any builds fail.

sonar lint

8. ESLint

For projects that use ES Linter for static code analysis, keeping code consistent and clean based on the rules configured, the ESLint extension integrates those rules into the IDE. This will let you fix them as you code, seeing issues within the files you’re working on instead of waiting for the command line script to tell you.

eslint

9. Better Comments

Writing comments for TODOs or the reason behind the way a specific piece of code was written can really help a codebase over time. Many people work on a codebase and many decisions are made. This extension helps to document why those decisions were made.

The Better Comments extension is even colour-coded so that the context around comments is clear and identifiable.

better comments

10. Stylelint

It’s like ESLint, but for CSS. Stylelint statically analyzes your CSS for common mistakes based on team configured rules. This extension integrates linting into your IDE, which makes fixing them in real-time easy.

stylelint

11. Indent Rainbow

We can easily match semi-colons or determine where specific blocks of code are within the content of our code thanks to the Indent Rainbow extension. It creates different colors for each level of indentation, keeping it nice and visible for us as we code.

rainbow indent

12. Prettier

Creating consistent code formatting throughout a large codebase can be tough. Each dev has varying opinions on what format makes code the most readable, which can lead to disagreements within pull request discussions during code reviews. Prettier was created as a means of alleviating this challenge on a team because its opinionated code formatter decides for you with a very minimum amount of configuration options.

Once you have Prettier installed in a project, along with its configuration, installing the Prettier extension integrates that formatting throughout your dev process. Whether you prefer automatic formatting on save or while typing, this extension saves tons of time and even integrates with your ESLint rules. 

prettier formatter

13. Colorize

This simple CSS extension highlights the text to the defined color when writing styles, no longer requiring a quick page refresh to test out a new colour.

colorize

14. CSS Peek

While we create new classes or use new React components, VS code gives you the option to cmd + click on code to navigate to its folder or see a preview. CSS Peek is all about giving you that same option when clicking on class names (see how I clicked on an intro card below).

css peek

15. Live Share Extension

This extension makes pair programming or sharing code with a wider audience as you make changes SO MUCH EASIER. I absolutely love the Live Share extension, especially as it has removed the need for trying to explain which file I’m in, which line I’m currently looking at, and describing what code changes to make during a pair programming session.

Take advantage of this extension as others can follow your cursor, you can follow theirs, which turns your VS Code into Google Docs editing with coworkers!

There are so many features within this extension that it’s hard to show you visually. So check out the documentation and read it through for yourself.

16. Polacode

Polacode creates beautiful pictures of copy and pasted code snippets, so you can easily share and show others. Easy to use with easy-to-see outcomes!

polacode

17. Turbo Console Log

If you are a console log dev, you know those who use console logs instead of debugger statements. You are in luck because with this extension you can highlight a variable, use a hotkey, and set up your logger statements! Head over to this extension to see how it works.

18. Explorer Exclude

Repositories for web development applications can become quite unwieldy over time. Many libraries we use these days require a dot config file to set up or include local development directories we barely ever modify like environment configuration files.

The challenge for devs is finding specific files. It can be irritating when we can’t find exactly what we’re looking for via search in a huge directory of files. One of my favorite extensions solves this nicely for us by letting us configure “hidden items” from the main file browser, resulting in a decluttered list in VS Code.

explorer exclude

19. GitLens

Anyone using Git within their projects benefits immensely from having GitLens as an extension within VS Code. This feature-rich extension for managing git is absolutely amazing! Need to know who last changed the currently selected line within your editor? GitLens will show you that. Need to know the history of a specific file based on commits? GitLens can show you that too! These two features are the tip of the huge iceberg of other improvements one has once you have it installed.

Look over at the documentation on its extension page for grokking all of the features and you won’t regret it!

git lens

Phew, there are quite a lot of extensions in the marketplace, and choosing some of the best is not an easy task. Everyone has their own workflow, and there are adjustments to be made when introducing these extensions into your own day-to-day.

What I don’t want you to do is install all of these extensions at once then never actually use them. Here’s a better way to approach this list:

  1. Each Monday install a new extension
  2. Set it up in your workflow
  3. Try to use it until it becomes a habit, something that is part of your workflow without needing to remind yourself of using it
  4. Repeat with the next extension!

Becoming more productive is like developing in your career — you can’t do it all at once. It takes time, experience, and effort. It takes mistakes and lessons. So focus more on the journey and less on the result. As your productivity gradually increases, soon the results will follow.

Leave a Comment