Enabling the code minimap in Visual Studio Code


VS 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:

  1. Shortcut: CTRL+SHIFT+P
  2. 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.

Code Minimap in action in Visual Studio Code
Code Minimap in action 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).

Visual Studio Code Settings Menu

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. VSCode is just getting awesomer day by day. I cannot wait for the next updates. Meanwhile, it’s time to go back to work. 😉

%d bloggers like this: