Sublime Text indentation guide lines

Quick little tip today for Sublime Text and everyone who works with indentation based languages like Python, CoffeeScript, Jade or those who are very diligent with their indentation practices. Watch the video or read the text after the break.

By default, Sublime text will give you indentation guide lines that are all the same colour. This is helpful but can become a little confusing when you get 4-5 levels deep. A class example I always find myself is below. Is the .getting div inside .row or is it a sibling?

ss 2013 07 24 at 4 02 52 PM

Well, an easy fix to this is to turn on "draw_active" setting for "indent_guide_options":

By Default, sublime already has "draw_normal" turn on for you, but we need to set it again so we do not overwrite it. You can put the code below in Preferences → Settings - User:

   "indent_guide_options":
    [
        "draw_normal",
        "draw_active"
    ],

This will turn on highlighting of the active indentation guide as well as the stacked, or parent, indentation guides.

Right away, I'm able to visually see that .getting is nested inside .row

ss 2013 07 24 at 4 08 26 PM

The colour of the guides completely depends on the theme you are using. You are able to style the default guide, the active guide and the stacked guide. I've updated my theme Cobalt2 to use blue, yellow and light blue respectively.

Like this trick? My book is almost ready. Sign up below and I'll let you know when it is ready!

facebook share2

Find an issue with this post? Think you could clarify, update or add something?

All my posts are available to edit on Github. Any fix, little or small, is appreciated!

Edit on Github

Syntax Podcast

Hold on — I'm grabbin' the last one.

Listen Now →
Syntax Podcast

@wesbos Instant Grams

Master Gatsby

Master Gatsby

Building modern websites is tough. Preloading, routing, compression, critical CSS, caching, scaling and bundlers all make for blazing fast websites, but extra development and tooling get in the way.

Gatsby is a React.js framework that does it all for you. This course will teach you how to build your websites and let Gatsby take care of all the Hard Stuff™.

MasterGatsby.com
I post videos on and code on

Wes Bos © 1999 — 2021