DEV Community

loading...
Cover image for 10 essential extensions for VS Code

10 essential extensions for VS Code

fbnlsr profile image Fabien Lasserre ☕️ ・4 min read

I've been using Visual Studio Code as my main code editor for more than two years now. I used to work with Sublime Text, which was an amazing software (especially coming from Notepad++), but the guys at Microsoft are constantly doing an amazing job at making their editor the best out there, and their monthly update shows how dedicated they are to keep at improving it.

So it's been my editor of choice, but a good editor would be nothing without good extensions. I've compiled a list of my 10 favorites (plus a few more) extensions I could not live without. They make my day to day work much easier and allow me to save so much time in the long run. Here they are (in no special order):

Color Info

VS Code provides a tiny preview box for colors in CSS files. Color Info allows you to get a much better view of the color your mouse hovers, complete with CMYK or alpha values. It can even act as a color picker, which is really convenient.

Color Info

:emojisens:

You know I love emojis. This extension allows you to directly insert emojis or type emoji codes in your files. Say you wish to insert a joystick emoji. Just begin to type :joy for instance and you'll get an auto complete window pop up which will allow to directly insert the 🕹 icon. If you type in ::joy, it'll insert :joystick: along with a preview of the emoji. It's great!

Git Blame

As its name states, this simple extension shows the git blame of the current selected line in the status bar.

Git Blame

Markdown All In One

I absolutely love Markdown. Actually this whole site makes extensive use of markdown, as it is built with Hugo. This extension helps you write Markdown by adding shortcuts such as Cmd + B for bold text, Cmd + I for italics, and so on. So convenient!

Settings Sync

If you're like me and work on multiple (sometimes virtual) machines, this extension is wonderful! It allows you to sync your settings and extensions thanks to a Github Gist that gets downloaded/uploaded.

TODO Highlight

As the name states, it highlights TODOs, FIXMEs and any keyword you specify. Just write TODO: somewhere and not only will it highlight it, but it'll also list all the ones you've already written anywhere in your project.

Todo Highlight

Vetur

This extension is a swiss knife for Vue. From autocompletion to snippets, it's a must-have for any frontend developer.

Spell Right

A multilingual, offline and "lightweight" spellchecker. Spell Right uses your built-in dictionaries to check for errors, and can check for errors in any (and even multiple) language anywhere within your project. Watch out for big files though, as it can sometimes take some time to operate. I usually have it toggled off by default. It's easy to ask it for a spell check just by clicking on the eye icon in your status bar.

EditorConfig for VS Code

Strangely enough, VS Code does not support EditorConfig by default. Just install this extension and it'll instantly start listening to any .editorconfig file it encounters.

Bookmarks

Now this one I use it constantly! Bookmarks is an extension that puts little blue bookmarks in your file gutter. It's extremely handy when you need to switch between positions inside a file, or if you need a quick reminder anywhere in your project. I've set up mine with shift + cmd + = (toggle bookmark) and shift + cmd + - (next bookmark) and thanks to this I can jump around files without having to leave my keyboard. The extension also adds a small panel right below your file browser which lists all active bookmarks in the current project. A must-have.

Bookmarks

Honorable mentions

AutoFileName

This extension is pretty straightforward. Just type in the beginning of a file/directory and it'll autocomplete its name for you. Really handy when you need to point to a file inside node_modules.

cdnjs

Most of the time I inject my dependencies in my Javascript files thanks to Webpack. But whenever I need to mockup something quickly, this extension has my back. Using the command palette, you'll be able to insert URLs or script/style tags of all the libraries cdnjs handles. Quite handy.

cdnjs

Got one to share?

So here are a few extensions I use every day. If you've got one I should check out, hit the comment section or send me a tweet!

Discussion (28)

pic
Editor guide
Collapse
dance2die profile image
Sung M. Kim

As a React developer, I found React Food Truck to be quite useful.

It's a collection of React extensions and they come in quite handy :)

Collapse
lauragift21 profile image
Gift Egwuenu • Edited

