Wes Bos

Designer, Developer & Entrepreneur making the web an awesome place.

indentation_guides

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 PreferencesSettings - 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

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!

Let me know when this book launches

Enter your email address below and I’ll give you a hoot when its ready plus a discount code for being so great!

This entry was posted in Sublime Text. Bookmark the permalink.

3 Responses to Sublime Text indentation guide lines

  1. Ron Willems says:

    Hi Wes,
    I follow you quite some time with regard to Sublime Text3 settings and tweaking. My sincere Compliments to you!
    I use your Cobalt2 Theme as well and I am very happy with it.
    Especially you additional indent tweaks (draw_active) makes it complete.
    I already signed up for your book ;-) so keep on the good work.

    I am using Will Bonds Package Control as well. I already noticed your Cobalt 2 Theme is included.

    I would appreciate one more tip:
    Can you tell me the best way to update the Cobalt2 theme to your opinion?

    Greetz from The Netherlands

    Ron

  2. Stone says:

    Could you post the specific settings to change the highlight color for Sublime 3, if you know it off hand.

    I looked in my Default.sublime.theme but couldn’t find it.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>