DEV Community

Cover image for My Visual Studio Code Setup
Nick Taylor
Nick Taylor Subscriber

Posted on • Updated on • Originally published at iamdeveloper.com

My Visual Studio Code Setup

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.

As the stateofjs.com survey this year noted, Visual Studio Code is quickly becoming the editor of choice for many web developers.

VS Code is my editor of choice. It's great for web dev, and if you're developing with TypeScript, it's definitely the way to go. Fun fact... it's written in TypeScript. If you're interested in learning more about TypeScript, check out my blog post Consider Using TypeScript.

TypeScript is what gives VS Code its refactoring and intellisense capabilities. Here's the really cool part. You get typed intellisense even if you're not using TypeScript via Automatic Type Acquisition.

Alright, let's get to it. Here's my current Visual Studio Code setup.

Extensions

VS Code has a huge array of extensions available on their marketplace. As well as extensions, in 2017, extension packs became available. tl;dr, they're a grouping of extensions.

Settings Sync is a must have extension and I recommend installing it as your first extension. With this extension, you'll be able to backup most of your settings to a private gist. From there, restoring your settings is pretty easy. It's great for backing up settings as well as synching settings, which is what I do between my work and personal laptop.

Node/JS

Formatting/Linting

CSS

Debugging

Language extensions like Go and Python (see below) when installed get all the proper tooling set up to debug for those specific languages. Here's some others. The easiest way to get started with debugging is to press F5 and VS Code will offer you debugging configurations to get set up with.

Git

Unit Testing

React

Other Languages

REPLs/Playgrounds

Viewers

DevOpsy Stuff

Hack the Editor

Update 2018/01/28: The Custom CSS and JS Loader can also be used to get a kind of Operator Mono look by using two fonts. See the tweet below. I did run in to some issues though. The main one was that the CSS class names had changed. Just read the whole tweet thread for all the info.

TLDR; check out https://gist.github.com/nickytonline/8086319bf5836797ee3dea802a77000d. (maybe another gist to blog post? 😉). And the end result is this. Not sure if I like the cursive in code yet, but maybe it'll grow on me.

Miscellaneous

Themes

Current Theme Setup

I'm currently taking the Cobalt 2 theme for a spin with the Fish Shell Fisherman Agnoster theme.

Cobalt 2 Theme with Fisherman Agnoster Theme

I still love using the Dracula theme with the Fish Shell Fisherman Joker theme, but thought I'd switch it up for a bit.

Dracula Theme with Fisherman Joker Theme

I've also used One Dark Pro, and Material theme which are great as well.

Shell

I use Fish Shell and Fisherman with the Agnoster theme right now.

Font

I use Fira Code in VS Code. Once you've installed Fira Code, the setup in Code is quite easy.

Fira Font

Open your user settings and add the following:



  // Controls the font family.
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true,
  // Controls the font size.
  "editor.fontSize": 14,


Enter fullscreen mode Exit fullscreen mode

Boom! Bob's your uncle and you now have Fira Code in all it's awesome ligatureness (is that a word?).

Custom Key Bindings



// Place your key bindings in this file to overwrite the defaults
[
  {
    "key": "cmd+shift+z",
    "command": "workbench.action.terminal.focus"
  },
  {
    "key": "cmd+shift+a",
    "command": "workbench.action.terminal.focusNext"
  },
  {
    "key": "cmd+shift+s",
    "command": "workbench.action.terminal.focusPrevious"
  },
  {
    "key": "cmd+shift+x",
    "command": "workbench.action.terminal.kill"
  }
]


Enter fullscreen mode Exit fullscreen mode

Also, if you're looking for great tips and tricks on Visual Studio code, check out www.vscodetips.com. One last thing that I'm really looking forward to is the availabilty of Live Share.

Questions or comments? Hit me up on Twitter.

Top comments (43)

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