DEV Community

Cover image for 20 VS Code Extensions You'll Actually Use
Al Romano
Al Romano

Posted on • Updated on

20 VS Code Extensions You'll Actually Use

I've noticed several VS Code extension posts and have been thoroughly disappointed with the mentioned extensions with the exception of a couple so I thought I'd compile my list of plugins that I personally use.

I think these are helpful for any primarily front-end developer who wants to get the most out of using Visual Studio Code. Some of these you'll already have - as they're the most recommended extensions on the platform - but others you may not.

Easy to Read

  • Beautify - Makes HTML, CSS and JS very easy to read by de-minifying and properly spacing your horrendous markup.

  • Better Comments - Create more human-friendly comments in your code. I use this all. the. time. It's a mandatory extension for our dev team.

  • Bookmarks - It helps you to navigate in your code, moving between important positions easily and quickly. I use this in conjunction with MetaGo to be almost mouse-free while coding.

  • MetaGO - Wicked fast cursor movement/selection for a focus on keyboard usage. This changed how I use VS Code forever. Seriously.

  • Log File Highlighter - Just as it sounds, gives VSCode .log file support so you can actually read those log dumps without your eyes bleeding.

  • Guides - Now you don't have to collapse and open all your freaking elements to figure out nesting. This works really great with Beautify mentioned above and Rainbow Brackets, below.

  • Rainbow Brackets - Highlights the current bracket-set you're in and colours the rest differently for very easy location identification. If you're a heavy JS developer this is a great extension.

  • Image Preview - Shows an image preview in the gutter and on hover. So key for checking if I just referenced the correct image/icon.

  • GitLens - One of the most used extensions for sure; Gitlens is a must have for VS Code and just makes the Git experience so much better all around. Pair this with the .gitignore and .diff extensions for good coverage.

Faster Coding

  • CSS Peek - Inspired by a similar feature in Brackets called CSS Inline Editors. One of my favourite Brackets features now in VS Code.

  • stylelint - We lint our JS, so why not our LESS/SASS/CSS too? Great for quickly cleaning up sloppy CSS.

  • Live Sass Compiler - Sure, you got Gulp, Webpack, NPM, Grunt but sometimes you want to compile/transpile your SASS/SCSS files to CSS files in realtime with live browser reload. This does just that.

  • Live Server - Best local development Server with live reload feature for static & dynamic pages (even PHP!).

  • Version Lens - Update dependencies/devDependencies to latest version for specified package.json. Recommended by: Mihail

  • DotENV - Adds support and highlighting for .env files - something I rely on heavily pushing to Heroku, Netlify, etc...

Pretty Screenshots

  • Polacode - Highlight code, snap a really nice screenshot with your code theme's colours. Great for tutorials or documentation and you want to provide code examples.

Multiple Instances

  • Settings Sync - Uses a private gist to save a setting file so you can sync Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions between multiple VS Code instances. I use this to keep my Laptop, Work Desktop and Home Desktop all in sync with two simple commands.

  • EditorConfig - Override user/workspace settings with settings found in .editorconfig files. I use this to enforce specific rules for the development team on a per-project basis.

So there you have it, while I have lots of other plugins more specific to the environments I use (Front-End Web + Azure Cloud) hopefully you'll find these extensions useful in your daily use of VS Code!

Let me know if you already use them and if you love or hate them. Or, some extensions I might have missed and should try out!

Noteworthy Mentions

After getting some feedback in the comments of you guys showing me some of your favourite VS Code extensions here are some new ones that I think are solid enough to also include:

Top comments (47)

Collapse
 
jefrypozo profile image
Jefry Pozo

Some other useful extensions are

ESLint: For linting your javascript code,
Serverless: For working with serverless projects(Azure, AWS, GCP),
Serverless-Offline: For testing a serverless project on your localhost
Material Theme & Material Icon Theme: Beatiful theme and icons
Window Colors: Gives every VSCode window a diferente window color

Collapse
 
vip3rousmango profile image
Al Romano

Hey Jefry,

Big fan of Material Theme & Icons but, recenetly switched it up to Code Blue.

I have ESLint but some like JSHint instead, or other linters, so I left it out.

Windows Colours looks helpful as well - will need to check that out!

Collapse
 
bhanu1776 profile image
Bhanu Sunka

I found one really cool vscode theme named Jellyfish-x-retro theme.. Do checkout! πŸš€πŸš€

Collapse
 
lardissone profile image
Leandro Ardissone

Serverless-offline is an extension? Haven't found it in the marketplace.

Collapse
 
jefrypozo profile image
Jefry Pozo

My bad. It is an NPM package, serverless is a NPM package too.

Collapse
 
qm3ster profile image
Mihail Malo

Is Rainbow Brackets superior to Bracket Pair Colorizer 2?
NPM Dependency seems vastly inferior to Version Lens, which in addition to better UI even supports a few other repositories like dotNET core.
Will be looking into Better Comments.
And Prettier > Beautify.
The code plugin beautifully integrates with the same config your git hooks can use, and generally has better and more deterministic formatting.

