Visual Studio Code

VS Code is Microsoft’s competitor to Atom, with a similar technology stack, but somewhat cleaner and faster.

I am not clear on its relationship to the flabby Visual Studio. Some shared branding without any particular shared code? I don’t care enough to ever find out.¹

Anyway, VS Code is OK, it turns out.

Important keyboard shortcuts

Tab switching is not obvious. There are a lot of tweaks you could do, but short story

Ctrl PageDown (Windows/Linux) or ⌘ ⌥ → (Mac).

Snippets

Roll your own snippets. You invoke them using Ctrl space <prefix> tab, where you get to define <prefix>.

Here is a example set that works well for markdown maths:

{
  "Inline_Math": {
    "prefix": "$",
    "scope": "markdown,latex",
    "body": [
      "\\($1\\)",
    ],
    "description": "inline math"
  },
  "Display_Math": {
    "prefix": "$$",
    "scope": "markdown,latex",
    "body": [
      "\\[",
      "$1",
      "\\]",
    ],
    "description": "display math"
  },
  "Display_Math_Markdown": {
    "prefix": "align",
    "scope": "markdown",
    "body": [
      "\\[\\begin{aligned}",
      "$1&=$2\\\\",
      "\\end{aligned}\\]",
    ],
    "description": "display math"
  }
}

Or for a short-ish snippet you can assign direct keyboard shortcuts in the keybindings.json file (Preferences: Open Keyboard Shortcuts File):

[
    {
        "key": "ctrl+shift+4",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus",
        "args": {
            "snippet": "\\($1\\)$0"
        }
    },
    {
        "key": "cmd+shift+4",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus",
        "args": {
            "snippet": "\\($1\\)$0"
        }
    }
]

Searching and selecting

Almost obvious but to get maximum value you have to learn a couple of extra things.

Multiline search expressions require you to type ⇧-⏎/Shift-Enter. That’s for vanilla string matching. For regex matching if you want to match multiline search you need to explicitly add newline characters to your character classes, i.e. [\s\S\r]+.

To replace regex groups you do the usual thing - $1 is the first group etc and $$ is a dollar sign. Putting this together, if you wished to replace latex equation bracket syntax with latex dollar syntax, you would replace \\\[ *([\s\S\r]+?) *\\\] with $$$$$1$$$$. 🤮

VS code does ordinary javascript regex. If you want fancy lookaround or backref you can enable the setting search.usePCRE2.

Multi cursors interact with search usefully. General multiple cursors are made by Alt+Click/ Option+click. There are many keyboard shortcuts to use them to automate menial chores.

Needful extensions

emoji and unicode

Insert Unicode is a handy tool for inserting arbitrary unicode by searching in various elaborate ways, including full emoji support. Alternatively, Unicode Latex converts from LaTeX character macros to unicode.

“Remote” editing

Remote edits code in particular environments - including spinning up containers or SSH sessions, so that your editor and execution environments can be different. The remotes in the former case can be local “remotes”.

Slightly weirder code-server runs a server process that makes vs code accessible to you in a browser. The companion app ssh automates that.

Markdown mathematics

It comes with a built-in markdown preview, but you want mathematics support, no? Yeah you do.

You can make Markdown more legible with dark themes by using Markdown Theme Kit, bitbucket styles or github styles.

I personally use Markdown + Math, which is far from perfect, but the cons are not showstoppers for me. Choose your poison.

Option 1: native “Markdown + Math”

You can augment native markdown preview with maths support via Markdown + Math a.k.a. mdmath.

Pros:

Renders math faster using KaTeX
well integrated with everything else

Cons:

brackets-as-delimiters ~~doesn’t work~~ UPDATE: it now works, mostly.
mdmath KaTeX macro support is quirky, as the underlying KaTeX macro support is in turn quirky. Further, to detect macro updates you need to close and open the window again.
The parser is bad at identifying delimiters – in particular
- There must be a blank line before display math and some kind of whitespace after it. (😱) This one is bad—it means that if I generate LaTeX from the markdown, there will be semantically-incorrect paragraphs before each equation..
- No newlines in inline math (😬)
- No spaces between delimiter and math (👍)

Option 2: Markdown preview enhanced

Replace native markdown preview with the revamped Markdown Preview Enhanced.

Pros:

Just works
Supports MathJax and hence LaTeX-native macros

Cons (at least when using MathJax):

Slow, presumably due to MathJax being slow
leaks RAM
eventually crashes

LaTeX

