DEV Community

What are your favorite VS Code extensions and why?

Brian Clark 💡 on September 17, 2019

Collapse
 
dzhavat profile image
Dzhavat Ushev • Edited
  • GitHub Pull Request - It helps me see how the changes fit with the rest of the code. And, of course, reviewing and managing PRs.
  • GitLens - There are so many good stuff about this extension! I especially like all the "meta" info added to each file like who made the last change, what it was, having a direct link to a commit, etc.
  • Project Manager - Helps me manage projects. I think VS Code has something similar build-in by now (or am I mistaken?) but never gave it a try. This extension is quite handy.
  • Prettier - Formats the code for me. There are cases where I don't like a particular formatting but it's fine 99% of the time.
  • TSLint - Helps me have a somewhat consistent and stupid-errors-free codebase.
  • Night Owl - The dark theme is the best.
  • Angular Snippets - Like it for all the snippets it provides, so I can quickly move to actually doing something productive.
  • CSS Flexbox Cheatsheet - Like it because it lets me open a flexbox cheatsheet on the side so I can look up properties and their values. (Disclosure: I built this extension).
Collapse
 
john_papa profile image
John Papa

Thanks for the Angular Snippets love!

Collapse
 
eamodio profile image
Eric Amodio

Thanks for the GitLens mention!

Collapse
 
dzhavat profile image
Dzhavat Ushev

Thank you for creating it. It's amazing!

Collapse
 
alefragnani profile image
Alessandro Fragnani

Thanks for the Project Manager mention!

Collapse
 
dzhavat profile image
Dzhavat Ushev

You're welcome. Thank you for making it. It's awesome! And welcome to dev.to :)

Collapse
 
clarkio profile image
Brian Clark 💡

Thanks for sharing this comprehensive list Dzhavat 👍 I had not heard of the Project Manager or CSS Flexbox Cheatsheet extensions before and am checking them out now.

Collapse
 
bradtaniguchi profile image
Brad

I have a few that I must have

  • prettier - it current has some funky issues formatting html, but besides that. ctrl+s = well formatted code.
  • gitlens - all your git needs in your UI. I only use it for "visual" tasks, good-ol terminal for all the other stuff.
  • Settings sync I have a lot of settings, extensions and use multiple machines (at least 3 most days) keeping my config the same when I change it on all machines is great
  • Synthwave '84 - I love the "80's neon grid" aesthetic. So much so I installed this as my first editor theme, its freaken awesome! 😎 (well at least to me it is haha)
Collapse
 
hearthing profile image
Zack

Synthwave x Fluoromachine is what I've been using. It takes the original idea and turns it up to 11.

I didn't know about Settings Sync until now. This is perfect for switching between my mac and pc. Cheers!

Collapse
 
clarkio profile image
Brian Clark 💡

All great! In particular Settings sync has been a huge help with jumping between machines. Thanks for sharing Brad 👍

Collapse
 
thomasrayner profile image
Thomas Rayner

Obviously Random Name Generator!

Just kidding, I wrote that one when I just wanted an excuse to get to know the VS Code API.

Here's a few I like:
Azure Pipelines
Azure Repos
Bracket Pair Colorizer 2
C#
Live Share
Peacock
PowerShell

I think they're all pretty straightforward for why I like them and how they're used. The only non-obvious thing, is that with the Azure Pipelines extension, you can change the language of a YAML build definition from YAML to Azure Pipelines and get some better intellisense.

Collapse
 
john_papa profile image
John Papa

Thanks for the Peacock love!

Collapse
 
thomasrayner profile image
Thomas Rayner

It's stopped me from "doing a dumb" more than a couple times!

Collapse
 
clarkio profile image
Brian Clark 💡

We have similar tastes I see 🙂. Definitely a good list of extensions Thomas and thanks for sharing them 👍

Collapse
 
shawnppence profile image
Shawn P Pence

GitLens - it allows me to quickly see history both for files and for individual lines within a file and quickly compare to see what changed without having to remember (or look up) git diff commands.

Collapse
 
clarkio profile image
Brian Clark 💡

Yessss. GitLens is fantastic. Thanks for sharing Shawn 👍

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski • Edited

The "Remote Development" Extension (pack). This is just amazing! I use it daily and I would cry like a little child when someone would take it away from me! This makes daily development so much easier! Just set up your remote env and from that point just open VS Code and everything is setup. Amazing!

I also published a post about my VS Code setup. There I talk about the other extensions I use.

Collapse
 
clarkio profile image
Brian Clark 💡

Lol well I don't think anyone is gonna take it away from you and I'm glad to hear it's been helpful. Thanks for sharing your input and for the post about your setup. It's always fun to see how other devs have everything configured 👍

Collapse
 
marceloalves profile image
Marcelo Alves 🐙 • Edited

