Hacks and extensions to improve your coding with Visual Studio Code

6 minute read comments

In this post I will list all extensions and collect all hacks I’m coming across while working with Visual Studio Code (VS Code).

img

Keyboard shortcuts cheat sheet

The VS Code developers provide useful cheat sheets for default keyboard shortcuts:

You can change the default keybindings in the Keyboard Shortcuts setting (File->Preferences->Keyboard Shortcuts or Ctrl+K Ctrl+S on Windows and Linux, Code->Preferences->Keyboard Shortcuts or ⌘K ⌘S in macOS).

GUI based settings menu and JSON file settings

VS Code offers to ways to change its settings: a GUI based method and a file based method.

The GUI based method, also called Settings editor, can be opened via

  • File->Preferences->Settings (Linux, Windows) or Code->Preferences->Settings (macOS),
  • the keyboard shortcut ⌘, (macOS),
  • the Command Palette (⇧⌘P) with Preferences: Open Settings, or
  • choosing Settings from the cog menu on the side panel.

In the Settings editor choose the desired settings category on the left panel or search for a specific setting in the Search bar.

To use the file based method, search for Preferences: Open user Settings (JSON) in the Command Palette (⇧⌘P):

img

The corresponding command opens a file called “settings.json”, where all user settings are stored. The file is written in the JSON data format, specifying each setting by an ID and a value (e.g., "workbench.sideBar.location": "right"). An overview of all available IDs can be found in the Default Keybindings file (search in the Command Palette for Preferences: Open Default Keyboard Shortcuts (JSON)). VS Code supports IntelliSense in JSON files as well, so you can also search for commands by typing a few letters and then hit enter for auto-completing the suggested command:

img

Soft Undo

A very useful feature in VS Code is Soft Undo: jump back to the previous cursor position by using the keyboard shortcut ⌘U (macOS) or Ctrl+U (Linux, Windows).

Using the variable explorer

VS Code comes with a built-in notebook variable explorer for the Python Interactive Window. To open it, click on Variable in the top menu af the Interactive Window:

img

The same accounts for Jupyter Notebooks:

img

Using the Plot Viewer

In the Interactive Window we can use the Plot Viewer, which opens any plot into a separate editor tab. There, we can pan, zoom, navigate and save the corresponding plot:

img

Code Spell Checker

The Code Spell Checker extension does a very good job in catching common spelling errors both within code and default text.

GitHub Repositories

The GitHub Repositories extension is a useful addition to the already built-in GitHub support. It lets us quickly browse, search, edit, and commit to any remote GitHub repository directly from within VS Code.

Git History

And so is the Git History extension, which provides a comprehensive inspection of git logs.

Rainbow CSV

The Rainbow CSV extension enables a better visual navigation of CSV and TSV files opened in VS Code.

img

Output Colorizer

The Output Colorizer provides an enhanced output colorization for the terminal.

Python Indent

The Python Indent helps to maintain the correct indentation in Python scripts.

Highlight Python Cell Splitter

The Highlight Python Cell Splitter is extremely useful if you work a lot with Python code cells. It helps to distinguish different cells visually better and to identify the beginning of a cell faster.

YAML

The YAML extension provides YAML language support used, e.g., in Markdown files.

Markdown All in One

The Markdown All in One extension equips VS Code with many useful tools for editing Markdown files.

Liquid

The Liquid extension enables syntax highlighting and support for the Liquid template language, used, e.g., for generating Jekyll websites.

Customize syntax highlighting

The syntax highlighting in the editor is defined by the currently selected theme. However, you can overwrite specific syntax highlighting settings in the settings.json file. E.g., add the following code,

"editor.tokenColorCustomizations": {
        "functions": "#EC43EC",
        "comments": "#9d9d9d",
        "strings": "#067D17",
        "numbers": "#1750EB"
}

to change the syntax highlighting color of functions, comments, strings and numbers.

To find the ID of a specific editor formatting setting, search for Developer: Inspect Editor Tokens and Scopes in the Command Palette. By clicking on that command, a detailed settings summary is displayed for the text at the current cursor position in the editor:

img

From that summary, copy the first entry of the “textmate scopes” list (e.g., string.other.link.title.markdown), and add it to the “editor.tokenColorCustomizations” set in the settings.json file with a corresponding value, e.g.,

"editor.tokenColorCustomizations": {
  {"scope": ["string.other.link.title.markdown"],
                "settings": {
                    "foreground": "#67c251",
                    "fontStyle": ""
                }
  }
}

which changes the formatting of link titles in Markdown files.

Change the size of the editor tabs

To gain a bit more space in the editor tabs area, add the following line to your settings.json file:

"workbench.editor.tabSizing": "shrink"

img Editor tabs: default sizing (top) and shrunk sizing (bottom)

Disable blank space at the bottom of the editor

By default, there is always some extra blank space added at the bottom of the editor when you scroll down. To get rid of this, add the following line to your settings.json file:

"editor.scrollBeyondLastLine": false

img

Adjust the scroll speed

If the scrolling in the editor is too fast or too slow, adjust it with the following command in the settings.json file:

"editor.mouseWheelScrollSensitivity": 0.2

where the assigned number defines the scroll sensitivity.

Enable the keyboard shortcut to run the current code selection in the interactive window

If the keyboard shortcut to run the current code selection or line in the Interactive Window doesn’t work (default: Shift+Enter), go to the Settings editor, search for Send Selection To Interactive Window and click the checkbox of Jupyter: Send Selection To Interactive Window:

img

How to get conda run under Windows

To make conda available in VS Code under Windows, follow the instructions provided in this post.

Bracket pair colorization

You can enable bracket pair colorization by adding

"editor.bracketPairColorization.enabled": true

to the settings.json file. Works with up to 6 different colors:

img

Customize the colors via the workbench.colorCustomizations settings in the settings.json file:

"workbench.colorCustomizations": {
    "editorBracketHighlight.foreground1": "#279eff",
    "editorBracketHighlight.foreground2": "#ffad1f",
    "editorBracketHighlight.foreground3": "#cd27ff",
    "editorBracketHighlight.foreground4": "#00e5ff",
    "editorBracketHighlight.foreground5": "#8bff17",
    "editorBracketHighlight.foreground6": "#afb0b1",
    "editorBracketHighlight.unexpectedBracket.foreground": "#f88589"
}