VSCode Extensions Every Web Developer Needs

Simon Somlai

Published in

WeAreIDA

8 min readOct 2, 2018

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 web developer, you’re in luck today!

I’m going to be talking about some of my favourite extensions for my code editor. This way you can significantly reduce the amount of time you need to complete a task.

Which is pretty damn awesome..

Note that I’m a big fan of using VSCode (based on the atom editor), 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 should burn in hell 🔥😏

— — — — — — — — — — — — — — — — — — — — -

Code Beautifier

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

Tss…

These mere mortals disappoint me. 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? 😕

Well, too late for that! But here’s 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 makes mistakes 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 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 and so-forth.

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

Just like magic ✨

It’s quick, easy and makes a lot of sense for people doing a lot of html/css/jsx typing.

And unless you’re some old C# god, coding embedded software for printers in a dusty basement, that should be you!

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.

This extension allows you to write shorthand css and expand it when you press tab!

Select Part Of Word

Sometimes there are small parts of a camelCased or snake_cased 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 part of a word!

Who would have thought!

See for yourself;

Change Case

This extension 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

A color-highlighter and converter are 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 to your editor, 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 when I’m scrolling through files.

Because, you know.

A thicker cursor is what it’s all about 😏

Markdown Previewer

Markdown is ugly and that’s why no-one ever reads the README.md files of your project!

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!

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

I know the name sounds stupid but 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. It even allows you to do imports from npm!

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 last one might be exaggerated but my point is that there’s always a lot of in-progress crap lying around in your codebase.

That’s why you want to keep a list of active todo’s somewhere.

You could do that in JIRA/Confluence (honestly, every hipster does that these days). 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 stuff you still need to finish before you can start working on that fancy new feature.

Pretty nifty.

File 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 & Custom Snippets

These are some really cool ones I’ve only discovered recently.

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.

Either choose for complete file templates;