Some of my current favorites:

  • Bracket Pair Colorizer 2 - Sometimes brackets like to get lost!
  • Peacock - Give those windows some color to tell projects apart
  • PolaCode - I don't use this one often but its always super useful when I need it
  • Toggle Quotes - Quickly toggle between quotes
  • Turbo Console Log - Throws in a console.log() with the code path in case you're like me and like to litter them all over the place
Collapse
 
clarkio profile image
Brian Clark 💡

Whoa Toggle Quotes is pretty neat! Thanks for sharing Marcelo 👍

Collapse
 
john_papa profile image
John Papa

Glad you like Peacock, thanks :)

Collapse
 
michaeljolley profile image
Michael Jolley

GitHub Pull Requests
Great for PR checkouts/reviews.

Remote Development Extension Pack
The only way I want to develop now. So much so that I wrote a talk about it.

Gist
Awesome extension for managing/editing your Gists.

Docker
Great for linting Dockerfiles & docker-compose files. Also gives nice insight to containers, images, networks and volumes on your machine.

Angular Snippets (Version 8)
Snippets that speed up my Angular work. Thank you @john_papa for the countless hours you've saved me with this one.

Bracket Pair Colorizer 2
Nice coloring of brackets to identify where you're at and what's closed.

Collapse
 
john_papa profile image
John Papa

Glad you like the Angular Snippets, thanks :)

Collapse
 
clarkio profile image
Brian Clark 💡

Nice Mike. Would've been surprised considering recent events if you hadn't included the Remote Development one. Good stuff and thanks for sharing 👍

Collapse
 
bradenwatkins profile image
Braden Watkins • Edited

My favorite language-agnostic extensions

Shameless plug: These are all grouped together into my language agnostic extension pack: Essentials

Collapse
 
bradenwatkins profile image
Braden Watkins

Others that I'm test driving, but I'm not sold on yet include:

  • Better Comments - Syntax highlighting for different kinds of comments
  • Gist - Create, open and edit gists
  • jumpy - Fast cursor movement based on a similar package in Atom
  • Partial Diff - Diff two bits of text right in VSCode
  • Peacock - Workspace organization
  • REST Client - HTTP REST Client right in VSCode
Collapse
 
clarkio profile image
Brian Clark 💡

This is a fantastic list. A bunch I had not heard of so thanks for sharing Braden 👍

Collapse
 
john_papa profile image
John Papa

Glad you like Peacock, thanks :)

Collapse
 
quintisimo profile image
Quintus Cardozo

Git Graph - Does exactly what it says
Git Lens - Git on steroids
Atlassin Bitbucket - issue tracking, code review, pull requests all inside the editor
Docker - Managing images and containers
VscodeVim - Good way to learn vim
Horizon Theme - My current theme

Collapse
 
clarkio profile image
Brian Clark 💡

That Git Graph shows some nice visualizations of my project's history and the Horizon theme looks nice too. Thanks for sharing Quintus 👍

Collapse
 
jarettlee profile image
Jarett Lee

Remote Development is a tool I use every day. It makes it so easy to work on server code.

VsCodeVim is great for people like me who love vim, but also want to use a more modern experience. I especially love how vim macros work in VS Code.

Collapse
 
clarkio profile image
Brian Clark 💡

I really need to take the time to learn Vim keyboard shortcuts. I'm very jealous and it's cool to hear the extension helps keep you moving with that skill. Thanks for sharing Jarett 👍

Collapse
 
andyli profile image
Andy Li

Haxe Support for Visual Studio Code has been in super high quality. It's maintained by some of the Haxe compiler developers and I've been seeing them adding features directly to the compiler for the VS code extension!

Collapse
 
clarkio profile image
Brian Clark 💡

Whoa that sent me down a fun rabbit hole. Had no idea what Haxe was before and it seems really cool. What kind of apps have you built with it?

Also thanks for sharing Andy 👍

Collapse
 
andyli profile image
Andy Li

Haxe mostly shines in the game dev area at the moment. You can find many great games in the haxe.org game use-case page.

I myself use Haxe for everything. My current startup Giffon 🎁 is written in Haxe (targeting JS/node). In the past when I was doing my PhD, I use the Haxe Python target for data analysis, and the Java target for writing an Android app.

It's not that using Haxe will let anyone know how to write website, do data analysis, or write native mobile apps instantly, but it's more of a tool to let me jump through all these areas without googling "how to find an element in an array in language X" all the time, and just focus on building the thing.

Collapse
 
maxbvrn profile image
Maxime Bouveron • Edited

Apart from the usual well-known ones (GitLens etc.)

  • ECMAScript Quotes Transformer - Lets you toggle between the three types of quotes. Perfect when binded to Ctrl/Cmd + '

  • Find-Jump - Press a key combination, start writing the characters you want to jump to, press the keys shown next to your jump target and tadam, you can easily go anywhere in your code without using your mouse, arrow keys or read 3 books about VIM keybindings.

