Nick Taylor

Posted on Dec 23, 2017 • Edited on Jun 17, 2020 • Originally published at iamdeveloper.com

My Visual Studio Code Setup

#visualstudiocode #developertools #texteditor #vscode

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

Node extension pack (must have)
Import Cost

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.

Debugger for Chrome

Git

Git extension pack (must have)
Git Blame
gitflow
Open in GitHub / Bitbucket / Gitlab / VisualStudio.com !

Unit Testing

React

Other Languages

Go
Python

REPLs/Playgrounds

Quokka.js (check out Introducing Quokka...)

Viewers

Image Preview
SVG Viewer
View in Browser
Update 2018/02/16: Polacode, not a viewer per se, but a great way to take beautiful images of code snippets.

DevOpsy Stuff

Hack the Editor

Guides
Custom CSS and JS Loader (currently used for the Cobalt 2 theme.)

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.

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

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.

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,

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"
  }
]

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.

Latest comments (43)

Rajesh Royal • Sep 4 '20

thanks for the cobalt 2 😉

Anand Kumar • Jan 21 '20 • Edited

Try recursive.design font :)

Carlos Moreno • Jan 6 '20

Really useful, thanks!

Amine Hammou • Dec 30 '18

u are <3 thanksss!!

Nick Taylor • Dec 1 '18

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

Camilo Martinez • Oct 9 '18

Interest list I picked some extensions.

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

Nick Taylor • Oct 9 '18

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

Nick Taylor • Jul 7 '18 • Edited

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

ℕ𝕚𝕔𝕜 𝕋𝕒𝕪𝕝𝕠𝕣

@nickytonline

@kylewelch Night Owl/Dank Mono font for me. I was on Cobalt 2 and Dracula before that. All great themes. Deets here, dev.to/nickytonline/c…

03:07 AM - 14 Jun 2018

02

Nick Taylor • Feb 16 '18

Polacode is my new favorite extension.

Nick Taylor

@nickytonline

Hey @syntaxfm, have you seen the new Polacode extension for @code? It's 🔥 marketplace.visualstudio.com/items... #vscode

19:17 PM - 16 Feb 2018

00