This is a great list. I also found some nice one recently Polacode it takes snapshots of your code. Guides An extension for more guidelines in your code.

Collapse
fbnlsr profile image
Fabien Lasserre ☕️ Author

Woah! That's a great one! I've already used Carbon which does the same thing pretty much but being able to do it right from the editor is great. Thank you! :)

Collapse
codestaintin profile image
Isioye Mohammed

Polacode is a good one, thanks Gift

Collapse
davellanedam profile image
Daniel Avellaneda • Edited

Nice compilation! I’ve found “Bracket Pair Colorizer” and “Prettier” very helpful

Collapse
endlesstrax profile image
Ricky White

I second both of these. Bracket pair has saved me multiple times.

Collapse
pzelnip_84 profile image
Adam Parkin

Nice, a few of these I hadn't seen before.

Would recommend GitLens over GitBlame though, as GitLens does not only the blame (including stuff like blame on each line, in the gutter, etc) as well as a ton of other stuff. It's probably my top #1 VS Code extension: marketplace.visualstudio.com/items...

Collapse
spboyer profile image
Shayne Boyer

Nice list! Check out vscodecandothat.com/ - just released by @burkeholland and Sarah Drasner

Collapse
brenodamata profile image
Breno da Mata

I love the vscode-spotify. It allows you not only to see the song playing but it has the basic player commands shortcuts!

Collapse
tarifa10 profile image
tarifa-man

bon jour - hello dear Fabien - wow , 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.
see more here: forum.mxlinux.org/viewtopic.php?f=...
Fabien - you are invited to add your ideas to the thread.

dear Fabien - we would be glad to hear from you. - well we look forward to hear form you -regards tarifa

Collapse
nickytonline profile image
Nick Taylor (he/him) • Edited

Thanks for sharing Fabien. Definitely gonna check out color info. Git blame is awesome. I also use the Git extension pack which I highly recommend.

Here's my full setup if your interested.

Collapse
equiman profile image
Collapse
pjaerr profile image
Josh Jackson

Gotta throw Better Comments into the mix.

Collapse
ronniec95 profile image
ronniec95

My list of extensions in order of usefulness:
MetaGo - probably the best tool for keyboard driven navigation bar none (better than vim), includes bookmarks
Todo+ - a great task manager for my projects, and integrates with source code
Local History - saved my ass more times than not during a hardcore dev session
Find all references - fast rip-grep front end
Clipboard Manager - probably one of the better emacs style clipboard ring
Highlight - Really customizable highlighting for log files, config files,comments. Works with Todo+
Sort lines - does what it says
Palenight theme - easy on the eyes

Collapse
basteez profile image
Tiziano Basile

Hi, this is a good list of extentions.
I just don't get the point of writing emojis in code

Collapse
kwabenberko profile image
Kwabena Bio Berko

Awesome list!

Collapse
djquecke profile image
DJ Quecke

Newby questions. Will VS Code extensions work with VS Community? Also, has anyone seen a commenter extension that would allow me select a block of code and comment it out/in? Thanks

Collapse
fbnlsr profile image
Fabien Lasserre ☕️ Author

I don't think they will.

Regarding your request about comments: you can select a block of text and use CMD + / to comment that whole block in and out.

Collapse
codebyjustin profile image
Justin

AutoFileName is awesome thanks for the recommendation.

Collapse
hugoliconv profile image
Hugo

Do you know what extension allows you to highlight the scope of the function?
VS extension

Collapse
bdsaglam profile image
Barış Deniz Sağlam

Bracket Pair Colorizer?

Collapse
straleb profile image
Strahinja Babić

cdnjs will be quite handy to use, but VStudio already has a Color info i can dare to say its awesome :D

Collapse
delphinidae84 profile image
Collapse
jitheshkt profile image
Jithesh. KT

Any Swiss knife for React?

Collapse
kaledron profile image
Collapse
inozex profile image
Tiago Marques • Edited

I use most of those, but in addition as an Honorable mention, I use "Project Manager" (self explanatory) and "Code online" (creates an index of methods and properties of current class/file)