Enabling the code minimap in Visual Studio Code

Lhar Gil -

UPDATE  TL;DR:

Visual Studio Code has gone through several great updates. The settings section has evolved dramatically.

As of this version:

Version: 1.30.1 (user setup)
Commit: dea8705087adb1b5e5ae1d9123278e178656186a
Date: 2018-12-18T18:12:07.165Z
Electron: 2.0.12
Chrome: 61.0.3163.100
Node.js: 8.9.3
V8: 6.1.534.41
OS: Windows_NT x64 10.0.17134

Quickly access the settings by:

Shortcut: CTRL+SHIFT+P

Menu: File > Preferences > Settings

Then search for the settings: editor.minimap

I cannot be more excited with the latest updates to Visual Studio Code. I have been using this code editor for quite a while now primarily for my client-side web development and so far, so good. The main draw for me is the minimalist interface as well as its extensibility and customizability not to mention its great price: FREE.

However, there was one feature I really missed esp. coming from the Visual Studio IDE. The ability to toggle the side scrollbar into a code minimap has been a boon. It is a great help when working with and navigating through a large document (God classes anyone?). Based on this feature request, it looked like I was not alone.

Imagine the joy when I read the release notes for the latest vscode update, February 2017 (version 1.10). The code minimap has finally been implemented! Sure it took a long time for it to be incorporated into the editor, but whatever.

It's time to use it.

You just add a new flag to your settings.json file, which can be accessed from this windows directory:

C:\Users\{your username}\AppData\Roaming\Code\User

(this directory may vary depending on your operating system and installation customization)

"editor.minimap.enabled": true

Alternatively, you can open up the settings from the menu option by navigating to File > Preferences > Settings. It should open up a new tab showing all the settings that you can customize, whether global (user settings) or project specific (workspace settings).

Currently, there are three customizable settings related to the minimap:

  1. Controls if the minimap is shown "editor.minimap.enabled": true | false
  2. Render the actual characters on a line (as opposed to color blocks) "editor.minimap.renderCharacters": true | false
  3. Limit the width of the minimap to render at most a certain number of columns "editor.minimap.maxColumn": 120

There you have it. Visual Studio Code is just getting awesomer day by day. I cannot wait for the next updates. Meanwhile, it's time to go back to work. ;)