VSCode Rainbow Indent Line Extension

Overview

I use VSCode all the time throughout the day. I mean, it’s my default app for writing code, jotting down quick notes with to-do items, transforming and analyzing files, or drafting blog posts (like this one). So, you could say it’s my go-to app for many things.

One of the best features of VSCode is the sheer number of extensions that enhance its functionality. One of them is indent-rainbow extension. It helps visualize indentation and catch pesky lingering spaces. Without the extension installed, the default view of the file looks like this (json file example):

Here’s how it looks when you install the extension. I don’t particularly like the bars filled with colors like this. I have nothing against it — just a personal preference.

I wanted to have colored lines instead.

I decided to put together these steps so that next time I need this setup, I won’t have to search the internet again. Some of you may find this blog post useful as well.

Extension Installation

I’m not going to cover how to install the extension because it’s like any other VSCode extension. Instead, I’ll just leave the link to Marketplace here so it’s easy to grab in the future.

Extension Configuration

Once the extension is installed, go to VSCode preferences: File -> Preferences -> Settings (on Windows).

In the search bar, type the following text and click on “Edit in settings.json”:

1

workbench.colorCustomizations

In the file, search for indentRainbow.indicatorStyle. Paste the following code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

"indentRainbow.indicatorStyle": "light",
// Use a 1-pixel wide line
"indentRainbow.lightIndicatorStyleLineWidth": 1,
// List of colors for the lines
"indentRainbow.colors": [
    "rgba(255,255,64,0.3)",
    "rgba(127,255,127,0.3)",
    "rgba(255,127,255,0.3)",
    "rgba(79,236,236,0.3)"
],

Alternative Approach

If you don’t want to install an additional extension in VSCode, you can use the built-in feature “Highlighted Indent Guides.” This has been available since version 1.23, check VSCode v1.23 Release Notes for additional details.

To enable this, go to the same settings.json file and add the following code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

"workbench.colorCustomizations": {
    // Active indent guide colors
    "editorIndentGuide.activeBackground1": "#ffc400",
    "editorIndentGuide.activeBackground2": "#ff0000",
    "editorIndentGuide.activeBackground3": "#a51283",
    "editorIndentGuide.activeBackground4": "#ff8c00",
    "editorIndentGuide.activeBackground5": "#ffc400",
    "editorIndentGuide.activeBackground6": "#ffc400",

    // Non-active indent guide colors
    "editorIndentGuide.background1": "#0066ff",
    "editorIndentGuide.background2": "#00e5ff",
    "editorIndentGuide.background3": "#00e5ff",
    "editorIndentGuide.background4": "#00e5ff",
    "editorIndentGuide.background5": "#00e5ff",
    "editorIndentGuide.background6": "#00e5ff"
}

You can update the hex codes of the colors to whatever you like. Here’s what this setting change looks like our my sample json file.:

Summary

Regardless of which option you choose — whether the indent-rainbow extension or the built-in app functionality — your files and code will be easier to read and troubleshoot if needed. Enjoy and share your favorite VSCode extensions in the comments section below!