Visual Studio Code

Introduction

I imagine most people will find this from my stream with a particular section already in mind, in which case use the links below. If you didn’t come from the stream, I’d love to have you there! I code for 8 hours on most weekdays on a game called Bot Land. You should try it! 😉

Quick links to parts of this post:

Switching from Sublime 

I switched from Sublime to Visual Studio Code (VSC) on September 12th, 2018. I’d been using Sublime for about eight years. I was efficient and [mostly] happy with it. Those are the two qualities that you should want out of any editor in my opinion, so I’m not here to convince you to switch if you’re comfortable with what you’re using. My personal reasons for switching are:

  • VSC is more actively maintained than Sublime.
  • VSC is open source. At the very least, this means that if there are any core problems with the program, I could modify it myself instead of having to wait for another person to do it.
  • VSC is completely free, i.e. not even nagware. I’d already purchased Sublime a long time ago, so the reason this matters to me is not actually due to the price itself, but because I like being able to suggest my toolset to other people, and a free tool is much easier to convince someone to use than a [potentially] paid tool.
  • VSC seems to be more customizable than Sublime.
  • VSC does more out of the box than Sublime (e.g. Git integration, formatting code).

The catalyst for the switch was my frustration with specific plug-ins for Sublime. For example, a long time ago, the syntax highlighter I used was broken in such a way that a file containing a specific set of characters would crash all of Sublime. More recently, my ESLint plug-in wasn’t aware of nested configurations, so it was reporting almost every file as being erroneous. These sorts of problems really cut into development time.

Switching to VSC was no easy task. Using an editor for eight years, you start to get used to seemingly inconsequential quirks. The total transition time for me was somewhere between 10 and 20 hours, and there are still things that I haven’t customized to my liking yet.

My blog post on Sublime still resides here.

My OneNote notes on VSC are here.

Extensions that I use 

This list only contains extensions that I felt were general enough to recommend. For example, I use this extension for AutoHotkey language support, but it’s kind of obvious that you’d want something like that if you find yourself modifying AHK files, so I’ll omit those from the list.

Each extension name is a link to its official page.

My favorite extensions 

Toggler

This is the holy grail of extensions that you don’t even realize you need until you try it. You specify arrays of transformations, and with a keyboard shortcut, you can switch between them. Common examples include converting true  to false  or !=  to == . It maintains case (e.g. True  → False , TRUE → FALSE) and works on multiple selections.

You can even cycle between multiple values. For example, I update the !today  command in my stream every day, so I use Toggler to change “Monday” to “Tuesday”, “Tuesday” to “Wednesday”, etc.

VSCode Eval

This evaluates JavaScript expressions. Most commonly, I find myself using this for mathematical operations. For example, suppose you have this code:

int life = 20;
int damage = 50;

…and suppose you want to multiply each value by 15. I would make multiple cursors, add in * 15 , then run VSCode Eval on the selections, resulting in:

int life = 300;
int damage = 750;

Since it’s just evaluating JavaScript expressions, you can do things like:

  • Generate a repeated string: ‘*’.repeat(80)
  • Use any Math.*  functions: cos(PI * 2)

TODO+

This lets you write/manage a TODO list directly in VSC:

I use this all the time for notes about whatever task I’m working on. These notes almost always convert into Git commits, as opposed to, say, code documentation (which doesn’t belong in a TODO list).

I ran into a performance issue with the extension that was solved by modifying this setting: “todo.statistics.project.enabled”: “false”

I also had to tweak the colors a bit (see the overview here), e.g. “todo.colors.done”: “#75715e”

Code Ace Jumper

This is like EasyMotion for Sublime (or VIM). You invoke Ace Jumper and type a single character, and all instances of that character will be annotated with another character that lets you quickly navigate to exactly the one that you want.

If you’re primarily a keyboard user and find yourself wanting to jump to arbitrary characters on the screen, then this is the extension for you.

