DEV Community

Cover image for Must have extensions for VS Code (according to me)

Must have extensions for VS Code (according to me)

Christian Vasquez on December 13, 2017

Everyone has things they can't live without, whether it is your pet, a really loud neighbor, taxes, the dank memes, or even water! (This is my way ...
Collapse
 
telmotrooper profile image
Telmo "Trooper"

I'd recommend Live Server as well. It's quite useful.

Collapse
 
chrisvasqm profile image
Christian Vasquez

Would you mind explaining what it does or a link to it for others?

Collapse
 
telmotrooper profile image
Telmo "Trooper"

It runs a web server in the root directory of your project so as to automatically update the page once you edit anything. Check the gif in its marketplace page: marketplace.visualstudio.com/items...

Collapse
 
ericcurtin profile image
Eric Curtin

Tried Visual Studio code.

Still find vim and a terminal is more productive for my needs! Each to their own.

Collapse
 
chrisvasqm profile image
Christian Vasquez • Edited

That's totally cool. I know a few people who love Vim but I have never used it.

What are some the things that you prefer from Vim over VS Code?

Collapse
 
ericcurtin profile image
Eric Curtin • Edited

Pros:

Vim starts fast and consumes minimal memory.

Largest syntax highlighting support you can find, in terms of languages.

Fingers don't have to leave the keyboard.

I can go to line 18790 of a file make a change within a second or two.

Massive plugin library (although I'm sure VS Code is big too).

I'm a Unix/Linux developer, so the ability to ssh to a remote system and make a change really quickly is important for productivity, may not apply if your primary development platform is Windows.

Almost every Unix/Linux system has vim installed, or at least it's closely related sister vi.

Cons:

The main one, steep learning curve.

C/C++ indexing could be improved upon. But VS Code is just as poor. QT Creator and full VS have decent indexing. Although full VS is a bit bloated, can be slow to start up and work with.

If you're a Unix/Linux developer in particular, learning vi/vim would be a string to your bow that you will be thankful for adding. Even most Emacs user know some vi/vim as Emacs isn't always installed.

It's more productive on Windows too in my opinion, but I'm not as convinced it's worth the effort learning if Windows is your primary development platform.

Thread Thread
 
chrisvasqm profile image
Christian Vasquez

Wow! I'll have to give it a try too!

Thanks

Collapse
 
emptyother profile image
emptyother

Thanks for a few good suggestions.

If you write a lot of javascript or typescript, instead of Code Runner I would recommend Quokka.js. Learned about it from a youtube channel named Fun Fun Functions.

Other than that, my MUST HAVEs are Settings Sync, Contextual Duplicate, Markdown Checkbox, Sort JSON objects, and Log Output Colorizer so far.

Collapse
 
chrisvasqm profile image
Christian Vasquez • Edited

nomnomnom

Collapse
 
nicolasparada profile image
Nicolás Parada

AddFileExtension and don't forget to bind the command "addfileextension.addFile" with the Ctrl + Alt + N keyboard shortcut. It allows you to easily create files without the mouse.

Collapse
 
miku86 profile image
miku86

What is the difference between Ctrl+Alt+N and Ctrl+N?

Collapse
 
nicolasparada profile image
Nicolás Parada • Edited

This extension is a little more smart. It will create folders and files relative to the current open file or root if none. Also support absolute path from root.

Collapse
 
iaremarkus profile image
Markus • Edited

One of the more useful Extensions I use, is the Slack integration. It allows me to select a selection of code or even an entire file, and send it right into my Slack instance. It can send as a DM to someone, or into the channel you specify.

It's a great workflow for sharing code with team members - useful snippets, or something you're having a problem with.

Then AdvancedNewFile is great for quickly creating a new file. CMD-Alt-N will drop down the palette where I can specify the starting folder, and then just type out the path to the new file I want to create and it'll build/out/the/path-to-the/file.html. Quite useful :)

Collapse
 
nexwebsites profile image
NexWebSites • Edited

Great article Christian. For us the number one extension is the Go extension by Luke Hoban. It makes VS Code into a very useful and productive environment for Go development.

For C# development, Visual Studio is still the boss.

Collapse
 
chrisvasqm profile image
Christian Vasquez

Thanks NexWebSites, this is the first time I read about someone using Go in VS Code. What do you guys use it for?

Collapse
 
nexwebsites profile image
NexWebSites • Edited

We use Go for everything from microservices, web services, to complete high performance servers. You name it. IMO, many applications are much more fun and effective written in Go. And that is coming from someone who has been writing in C# and Java since they were first released.

Although it is a great product, if it wasn't for the Go extension, we wouldn't even have VS Code on our machines.

Thread Thread
 
chrisvasqm profile image
Christian Vasquez • Edited

That sounds awesome. Props to Luke Hoban for his initiative!

Collapse
 
larrybuza profile image
Collapse
 
rbukovansky profile image
Richard Bukovansky

File icons: vscode-icons - first file icons for VSCode (AFAIK) and they are still best looking (IMHO).
Code alignment: Alignment - if you need to align those assignment rows (:=, = etc.) to look prettier
Bookmarking code: Bookmarks - you know what to do with it, right? :)
EditorConfig: If you need to force codestyle in your team
Guidelines: Guides - draws guiding lines between brackets
Markdown: Markdownlint, Markdown PDF
Syncing VSCode config: Shan Khan's Settings sync (already mentioned earlier by somebody else)
ToDo: TODO Highlight (searches code for TODO: FIXME: etc., highlights them in code as well as lists them)

