VS Code / VS Codium

Egg-laying wool milk code editor

January 25, 2018 — August 28, 2024

computers are awful
faster pussycat
plain text
UI
workflow
Figure 1

A code editor.

VS Code is something more powerful than a text editor and less heavy than a classic IDE. It is Microsoft’s in-house competitor to the code editor Atom, with a similar technology stack, but somewhat cleaner and faster, last I checked. Also, Atom might have been famous in this niche, but now that Microsoft owns Atom and VS Code, it is likely that Atom will gradually bitrot then evaporate into nothing.

I am not clear on the relationship between VS Code and the older, flabbier Visual Studio. Some shared branding without any particular shared code? I don’t care enough to ever find out.1

Anyway, VS Code is OK, it turns out.

1 But actually VS Codium

VS Codium is the pure community distribution of VS Code. Despite the editor being mostly open, Microsoft inserts some creepy code into the packaged version which VS Codium excludes. Why and how you should migrate from Visual Studio Code to VSCodium.

There are some things that might not work everywhere; does GitHub Copilot work in VS Codium? 🤷‍♂️

2 Or cursor

If you like even more AI assistance, perhaps the VS Code fork, Cursor - The AI-first Code Editor, is what you need.

Cursor is an AI-powered code editor that helps you build software faster.

3 Installation

# Ubuntu-esque
wget -qO - https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/raw/master/pub.gpg \
  | sudo apt-key add -
echo 'deb https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/raw/repos/debs/ vscodium main' \
  | sudo tee --append /etc/apt/sources.list.d/vscodium.list
sudo apt update && sudo apt install codium
# Windows
choco install vscodium
# Mac
brew install --cask vscodium

This should work more or less identically to Microsoft’s version, except that Microsoft will know less stuff about you.

xdg-mime default code-insiders.desktop text/plain  # X
sudo update-alternatives --set editor (which code-insiders) #everywhere

Just download that from the download page

Running Visual Studio Code on Linux mentions auto-update workflows, e.g. the following one for Ubuntu:

wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/
sudo sh -c 'echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/trusted.gpg.d/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" > /etc/apt/sources.list.d/vscode.list'
rm -f packages.microsoft.gpg
sudo apt update
sudo apt install code # or code-insiders

On pop os there is already a packaged version of VS Code which you can install from the Pop!shop app.

4 Built-in Browser

Simple Browser: Show runs a minimalist local browser.

A full-blown dev server with sophisticated integration is available in the Live Server Extension.

5 Multiple workspaces

I use extensions to colourise the windows differently to avoid confusion.

6 Multiple Windows, one workspace

This works. tl;dr Use the command Duplicate workspace in new window to edit the same workspace from multiple windows, or just drag your tabs out of the current window.

7 Searching

NB: some of this section is probably outdated.

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

Multiline search expressions require you to type ⇧-⏎/Shift-Enter. That’s us vanilla string matching. In regex matching, if I want to match multiline search I need to explicitly add newline characters to my character classes, i.e. [\s\S\r]+. NB I think this has changed now?

To replace regex groups you do the usual thing - $1 is the first group etc and $$ is a dollar sign. Putting this together, if I wished to replace LaTeX equation bracket syntax with LaTeX dollar syntax, I would replace

\\$$ *([\s\S\r]+?) *\\$$

with

$$$$$1$$$$

🤢

VS Code does something like ordinary javascript regex. If I want fancy lookaround or backref I 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.

There are some fancy search extensions which might be useful.

8 Cursors, navigating, selection

There are many useful shortcuts for navigating/selecting. And you can add more obvs. Some are worth knowing; I mention them below with their default keybindings.

Shift Alt i inserts a cursor at the end of every line in the current selection

Ctrl/Command Alt Arrow to add cursor above, or down arrow to add cursor below.

Ctrl+Shift+L is supposed to add a cursor at every occurrence of the current selected text, but it does not for me unless I am in search mode.

Ctrl Shift Arrow selects by word.

Ctrl Alt - moves cursor to where it was before.

F4/Shift F4 to navigate to global search results. F3 for local.

8.1 Enhanced navigation extensions

jumpy is fast keyboard navigation for VS Code.

When Jumpy is activated, decorations (two-letter codes) are created in the area around your cursor. Then simply type in a two-letter code to jump to that position.

Similar? metaseed/metaGo: MetaGo provides fast cursor movement/selection for keyboard focused users in VS Code

