Migrating to Visual Studio Code

I’ve been testing out Visual Studio Code for writing Node stuff, and I really like what I’m seeing so far. I’d like to confess that 99.9% of the reason why I even considered trying it out in the first place was its ability to debug Node apps. I tried Intellij IDEA previously and was so put off by the IDE-like interface (my Eclipse days are still not quite past me) that I couldn’t bring myself to migrate over.

On first boot I immediately taken aback by how familiar to Sublime Text the interface was. I might even add that it feels somewhat snappier, although I can’t pin it down to a specific thing.

A comparison of VSC vs ST, listing only the features that I’ve used and enjoyed and the features I’m missing:

What VSC has

• Drag and dropping in the sidebar
• Node debugging that actually works consistently and without fuss
  • If this was the only thing going for it I would still have used it
• IntelliSense features
• First class support for TypeScript
• Nifty npm features

What VSC doesn’t have

• Tabs
  • Sublime Text has the same intuitive tab handling as Chrome, and I was very surprised to see VSC depart from this pervasive pattern, instead opting for a strange “Working Files” way of handling, well, working files. It’s not completely bad, just strange. I’d love to see the usual tab handling functionality introduced into VSC as an option in the future.
• Find in Files
  • I use “Find in Files” very regularly, and Sublime Text’s way of presenting the search results is still more familiar for me. VSC’s search results is tucked into the criminally narrow sidebar, which makes it very difficult to inspect the results.
• No Emmet/Zen Coding package
  • Not that applicable to Node development, but I still use it occasionally for writing JSX

Babel/ES6 Support

Of course, debugging my apps in VSC would mean that it has to be set up to run ES6 code, and I’m happy to report that this is very possible and very easy. In launch.json, simply set the runtimeExecutable to the babel-node binary in your project’s node_modules:

{
  "program": "${workspaceRoot}/index.js",
  "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/babel-node"
}

Configure the rest of your launch.json as per VSC’s documentation.

Note: There seems to be no good way of launching npm script commands from launch.json - will be investigating this in more detail.

Key Bindings

Most of the key bindings I use are the same. These are the only key bindings I’ve had to change so far to make it consistent with ST’s:

[
  { "key": "cmd+r", "command": "workbench.action.showAllSymbols" },
  { "key": "cmd+t", "command": "workbench.action.quickOpen" },
  { "key": "cmd+l", "command": "expandLineSelection" }
]

Theming

I use Afterglow in ST, and I’m happy to report that there is also Afterglow for VSC (just search for “Afterglow” in Extensions).

Packages

I’ve also found the following packages to be useful so far:

• ES6 Snippets
  • Not just ES6 - many handy JavaScript snippets waiting to expanded at the press of a ↹
• Align
  • I use the Alignment package in ST a lot, and this one works just as well
• Git History
  • For viewing Git history on a per-file basis or even per-line basis

Git Support

I prefer to manage my Git stuff in the command line or in Tower, so I don’t really care for VSC’s built-in Git support, although from cursory inspection it seems quite similar to SublimeGit (which I use only for git blame and git checkout).