Enabling the code minimap in Visual Studio Code

Enabling the code minimap in Visual Studio Code

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

Command palette in Visual Studio Code showing the preferences

Menu: File > Preferences > Settings

A list of minimap options in Visual Studio Code shown in the settings UI.

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.

An animated gif showing how the editor minimap works in Visual Studio Code

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

A list of minimap options in Visual Studio Code shown in the settings.json file.

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
An image showing how the renderCharacters option set to true makes the editor minimap look like a small representation of the actual code.
An image showing how the renderCharacters option set to true makes the editor minimap look like rectangular block of code.

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. ;)

Lhar Gil

Lhar Gil

Tech-savvy software developer and street photography enthusiast. Exploring the world through code and candid shots of daily life. 📸 All opinions are my own.
England