Collapse
 
antero_nu profile image
Antero Karki

Clipboard history sounds nice, or if there is an undo for the action when you accidentally push copy instead of paste.

Not a plugin but I've recently discovered ligatures with the fira code font and for me it's the biggest improvement in code readability since color coded text.

Collapse
 
gustavoagt profile image
Gustavo Gómez

Well i recommend you,

1) Bracket Pair Colorizer
Basically allows matching brackets to be identified with colors.

2) Angular Language Service (If you use Angular)
provide us a rich editing experience for Angular templates

Collapse
 
chrisvasqm profile image
Christian Vasquez

NIce ones!

Those are pretty cool.

Collapse
 
wosi profile image
Christopher Wosinski

GitLens is a must have: marketplace.visualstudio.com/items...

Collapse
 
chrisvasqm profile image
Christian Vasquez

That's right! How did I miss it?

Thanks, Christopher :D

Collapse
 
lucasprag profile image
lucasprag

Great list!

Collapse
 
dancombs profile image
dancombs

VS Code with 20 extensions...curious about the performance...

Collapse
 
chrisvasqm profile image
Christian Vasquez

Haven't really noticed much of an impact on load times to be honest.

But now that you mention this, I'll look into it. Thanks!

Collapse
 
chrisvasqm profile image
Christian Vasquez • Edited

For anyone who may wonder:

Here'a post about performance issues and how to work around them for version 1.19 or later. And this one is for version 1.18 or older.

Collapse
 
jenc profile image
Jen Chan • Edited

What the intellisense! I have been using VSC for a couple months and I had never heard of this. (switched over, deliberately without watching tutorials to see what is so great about it).

The sweetest thing coming over from sublime, is the built in Terminal and git history.

Collapse
 
mbaas2 profile image
Michael Baas

I really like vscode-powertools - allows you to add buttons for configureable actions to the status-bar.

With todo-tree I keep track of TODO-comments in my code. VERY useful!

And I use the "Bad Code Highlighter" to highlight my typical problem: unpaired quotes. (You can configure a rx and if it find it, it would highlight the line)

Finally I found Favorites Manager to be useful to keeo a list of my favourtite file easily at hand.

Collapse
 
vipin_bathaw profile image
Vipin Bathaw

Try Binary Jump as well, it's a small extension that can save you some keypresses and faster the navigation by allowing you to jump half distances on either direction on a line.

Collapse
 
adamwknox profile image
DrKnoxy

Path intellisense is built in these days...
Also, my favorite extension is eslint-disable 😂

Collapse
 
galdin profile image
Galdin Raphael

I uninstalled Auto Import because VS Code seems to have that feature built-in now.

Collapse
 
reisclef profile image
Richard C

Thanks! I frequently see extensions, but it's more that I "don't know I need" the extensions! I'll definitely check some of them out!

Collapse
 
kirega profile image
Joseph Mutiga

You should project manager extension. Which allows you to quickly switch between work stations for different projects.

Collapse
 
chrisvasqm profile image
Christian Vasquez

Oh cool! I'll check it out later :D

Collapse
 
blouzada profile image
Bruno Louzada

Thanks for sharing I will ceartly install all tomorrow, for me a like the open in browser extension

Collapse
 
tcelestino profile image
Tiago Celestino • Edited

I am searching a extension that enable to rename file using shortcut (cmd + p) similar Sublime Text.

Collapse
 
chrisvasqm profile image
Christian Vasquez

Have you looked into the keymapping settings? You may be able to achieve it that way.

Collapse
 
tcelestino profile image
Tiago Celestino • Edited

I need to enable rename file via cmd + shift + p. On Sublime Text there is a option to rename a file using the same command but, in the VSCode there isn't the option. Look the image attachment: thepracticaldev.s3.amazonaws.com/i...

Edit: I did a search and I've found this extension: marketplace.visualstudio.com/items...

Collapse
 
anabilsymbyo profile image
anabil-symbyo

Also, you can use system sync to sync your user settings and extensions on Github.

Collapse
 
inf3rno profile image
inf3rno

What's the memory usage? How fast does it start? How is it better than Webstorm?

Collapse
 
chrisvasqm profile image
Christian Vasquez • Edited

Hey Janszky,

In terms of performance, I think you will have to give it a try yourself on your machine since specs can vary.

Being better than Webstorm? Not sure. I can say that Webstorm does provide more features out of the box than VS Code, so it all depends if you like or not having to download a few handy extensions or just get straight to coding after installing your tools.

You can refer to this and this other article to check out other people's reviews.

Collapse
 
tobideveloper profile image
Amos Tobi

I think another cool extension is quokka.js 'A live scratchpad for javascript' it supports typescript now too

Collapse
 
tim profile image
Tim Ma

Any way to sync the installed extensions across computers?

Collapse
 
chrisvasqm profile image
Christian Vasquez

I think Settings Sync is the one for you!

Collapse
 
hudsonburgess7 profile image
Hudson Burgess

Do you know of any strong refactoring extensions? VS Code’s refactoring capabilities seem pretty weak (almost nonexistent) out of the box. Considering switching to WebStorm just for that.

Collapse
 
chrisvasqm profile image
Christian Vasquez

That's a good question. I don't currently have any, but I'll let you know if I find one :)

Collapse
 
kian1991 profile image
Kian Lütke

Oh nice, thanks for Polacode!! Thats really needed for all my thesis'