DEV Community

Cover image for My Visual Studio Code Setup

My Visual Studio Code Setup

Nick Taylor on December 23, 2017

This article is also available on iamdeveloper.com. This originally was just a gist, but I thought it made sense to just convert it to a blog post...
Collapse
 
chrisvasqm profile image
Christian Vasquez

Fira Code is <3

Collapse
 
alysivji profile image
Aly Sivji

Made the switch the Fira code (+font size 13) yesterday. Loving the ligatures.

Cheers!

Collapse
 
adambraun profile image
Adam Braun • Edited

Try changing line height instead.
It improved readability so drastically, I can't understand how I coded before.
line height change

Collapse
 
nickytonline profile image
Nick Taylor

Great to hear Aly! I really love the ligatures too.

Collapse
 
hrmny profile image
Leah

What are you using the Custom CSS and JS Loader for?

Collapse
 
itsjzt profile image
Saurabh Sharma

It is use in cobalt 2 for 3 things

  • getting a thick cursor.
  • using Operator Mono in sidebar too.
  • getting the yellow dot in tab when file is unsaved.
Collapse
 
nickytonline profile image
Nick Taylor

Leah, it's for Wes Bos' Cobalt 2 theme. See the instructions in marketplace.visualstudio.com/items...

Collapse
 
frantisaul profile image
Franti Saúl Huamán Mera

Hi. How you get this terminal with path?. Thanks

Collapse
 
nickytonline profile image
Nick Taylor

I'm not sure I understand your question. Do you mean how did I set up fish shell?

Collapse
 
frantisaul profile image
Franti Saúl Huamán Mera

I see in your terminal branch name with colors. How I get that?. Thanks

Thread Thread
 
nickytonline profile image
Nick Taylor

Gotcha. Install fish shell and Fisherman as mentioned in the article and then add the Agnoster or Joker Theme.

Thread Thread
 
equiman profile image
Camilo Martinez
Collapse
 
lardissone profile image
Leandro Ardissone

I love the comments syntax color in your latests screenshots, with a black background, it's the Dracula theme?

Collapse
 
nickytonline profile image
Nick Taylor • Edited

Yes it is the Dracula theme.

Collapse
 
lardissone profile image
Leandro Ardissone

Thanks!

Collapse
 
manueltorrez profile image
Manuel Torrez

I'm interested in Visual Studio Code, but do you think it's a good replacement for any IntelliJ-like program? I mean, I know they're different because of the editor and IDE factor, but I'm just curious

Collapse
 
almenon profile image
Almenon

VSCode is great for typescript. It's super light and nice to use. For python pycharm is still better but vscode is still useable. The python extension is being actively developed so hopefully it will improve.

Collapse
 
nickytonline profile image
Nick Taylor

Came across another great extension today, Code Runner, care of Ryan Burgess giving it a shout out on the Senior Engineer - Master Brewer episode of Front End Happy Hour

Collapse
 
sathish profile image
Sathish

The ligratures are not working for Fira Code for me.

Collapse
 
nickytonline profile image
Nick Taylor • Edited

Is the Fira Font installed? If so can, you provide a gist for your vscode settings.json (minus any sensitive info 😉).

Collapse
 
sathish profile image
Sathish • Edited

I only mentioned it im my settings.json and never installed one. I'm new to VS Code btw. Started using from yesterday after I broke up with Atom.

Collapse
 
sathish profile image
Sathish

Resolved it. I forgot to install the font. My mistake.

Thread Thread
 
nickytonline profile image
Nick Taylor

Cool. Glad you got it working.

Collapse
 
sathish profile image
Sathish
Collapse
 
dudeinthemirror profile image
lukie

I would add: if you are a die-hard Vim user such as myself, the Vim extension is top of the list: github.com/VSCodeVim/Vim ;)

Collapse
 
nickytonline profile image
Nick Taylor

Yeah the keybindings from other editors they provide is a great way to transition from your old editor, code.visualstudio.com/docs/getstar....

Collapse
 
brianmituka profile image
Brian Mituka

Which are the best extensions for VueJs?

Collapse
 
nickytonline profile image
Nick Taylor • Edited

I don't use Vue.js at the moment, but I know Sarah Drasner's Vue VSCode Snippets are supposed to be solid.

Collapse
 
equiman profile image
Camilo Martinez

There is an official VSCode extension named Vetur

Collapse
 
dellward profile image
Dell Ward

That Reactjs code snippets extension is dope!! I could have some fun with that. Thanks!

Collapse
 
nickytonline profile image
Nick Taylor

Polacode is my new favorite extension.

Collapse
 
edwin_r_c profile image
Edwin Ramirez

Live Share looks great. I read something that Atom already has something similar and is currently available. But I'm too happy with VS Code to download and try Atom again.

Collapse
 
nickytonline profile image
Nick Taylor

Yeah, there's Teletype for Atom, but I haven't tried it. Looking forward to Live Share!

Collapse
 
sournyb profile image
Brahim Sourny

Hi,
Thanks for sharing,
This extension may also be very useful :Settings Sync

Collapse
 
nickytonline profile image
Nick Taylor

Yeah, I mention this extension at the beginning of the extensions section. A must have. 🔥💪

Collapse
 
rajeshroyal profile image
Rajesh Royal

thanks for the cobalt 2 😉

Collapse
 
zed_m profile image
Amine Hammou

u are <3 thanksss!!

Collapse
 
cemoreno_ profile image
Carlos Moreno

Really useful, thanks!

Collapse
 
elanandkumar profile image
Anand Kumar • Edited

Try recursive.design font :)

Collapse
 
nickytonline profile image
Nick Taylor • Edited

I'll need to update this post, but here's a few changes I made

Collapse
 
sournyb profile image
Brahim Sourny

Yes indeed. good job :)

Collapse
 
equiman profile image
Camilo Martinez

Interest list I picked some extensions.

But I don't understand what Editor Config is used for?

Collapse
 
nickytonline profile image
Nick Taylor

I don't really use it in my own projects now. I had some before prettier existing. It's an extension that helps with code formatting if your project has an editorConfig file. For more information,see editorconfig.org