Useful extensions 

  • Bracket Pair Colorizer: if you’re lost in a sea of parentheses, braces, and brackets, this can help you reorient yourself. It assigns a color to each pair of opening/closing characters.
  • indent-rainbow: similar to Bracket Pair Colorizer, this is great if you’re confused about what indentation level you’re at; it will highlight the indentation levels with different colors.
  • GitHub Pull Requests: this lets you view pull requests from GitHub directly in VSC. At the time of writing (9/22/18), there are many actions that redirect you to GitHub, but it’s still helpful.
  • GitLens: to be honest, I’m not totally sure what this adds over vanilla VSC because I only ever tried VSC with this installed, but everyone seems to love this extension. I definitely do use the File History Explorer for showing the changes to a single file.
  • Multiple cursor case preserve: you have a line of code like int someWidth = width;  and you want to change “width” to “height” in both instances using multiple cursors. With this extension, you don’t have to worry about their casing. However, keep in mind that this particular example is better solved by Toggler since you wouldn’t even have to type “height” at all!
  • One Dark Pro: the color theme I use is Atom One Dark Vivid.
  • Rewrap: wraps comments to a given line length. This is nice if you use a ruler like I do to keep your lines to X characters long (this is controlled by the editor.rulers  array in your settings).
  • Settings Sync: this lets you upload/download all of your settings, extensions, keyboard shortcuts, etc. all at once via GitHub gists.

Extensions I installed for Sublime parity 

These are extensions that provided functionality that I was used to in Sublime. If you’ve never used Sublime, I’d still recommend Bookmarks and expand-region.

  • Bookmarks: add a bookmark to different points of interest in a file so that you can quickly jump to them.
  • Center Editor Window: centers the editor window on the cursor.
  • Dumb copy-paste: ctrl+shift+V from Sublime, i.e. pastes code with whatever the source indentation was.
  • expand-region: ctrl+shift+space (“expand_selection”) from Sublime – expands the selection outward in scope.
  • Incremental Search: almost like ctrl+I from Sublime, except not exactly… I want the search term to go into the ctrl+F buffer so that I can use “Find Next” with my incremental search. I haven’t found an extension to replicate the behavior exactly yet.
  • Transformer: sort or reverse lines, or make the selected lines unique.
  • transpose: ctrl+T from Sublime – transposes characters around the cursor, e.g. converting “tihs” → “this”. I would also like to transpose words, but I haven’t found an extension for that.

Settings 

Here’s a dump of most of my settings from October 2nd, 2019. I think that most settings are so opinionated that it isn’t worth highlighting any or explaining how to set them; there are enough resources for that sort of thing online already.

I don’t plan on keeping that list updated. This entire section is only here because people have already specifically asked for it.

Conclusion 

I touched on this earlier: the straw that broke the camel’s back with Sublime was the ESLint plug-in that I was using, but I wasn’t exactly unhappy with Sublime to begin with. So while I’m moderately happy with VSC after two weeks of using it, I feel like the real value is going to be difficult to discern—there are issues that I would have had with Sublime if I’d kept using it, but I’ll never know what those are since I’ve made the switch already.

With that said, I have several gripes with VSC:

  • After hours of researching, I still have no idea how to smoothly use Git on Windows without having to type my password every time. I concocted such a ridiculous solution (read “Git setup”) that it annoys me just thinking about it.
  • The sidebar and panel desperately need an autoclose option. VTools had two quirks (that aren’t worth going into) that prevented it from being a viable option for me.
  • I’m missing minor functionality from several plug-ins: transposing words, highlighting TODO+ in exactly the way that PlainTasks did, diffing arbitrary text, etc.

Microsoft seems to release frequent updates to VSC, so I’m hopeful that the positives outweigh the negatives in the long run.

7 thoughts on “Visual Studio Code”

    1. Sure! Here are the colors that I’ve customized (just paste these into your settings.json file):

      "todo.colors.done": "#75715e",
      "todo.colors.cancelled": "#75715e",
      "todo.colors.tag": "#74c2e6",

    1. Thanks for pointing this out! I’ve updated the link in the post (although I don’t plan on updating it unless it breaks again).

Comments are closed.