Collapse
 
clarkio profile image
Brian Clark 💡

These are both quite interesting. Didn't realize there was so much toggling between quote types as @Marcelo Alves also shared something similar called Toggle Quotes. Maybe I need to dig into this more haha. Thanks for sharing Maxime 👍

Collapse
 
jeffhollan profile image
Jeff Hollan

Azure Functions!!! My less well known but super useful one is REST Client that lets you do Postman-like requests without leaving the editor.

Collapse
 
clarkio profile image
Brian Clark 💡 • Edited

Ooo yea that extension is super handy testing out API's. I love when I can stay in one context while developing. And yes of course the Azure Functions extension is great especially for that local debugging capability. Thanks for sharing Jeff 👍

Collapse
 
kelson448 profile image
Kelson448

"Prettier" is a must have for me, not having to deal with formatting code manually probably saves me several hours a week.

"Code spell checker" is another key extension, especially when writing user visible text.

"Indent Rainbow" and "Rainbow Brackets" are extremely useful for parsing complexly nested sections.

"Comment anchors" is a huge step up for those TODO comments we all leave. They are color coded, can be navigated directly to via an extension page, and show up on the scroll bar. I frequently use this to mark my path as I'm hunting for an elusive bug or building a complex feature.

Collapse
 
clarkio profile image
Brian Clark 💡

For sure Prettier has saved me a ton of time but there have also been times I've felt like I'm in battle with it haha.

I'm gonna check out the comment anchors as that sounds like a nice addition. Thanks for sharing 👍

Collapse
 
aaronpowell profile image
Aaron Powell

Can I shamelessly love my own extension, Profile Switcher, which is used to create profiles of settings & extensions to switch between.

Collapse
 
clarkio profile image
Brian Clark 💡

Of course you can and what a great extension it is! Thanks for sharing Aaron 👍

Collapse
 
karnak19 profile image
Basile
  • Prettier : Litterally must have for me since I discover it !
  • Rest Client : Being bored of Postman, you never need to get out of VSCode now :P
  • Material Icons Theme : Support nearly all extensions, also for folders, pretty neat
  • Simple React Snippets : Those ones are really what I needed for React development, coupled with React Hooks Snippets, it's awesome !
Collapse
 
clarkio profile image
Brian Clark 💡

Yes all great extensions and themes. Thanks for sharing Basile 👍

Collapse
 
misekjakub profile image
Jakub Míšek

PHP Tools for VS Code - first I'm developing it, second it is really fun to work on a complete editor integration and peek into developers needs and problems.

Collapse
 
john_papa profile image
John Papa

yes! i just did this in a project. i need to write about it

Collapse
 
cmstead profile image
Chris Stead

JS Refactor - automated refactorings for JS, TS, React, Vue, etc. I practically can't work without it anymore. 👍

Bracket Pair Colorizer - colors matching brackets and highlights the current captured area between the brackets. It really simplifies staying within the current scope.

Collapse
 
clarkio profile image
Brian Clark 💡

Love me some bracket pair colorizer and really need to look into that JS Refactor one. Thanks for sharing Chris 👍

Collapse
 
klvenky profile image
Venkatesh KL

Settings Sync
Nothing even comes close how useful this is for me.

These just follow settings sync 😉
Better Comments
Prettier
Eslint
Git history

Collapse
 
dzhavat profile image
Dzhavat Ushev

Oh, thanks for letting me know! Definitely need to look into this but with all TSLint/ESLint extensions, it can get quite confusing as to what is what.

 
nhoizey profile image
Nicolas Hoizey

Looks like prettier.eslintIntegration: true is deprecated

Collapse
 
chathula profile image
Chathula Sampath

Ayu theme

Collapse
 
clarkio profile image
Brian Clark 💡

I'm thinking we may need to have a discussion on themes, fonts, and other visual customization tips as well haha. Thanks for sharing Chathula 👍

Collapse
 
boobo94 profile image
Bogdan Alexandru Militaru

Hi Brian! I created an article on this topic, maybe you can take a look on it here boobo94.xyz/tips/vscode-setup-for-...

Collapse
 
sujeetpaandey profile image
Sujeet Pandey • Edited

Prettier:- This one is the most helpful in writing and maintaining the formatting and small coding optimisations.

Tslint:- Another great tool to make you ensure your code quality.

Collapse
 
clarkio profile image
Brian Clark 💡

Yes for sure anything that helps with improving code quality, especially on a team, is very valuable. Thanks for sharing Sujeet 👍

Collapse
 
bhanu1776 profile image
Bhanu Sunka

I found one really cool vscode theme named Jellyfish-x-retro 🚀🚀
Do checkout: marketplace.visualstudio.com/items...

 
nhoizey profile image
Nicolas Hoizey

Thanks for your answer, I'll try eslint autofix too.