23 VSCode Extensions Every Web Developer Needs

These days, we're all looking for more efficiency in our daily workflow, no matter what kind of job we have.

Well, if you're a developer you're in luck today because I'm going to be talking about some of my favourite extensions/plugins for my code editor. This way you can significantly reduce the amount of effort you use to do your job. Which is pretty damn awesome.

Note that I'm a big fan of using VSCode (based on the atom editor) lately, so that will be my editor of choice for this article. But most of the plugins here can be found for any decent IDE/editor like atom, sublime, brackets, webstorm, ... .

Except vim.

Because vim sucks.

And people who use vim ~~will~~ should burn in hell.

;)

Code Beautifier

Apparently some people actually write ugly code and forget to indent their lines?

Tss..

Things like that never happen to me (nor do I ever have to do re-writes or refactors)! My code is always perfect.

*sarcasm*

Anyway this thing is a real lifesaver, it'll fix your css, html and javascript and make everything look pretty and indented.

What more could you want?

(Maybe some early opt-in bitcoins now? :/)

Anyway, here's the plugin working its fancy magic;

Auto Rename Tag

Another one that I use almost every day!

Basically what this thing does is find matching tags in your HTML/JSX and allows you to rename both ends at the same time.

Although it sometimes mistakes its target when you're nesting very deeply, it works as expected for at least 90% of the time.

Here's an example;

Bracket Pair Colorizer

Sometimes I find it difficult to see where a certain bracket ends and a new one starts.

Therefore this bracket colorizer basically matches up two brackets and gives them the same color. This allows you to quickly see where you should put your closing tags (and what kinds).

The colors look a bit funky in the beginning, but once you get used to it, you won't go back. new Promise().

Take a look at how this plugin works it colourful magic;

Atom One Dark Theme

There's a million themes available and then some.

Over the last couple of years I've always struggled to find the clearest, easy-on-the-eyes, high-contrast, dark coding theme.

But at last I've found it.

Hallelujah - The messiah has arrived.

The Atom One Dark color theme has everything I've been looking for. Just look at this react component;

It looks like a pretty decorated Christmas tree which allow you to quickly separate the different elements from each other.

Also ruby code looks dashing (and probably any other coding language for that matter);

Path Intellisense & Copy Relative Path

This plugin will autocomplete your paths as you're importing files or images & the other one allows you to copy a relative path from one file into the other, pretty straightforward but oh-so necessary when you're constantly importing files.

So take your pick.

Either autocompletion;

Or just copy the paths relatively;

Emmett

Emmet allows you to quickly type up html in a shorthand-form with classnames, ids, content, ... .

Then, when you press tab, it'll all expand the abbreviations into wonderful element trees.

It's quick, easy and makes a lot of sense if you're doing a lot of html/css/jsx typing.

And what kind of developer doesn't do this, these days?

SCSS Autocompletion

Who types border: 1px solid black, margin-left: 15px or background-color: #FFF fully right?

Retards, that's who.

bd+, tab;

ml15, tab;

bgc, tab, #fff;

Profit.

Select Part Of Word

Sometimes there's small parts of a camelCased word you want to edit, but you can't really get to it since the selector only handles full words. With this extension you can - wait for it - select a part of a word!

Who would have thought that!

See for yourself;

Change Case

Changes camelCase to snake_case to UPPERCASE to lowercase to CapitalizeCase to DAMN_Awesome_CASE.

That last one might have been made up :/ But who cares?

Change all the cases!

Colorize + Color Picker/Converter

Two standard tools that should be present in every developers' toolkit. With these nifty tools you can quickly see what kind of color/shade your hex/rgba value is and quickly convert it into any other color value.

Custom CSS/JS

Want to go wild?

Want to add an animated flying panda to your startup screen or spinning-loader-thingies because you're just 'cool like that'?

Go knock yourself out with some custom fancy schmancy css and js that fires on startup.

For example; I use a highlighter to see which folder is currently opened in my tree and which file is active. I've also added a thicker border for my cursor so it's easier to spot.

because, you know.

A thicker cursor is what all men want.

Markdown Previewer

Markdown is ugly and that's why no-one ever reads the README.md files!

Yes!

Maybe.

No :/

They are just plain boring.

But this will make them at least readable like a standard word processor file.

Hey, it's something ¯\_(ツ)_/¯.

Git Lens/Git Blame

Imagine this; Your intern messed stuff up again and you have to re-merge the develop branch with an older version.

Yet, the little punk is still arrogant about it and even blames you for the regressions.

God - the nerve that kid has!

Thanks to this cool plugin, we can now burn him!

Witch! burn the witch!

Oh blame.

blame the witch.

Not burn :/

No just kidding. Everybody makes mistakes. But at least now we can easily resolve the shouting matches and see who last touched which part of the code and revert to previous commits by simply comparing the differences in your editor.

awesomesauce;

SCSS Watchers & Live Server

Live servers & watchers allow you to type code and have it compile/reload on the fly.

For example you can have your scss files be live converted to auto-prefixed .css files and your HTML files be live-reloaded in the browser.

You can compare code watchers a bit to stalkers. But then the fun kind.

Wait wut?

Quokka

Quokka is an inline code evaluator for javascript. This allows you to draft some quick scripts for simple tutorials or evaluations without having to open your browser.

Now you can stay forever within the safe confinements of your VScode editor!

Hooray for safety!

Todo Highlighter & Todo parser

You know the back-end guys who keep watching cat video's and therefore never deliver on time which force you to mock server responses?

You remember that recent college graduate who wrote a 150-line function with 12 return statements AND named all his variables after spongebob characters?

Well, that's why you have to keep a list of active todo's somewhere. You could do this in JIRA (honestly, everybody does). But then again, for small fixes or notes you can always sprinkle in some reminders throughout your app with this cool plugin!

With the parser you can quickly list up the todo's and you'll get a nice overview of all the crap you still need to finish before you can start working on that fancy new feature. Pretty nifty.

You can even add some custom tag highlighting and add some custom coloring!

Fuchsia all the things!

VScode Icons

Because they're prettier.

Like A LOT prettier.

Wakatime

Coding is not fun if you can't brag about the ridiculous time you've been logging lately right? What fun is there if you can't compulsively remind everyone of how much time you spent working and how incredibly smart you are?

Or is that just me?

Anyway, with this plugin you can keep track of the time you're actually working vs spending in meetings/calls/design reviews and whatever useless crap keeps occupying your time (9gag, cat memes, ...).

Hooray for anally logging time!

File Templates

This is a really cool one I've only discovered recently. But it basically allows you to save any type of file, add a name to it and save it as a template to be re-used in the future. Pretty cool and saves you a lot of time manually copy-pasting stuff or having to retype certain parts of your code.

Admire its awesomeness;