There is a port of vim-easymotion and various other useful vim-style navigation shortcuts

Would you like to navigate to pre-defined bookmarks? Install the bookmarks extension. Default shortcuts Ctrl Alt K to bookmark and Ctrl Alt J Ctrl Alt L to move between bookmarks. These shortcuts clash with a lot of other shortcuts, so one needs to hack the preferences. This is useful if you are jumping between more sites in the code than you can keep in parallel panes.

8.2 Go to symbol doesn’t work

Go to definition? Go to symbol? idk; there are a lot of similar features here for code navigation. It turns out go to symbol is somewhat broken generally, and totally arsed for python.

9 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). Pane/editor switch is not obvious either: ⌘ 1, ⌘ 2 work.

9.1 Snippets

Roll your own snippets. You invoke them using Ctrl space <prefix> tab, where you get to define <prefix>. There is an example at VS Code for prose.

10 Python

See VS Code Python.

11 LaTeX

See VS Code for LaTeX.

12 Settings sync

VS Code supports a built-in settings sync which works pretty well.

13 Ignoring things

Benjamin Pasero notes we can ignore stuff from default search results by adding it to the files.exclude setting:

"files.exclude": {  // Totally ignore
  "node_modules/": true
},
"search.exclude": {  // Exclude from search
  "**/*.yaml": true,
  "**/*.bib": true
}

14 Misc extensions of interest

14.1 Fancy search

Various extensions make search more powerful, by leveraging fuzzy search or regex via modern CLI utilities.

14.2 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.

14.3 Automatic coding

Eerily handy. Naively supported by GitHub Copilot, with GitHub Copilot extension.

Having your knowledge run through someone else’s language model obviously opens up all kinds of security and privacy attack profiles.

15 Networked VS Code

See networked VS Code.

16 Editing prose

See VS Code for prose.

17 Visualize weird stuff

A visual watch window that lets you visualize your data structures while debugging.

VS Code data preview is a tabular data visualiser/analyser for VS Code.

18 Various config one needs

Your config is in a JSON file, which is quaintly retro but does mean that 3rd party config is at least not purely abysmal. The 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.

18.1 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 I have to work out which is which. First, which is hover, which is hints etc?

The thing that appears when I mouse over a character is hover. It possibly does something useful in statically-typed languages, but often ends up just being annoying in, e.g. javascript/python. Also, I don’t generally mouse over things I am curious about.

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 WOULDNT YOU PREFER TO READ THE DOCSTRING FOR THE PRINT STATEMENT

Possibly also

  "editor.hover.sticky": false,

Suggestions are the next annoyance. See the docs for IntelliSense in Visual Studio Code. Because instead of letting you finish a line it wants to insert some wacky argument? Disable that.

  "editor.acceptSuggestionOnEnter": false,
  "editor.acceptSuggestionOnCommitCharacter": false,

We can still invoke the suggestions box with Ctrl-Space.

There is also a more minimal mode for suggestions, Inline quick suggestions, which I find less annoying.

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

How about bracket closing? (🥶) I am offended by every implementation of bracket closing I have yet seen, so I put this in my config:

  "editor.autoClosingBrackets": false,

Much better.

Alternatively, I might want to use AI-assisted IntelliSense which is possibly less needy? :

Also annoying, parameter hints.

  "editor.inlayHints.enabled": "offUnlessPressed",

18.2 Which language is that file?

Want to associate file types to certain languages? Here are some extensions I need for literate coding.

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

18.3 Privacy

Want to disable reporting your habits to Microsoft?

    "telemetry.enableTelemetry": false

19 Bonus tips/gotchas

19.1 Horizontal scrolling despite wordwrap

There is a bug built into VS Code which causes the browser to scroll horizontally to see a whole bunch of nothing on the RHS of the screen. AFAIU this is an attempt to let me see ghost text from temporary inline annotations. I fixed it by disabling line blame in gitlens but I believe other add-ons can cause the problem. Beware inline text stuff.

19.2 git editor

I found it convenient to set code as editor for command-line git commits:

git config --global core.editor "code-insiders --wait"  # insiders

19.3 Launching VS code from command line

At one point I wanted to launch the command line for fish shell on macOS and needed to do this:

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

VS code seems to do it by magic atm.

19.4 Fish shell

If I use fish shell on macOS, I must launch VS code from the command line, otherwise paths are all broken.

20 Incoming

Footnotes

  1. “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.↩︎