DEV Community

loading...
X-Team

14 VSCode Extensions That Will Improve Your Productivity

tdmoor profile image Thomas De Moor Originally published at x-team.com Updated on ・6 min read

2020 edit: this post now has an updated version with six more extensions. Go check it out!

Who's more productive: John, who writes 100 lines of terrible code in one hour, or Mary, who writes 20 lines of excellent code in one hour?

Most people would agree that John definitely isn't five times as productive as Mary. But how much more productive is he? In fact, is he even more productive than Mary at all?

The reason why it's difficult to determine whether one developer is more productive than the other has to do with quality. Productivity is notoriously hard to define for professions where quality of output matters.

The best definition of productivity I've found so far is getting the results you want with less time and effort. Although vague, it's a good starting point to understand how to get to where you want quicker and more easily.

A More Productive VSCode Environment

Extensions to your IDE are invaluable to speed up your work without reducing the quality of your output. Considering VSCode is the most popular IDE, here are 14 VSCode extensions that will make you a more productive developer.

Settings Sync

a gif of Settings Sync in action

Before you start installing extensions left and right, it's good to know of the existence of Settings Sync. It allows you to sync pretty much everything you customize on VSCode to Github, from settings to keyboard shortcuts to other VSCode extensions.

This way, you'll have access to your preferred IDE from whichever device you want to program on, instead of having to program from a vanilla VSCode environment on new devices, or having to manually set up everything again.

Live Server

A gif of Live Server in action

This is one of my favorite extensions. Live Server launches a local development server with a live reload feature both for static and dynamic pages.

Every time you save your code, you'll instantly see the changes reflected in the browser. You'll be much faster at spotting errors and it's much easier to do some quick experiments with your code.

Bracket Pair Colorizer

Bracket Pair Colorizer in action

The clue's in the title, but Bracket Pair Colorizer gives the opening and closing brackets matching colors, making it much easier to know which brackets belong together.

Custom bracket characters can also be configured, and you can add a background color to the active scope too.

Auto Rename Tag

a gif of Auto Rename Tag in action

While VSCode inherently highlights matching tags and immediately adds closing tags whenever you type an opening tag, Auto Rename Tag automatically renames tags that you change.

The extension works for HTML, XML, PHP, and JavaScript, and removes the need to change your tag names twice.

edit: a few people in the comments have mentioned that Auto Rename Tag is quite buggy, so proceed with care.

CSS Peek

a gif of CSS Peek in action

This extension is invaluable for front-end developers. Inspired by a similar feature in the IDE Brackets, CSS Peek allows you to extend your HTML and ejs file to show CSS/SCSS/LESS code within the source code.

It also allows you to quickly jump to the right CSS code if you know the class or ID name.

JavaScript (ES6) Code Snippets

a screenshot of JS Code Snippets

While VSCode includes built-in JS IntelliSense, JS Code Snippets enhances that experience by adding a slew of import/export triggers, class helpers, and method triggers.

The extension supports JS, TypeScript, JS React, TS React, HTML, and Vue. In the VSCode Marketplace, code snippets for other flavors, such as Angular, are also readily available.

Code Spell Checker

a gif of Code Spell Checker in action

Although it isn't life-threateningly important, I prefer my code to have no spelling errors. Code Spell Checker underlines words that it doesn't recognize in its dictionary files.

The extension is available in many different languages and supports jargon such as medical terms.

Debugger for Chrome

a gif of Debugger for Chrome

Developed by Microsoft, Debugger for Chrome allows you to debug your JS code in VSCode. Contrary to debuggers in other IDEs, it's surprisingly smooth.

You can set breakpoints, step your way through the code, debug scripts added dynamically, and more.

Icon Fonts

a gif of Icon Fonts in action

Icon Fonts offers snippets for a variety of icon fonts, including the popular Font Awesome v5 icon pack.

For those of you not using VSCode, this package is also available for Atom and Sublime Text.

TODO Highlight

a screenshot of TODO Highlight

I confess. I've been guilty of writing TODOs in my comments to then totally forget about them. TODO Highlight makes them stand out much more.

You can toggle the highlights and can also list all the highlighted annotations and reveal them from the corresponding file.

vscode-icons

a gif of vscode-icons in actions

You wouldn't think icons make a big difference, but they really do (for me, at least). VSCode-icons adds a splash of color and cute little icons to your IDE that I've come to love.

Regex Previewer

a gif of Regex Previewer in action

Regular expressions can be quite the puzzle to get right. Regex Previewer gives you a side document that matches your regex.

The extension gives multiple examples to match, so it becomes much easier to quickly and accurately write a regex for a variety of use cases.

Bookmarks

Bookmarks in action

Although VSCode has line numbers, Bookmarks allows you to add bookmarks to your code, helping you quickly navigate and easily jump back and forth.

Additionally, it allows you to select regions of code between bookmarked code, which is quite useful for something like log file analysis.

Git History

Git History in action

Git History is a VSCode extension that gives a visual of the git log. No longer should you look through git log in the terminal.

The extension is quite comprehensive. It allows you to compare branches, commits, and files across commits. You can also look up Github avatars, which is quite neat.

--

These were 14 VSCode extensions that help improve programming productivity without impinging on quality. What are your preferred extensions? Let me know in the comments below 👇!

Discussion (31)

Collapse
lobo_tuerto profile image
Víctor Adrián

I think you are missing a couple of really good ones, as far as general purpose extensions are concerned:

Collapse
alexandreamadocastro profile image
Alexandre Amado de Castro

+1 to gitlens, awesome plug-in.

Collapse
saratheneale profile image
Sara Neale

I just tried Peacock and I'm into it! I like the surprise me setting. Thanks!

Collapse
tdmoor profile image
Thomas De Moor Author

Good ones! I've included them in my updated version here: x-team.com/blog/best-vscode-extens...

Collapse
sarneeh profile image
Jakub Sarnowski

Auto Rename Tags has a massive amount of bugs which makes this extension unusable. At least that was my experience :)

Collapse
tdmoor profile image
Thomas De Moor Author

I've added a little edit underneath Auto Rename Tags about its bugs. Thank you for mentioning it!

Collapse
matthias profile image
Matthias 🤖 • Edited

I prefer GitGraph over GitHistory. I just like the design better, both extensions are fantastic and doing what they are supposed to do.

Collapse
ppezaris profile image
ppezaris

Great list! I'll second the comment that GitLens is an awesome plugin to consider, and if you are interested in increasing team productivity (in addition to personal productivity) then one to consider is CodeStream (disclaimer, I'm the author).

Collapse
arilength profile image
ari.length

Thank you very much settings sync, life server and bookmarks are pure gold.
I prefer nearest icons extension to icon fonts because we can see directly the font awesome icons we are looking for. Regex Previewer seems really convenient but I can't make it work. Anyway Thank for this great post !

Collapse
nicoespeon profile image
Nicolas Carlo

Hey, thank you Thomas for sharing these!

"Bracket Pair Colorizer" & "Bookmarks" are probably the two from the list that I can't work without anymore 😁

You made me discover "Regex Previewer", it looks very useful. It could definitely save me time from going to regex101.com to check RegExp magic.

I'd also like to suggest people to try an automated refactoring extension. These can save you precious time and make you more productive working with existing code.

If your language is JS / TS, you can have a look to:

Again, thank you for sharing and have a nice day!

Collapse
tdmoor profile image
Thomas De Moor Author

Happy you found a new useful extension! And both automated refactoring extensions look useful. Thanks for sharing.

Collapse
tarifa10 profile image
tarifa-man

Thomas - wow this is outstanding. - , great and overwhelming - i appreciate your text it is very very good .
i am happy to read your text - i like it very much. Can you give us more hints to run VSCode or VSCodium on mx-linux:

cf : I use VSCode daily and it is widely used, i am shocked it is not in stable repo. Please add VSCode to the package list. please - see more here: forum.mxlinux.org/viewtopic.php?f=...
you are invited to add your ideas to the thread.

dear Thomas- well we look forward to hear form you -regards tarifa

Collapse
sinepel profile image
Constantin Boulanger

Hello!
Thank you for sharing!

I've created myself an article where I share my favourite extensions for VSCode !

Here : My favourite extensions for Visual Studio Code

Collapse
boobo94 profile image
Bogdan Alexandru Militaru

Nice article Thomas! I created a similar article, maybe you can take a look on it here boobo94.xyz/tips/vscode-setup-for-...

Collapse
alo profile image
Álvaro A. Quirós López

Good one's. Let me add "Turbo Console Log" marketplace.visualstudio.com/items...

Collapse
tdmoor profile image
Thomas De Moor Author

Good one. I've added that one in the updated version of this article: x-team.com/blog/best-vscode-extens...

Collapse
wrldwzrd89 profile image
Eric Ahnell

Most of these don't help non-web programmers, but there are some great general-purpose extensions here too!

Collapse
tdmoor profile image
Thomas De Moor Author

Yes, that's a good point. Any general-purpose ones you could recommend?

Collapse
wrldwzrd89 profile image
Eric Ahnell

Visual Studio Code is tertiary among IDEs I use - Eclipse and Visual Studio (Enterprise) get used WAY more - so I haven't invested enough in extensions to recommend any!

Collapse
martinakuzniecowa profile image
martinakuzniecowa

thanks for Bracket Pair Colorizer

Collapse
dzienisz profile image
Kamil Dzieniszewski

Auto Rename Tag is buggy as hell!

Collapse
tdmoor profile image
Thomas De Moor Author

I've added a little edit underneath Auto Rename Tags about its bugs. Thank you for mentioning it!

Collapse
dzienisz profile image
Kamil Dzieniszewski

this should be integrated with VSCode :(

Collapse
damilare1 profile image
Adedoyin Damilare

Regex Previewer seems like an awesome tool. Can't wait to start using it.

Thanks a lot for this Thomas!

Collapse
ankit199 profile image
Collapse
tammalee profile image
Tammy Lee

Wow! These are all great suggestions!
Thanks so much, Thomas!

Collapse
shushpan profile image
Collapse
solafakhaled profile image
Solafa khaled

Thank you for sharing this

Collapse
filisha12 profile image
Filisha

What about increased productivity due to collaboration to the left of the dev process? Would you consider that a productivity enhancer? Like say using Live Share (aka.ms/vsls)

Collapse
tdmoor profile image
Thomas De Moor Author

That's a good question. I'd say that you're likely going to be a little bit slower when working together with other people, but you're likely to end up with a better end product.

It's basically what this proverb says: "When you want to go fast, go alone. When you want to go far, go together."

Forem Open with the Forem app