Collapse
 
vip3rousmango profile image
Al Romano • Edited

Hey Mihail,

I haven't specifically tried BPC-2 but it appears to do the same thing - the only difference I can tell is that Rainbow will highlight in red the isolated right bracket so you always know where you currently are inside any set of coloured brackets. That being said I'm giving BPC-2 a try right now!

Didn't even know of Version Lens - you're right it's way better. Updating list.

I had Prettier for a while but out of the box, it couldn't handle HTML markup inside .js/.ejs template files and was driving me crazy - Beautify gives an option to treat unknown markup as "HTML, CSS, JS" regardless of file ending from a Prompt dropdown.

Collapse
 
qm3ster profile image
Mihail Malo • Edited

What is "HTML markup in .js files"?
It does script/css in html, jsx inside js, and any language it supports as a tagged code block inside markdown by default.
If your file IS valid HTML, but also contains for example moustache tags in the text node positions, you can set a configuration override for your extension of the parser option.

Edit: I looked up what ejs is, and there is, indeed, no support. Does your plugin beautify it by parsing it as pure HTML?

Thread Thread
 
vip3rousmango profile image
Al Romano

Hey Mihail,

That's correct when Beautify hits markup it wasn't expecting (like HTML inside a .js/.ejs file as EJS templating can handle this) it lets you pick how to handle it. Very nifty.

Collapse
 
austinstanding profile image
Austin Standing

I love Bracket Pair Colorizer! I just discovered 2 today, making the switch now. For what it's worth, the marketplace shows Rainbow Brackets hasn't been updated since 2016, meanwhile Bracket Pair Colorizer 2 was updated just yesterday. That being said, it still has the beta label, so take that for what it's worth.

Collapse
 
miku86 profile image
miku86

I add:

  • Auto Close Tag
  • Auto Import
  • Auto Rename Tag
  • Code Runner
  • ES7 React/Redux/GraphQL
  • Import Cost
  • indent-rainbow (colorized stripes for indentation!)
  • npm Intellisense
  • path Intellisense
Collapse
 
vip3rousmango profile image
Al Romano

All great additions, I also have npm/path intellisense but not everyone uses NPM so I decided not to add it.

Never headr of indent-rainbow that I'll have to check out for sure!

I used to have Auto Close Tag but I found it rather annoying when doing templating partials.

If you think of others I'll check 'em out!

Collapse
 
jarvars profile image
Jorge Reyes

Settings Sync my fav

Collapse
 
vip3rousmango profile image
Al Romano

It's a great extension. So simple, but I totally take it for granted when I don't have it and need to re-install everything from memory. :(

Collapse
 
jarvars profile image
Jorge Reyes

I have automated the installation in windows with boxstarter + choco and later I use code CLI for extensions.

Collapse
 
littlebee profile image
Bee Wilkerson

Great suggestions, use some of these many times a day! If you do a follow up story for 2020, please consider this new extension: marketplace.visualstudio.com/items...

Collapse
 
vip3rousmango profile image
Al Romano

Whoa this looks awesome! Will check it out and see if it makes the cut for my 2020 post. ;)

Collapse
 
cirphrank profile image
🎧CirphrankπŸ‘£

Faster Coding
'1' - you wrote "CSS Peak" instead of *CSS Peek.

Great article sir.

Collapse
 
vip3rousmango profile image
Al Romano

Nice catch! That I did... corrected!

Collapse
 
k88manish profile image
Manish Kumar

Prettier should be on the list as well

Collapse
 
vip3rousmango profile image
Al Romano

Hey Manish,

While I am also a big fan of Prettier, I can't personally recommend is as I had many headaches using it with some static site generators that use HTML markup inside .js/.ejs files. Beautfy has .ejs file support and can format HTML markup inside .js-based templating files.

Collapse
 
michaeljota profile image
Michael De Abreu

Al have you tried the latest version of Prettier?

Thread Thread
 
vip3rousmango profile image
Al Romano

No, but after seeing your comment I checked the changelog and it appears they have support for HTML template literals!

I'll give it another look if I can get my proper formatting inside .ejs files!

Collapse
 
weakish profile image
Jang Rush • Edited

Possible typos:

to collapse and open all you're freaking elements

your

One of my favourite Bracket features

Brackets

Collapse
 
vip3rousmango profile image
Al Romano

Corrected! Thanks.

Collapse
 
yuanhao profile image
YuanHao Chiang

For some reason I've been living under a rock and never heard about Better Comments. Awesome extension. Thanks for the tip! 🍺

Collapse
 
terabytetiger profile image
Tyler V. (he/him)

Thanks for the write up! Polacode looks super sweet! :D

Collapse
 
vip3rousmango profile image
Al Romano

No problem! Glad you enjoyed. Yeah, Polacode is great when I need to whip up some documentation and I like to provide code examples right from the project itself! Makes it super easy to do.