See VS Code for LaTeX.

Settings sync

But you can coordinate across machines using settings sync.

I don’t want to sync everything, I can use sync pragmas, which look like this:

// @sync os=linux host=work-pc
// @sync os=mac host=home-pc

Spell checking

There are various options. the most popular seems to be cspell, which is very excited about GETTING CODE SPELLING RIGHT but seems a little clunky in the settings.

I prefer SpellRight as far as decent system spellcheck integration on macOS. Developer Bartosz Antosik is incredibly responsive. I should send him money.

It is too aggressive with spell checking latex maths in markdown documents. Here is a workaround I whipped up, to put in the settings file:

    "spellright.ignoreRegExpsByClass": {
        "markdown": [
            "/@[A-Za-z0-9_]+/g", //citations
            // "/```(.+?)```/gm", // code blocks - does not work.
            "/`[^`]+`/g", // code inline
        ],
    },

Pro-tip: make sure that your spelling language is set to a supported dictionary, or you will miss things.

Linux and spellRight

On Ubuntu you need hunspell dictionaries installed. NB it is not sufficient to install hunspell; you need to download or link the files into the right place for the extension to find them, in the correct character encoding.

To use it a pair of Dictionary (*.dic) and Affixes (*.aff) files with UTF-8 encoding have to be downloaded … and placed in Dictionaries subfolder of VSCode’s user global configuration directory, located at $HOME/.config/Code/Dictionaries/.

Hunspell dictionaries are not obvious, entailing e.g. character set weirdness. You can create your own language if you want, so that’s nice I suppose. More usefully for most of us, can create your own user dictionary, or add to it using hunspell commands but it’s not clear to me if VS Code will pick these up.

Various config one needs

You config is in a JSON file, which is quaintly retro but does mean that 3rd party config is at least not purely abysmal. The path location is the following:

Windows %APPDATA%\Code\User\settings.json
Mac ~/Library/Application Support/Code/User/settings.json
Linux ~/.config/Code/User/settings.json

But you can coordinate across OSes by using settings sync.

Hover/tooltip/hint/autocompletion things are too intrusive

There are a lot of features which huddle under the opaque umbrella of intellisense, because they let someone in marketing get too near the product. But they all need tweaking, so you have to work out which is which. First, which is hover, which is hints etc?

The thing that appears when you mouse over a character is hover. It probably does something useful in statically-typed languages, but often ends up just being annoying in, e.g. javascript/python.

To clam it for all languages, perhaps

  "editor.hover.delay": 3000,

so it activates after 3 seconds instead of RIGHT NOW LOOK AT ME OH SORRY WERE YOU TRYING TO READ SOMETHING ON THE SCREEN.

Possibly also

  "editor.hover.sticky": false,

The hints are probably also being annoying, right? because instead of letting you finish a line it wants to to insert some wacky argument?

  "editor.acceptSuggestionOnEnter": false,

That can be toned down by language for e.g. markdown.

How about bracket closing? (brrrrr) If you are like me and you are offended by every implementation of bracket closing you have yet seen, you want, in your config:

  "editor.autoClosingBrackets": false,

Aaaaahhhh that’s better.

Alternatively, you might want to use AI-assisted IntelliSense.

Outline view in python is mostly imports

If you are using the (deprecated) code outline extension, Alex Gvozden’s solution:

    "symbolOutline.topLevel": [
        "Class",
        "Module",
        "Constructor",
        "Function",
        "Method"
    ]

AFAICT the built-in one doesn’t do this.

Which language is that file?

Want to associate file types to certain languages?

    "files.associations": {
        "*.jsx": "javascript",
        "*.rst": "restructuredtext",
        "*.Rmd": "markdown",
        "*.Rpres": "markdown",
        "*.Rnw": "latex",
        "*.jmd": "markdown"
    },

Privacy

Want to disable reporting your habits to Microsoft?

    "telemetry.enableTelemetry": false

Jupyter

You can use VS Code as an alternative client to talk to jupyter kernels

VS code Juptyer Nifty examples.

Bonus gotchas

Command line not working

You want it to work from the command line for fish shell on macOS?

set -U fish_user_paths \
    "/Applications/Visual Studio Code.app/Contents/Resources/app/bin" \
    $fish_user_paths

“Flabby” in the sense of being busy with features I don’t want, not in the sense of wasting hard disk space or RAM. As a javascript desktop app, VS Code is a gigantic memory waster, like all the other javascript apps.↩︎

Egg-laying wool milk text editor