Sublime Text indentation guide lines

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?

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:


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

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!

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

Beginner JavaScript

Beginner JavaScript

A fun, exercise heavy approach to learning Modern JavaScript from scratch. This is a course for absolute beginners or anyone looking to brush up on their fundamentals. Start here if you are new to JS or programming in general!
I post videos on and code on

Wes Bos © 1999 — 2023

Terms × Privacy Policy