Call me migrated. Bye Sublime, hello Visual Studio Code

Over the past years I’ve always been a Sublime Text guy. I’ve also been a C# guy on Visual Studio so, naturally, when I heard about Visual Studio Code (VSC) I would give it a try. Three months later, I’ve never looked back. The built-in git diff viewer, Markdown previewer, debugger, linting, and IntelliSense (code autocomplete)? Thumbs up. Sure, you could add packages to do most of those in Sublime, but those solutions aren’t nearly as elegant as VSC. Not to mention, Sublime’s UI just somehow feels… I don’t know… dated?

If you are balking at learning yet another editor, just do it. Naturally there will be the initial familiarization hurdle to overcome, but once you get started I’m sure you too will quickly leave Sublime in the dust. Here are some tips and tricks I’ve aggregated so far.

Settings Sync

Install Settings Sync by Shan Khan. This allows you to sync your settings privately to a GitHub Gist. You’ll not only be able to keep all your dev machines on the same page, but can also share the Gist with your colleagues in case they want to standardize editor settings.

If you don’t feel like going with a Gist, you can still do it the old fashion way with symlinks to DropBox/OneDrive. On Windows these are the two folders to symlink:

%USERPROFILE%\.vscode\extensions
%APPDATA%\Code\User

The first one is for your extensions and the second is for your settings.

Speaking of settings, one thing you’ll need to wrap your head around is that VSC has three sets of settings compared against Sublime’s two. You have Default, User, and Workspace settings. Default are VSC out-of-the-box settings. User is a globally applied subset of settings defined by you that overrides Default. Finally Workspace settings are also defined by you, but they are only applied to the current workspace. These override Default and User settings. For more information see here.

Key Bindings

Here are mine. They reconcile some of the differences between Sublime and VSC. You may also try the Sublime Text Keymap.

// Place your key bindings in this file to overwrite the defaults
[
	{ "key": "ctrl+`",  "command": "workbench.action.terminal.toggleTerminal",
                            "when": "terminalFocus" },
	{ "key": "ctrl+`",  "command": "workbench.action.terminal.focus",
                            "when": "!terminalFocus" },
	{ "key": "ctrl+tab",    "command": "workbench.action.nextEditorInGroup" },
	{ "key": "ctrl+shift+tab",  "command": "workbench.action.previousEditorInGroup" },
	{ "key": "ctrl+shift+/",    "command": "editor.action.blockComment",
                                    "when": "editorTextFocus && !editorReadonly" },
	{ "key": "ctrl+j",  "command": "editor.action.joinLines" }
]

Markdown

If you primarily use your Markdowns in GitHub, you’ll want to tell VSC to apply a GitHub css in the Markdown Previewer. Add this to your settings.json.

"markdown.styles": ["https://rawgit.com/joshpeng/9bc27039353d2b369d13f5e612382c67/raw/695ceef98dad56b8b3be735853afdff5d0409d1e/github-markdown.css"]

With the next version (1.9.0) of VSC, you’ll also get significantly improved syntax highlighting of code blocks in Markdown thanks to yours truly’s merged pull request ;)

Themes

There are currently two sets of themes you can install. One for file icons in the explorer and one for syntax highlighting. I recommend these though I am super biased -_-)b

vscode-icons by Roberto Huertasm <– File icons

One Dark by Josh Peng <– Syntax highlighting

Charcoal Oceanic Next by Josh Peng <– Syntax highlighting

JavaScript

One of the few things not up to par in VSC is the default JavaScript grammar. Luckily for you, I’ve spent a long time fixing this with my Sublime Babel extension. It matches Sublime Text’s babel-sublime package as much as possible. This will let you bring any themes you had in Sublime directly to VSC and see them behave identically.

Extensions

Here is the list of extensions I currently have installed.

No need to install Emmet. Comes built into VSC!

comments powered by Disqus