Wes Bos

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

Screen Shot 2011-10-03 at 5.57.36 PM

To continue on with my string of blog posts on Sublime Text, I’m going to show you a short but handy feature that was just pushed to the stable build. Code Folding!

Unfortunately, collapsing of code in sublime text isn’t exactly the same as textmate, so you dont get the little arrows in the sidebar. The code is also folded into a single character which makes it easy to delete an entire block of folded code without noticing you have done so. This is the first iteration of code folding in sublime text 2, so I’m sure it will only get better. With those cautions in mind lets take a look at how to work code folding in Sublime.

Practice Code

Code folding works in all languages. I’ve created a small snippet of JavaScript which we can use to practice. Copy and paste this into Sublime and set the document mode as JavaScript.

var obj = {
    myStr: "Hello",
    myFunc : function() {
        console.log("hello");
        $('.someDiv').animate({height: 500}, function(){}
            // trigger the callback
            console.log('Done');
        });
    },
    myFunc2 : function() {
        return "Just another Level 2 function";
    },
    myNum : function() {
        return "Level 2 function";
    }
}

Folding Selected Text

This is probably what you came here looking for. you want to select a few lines of text and fold them out of the way. Easy!

Select the text you want to fold and hit Command + Option + [. You’ll now see you have a little icon indicating you have folded some code.

To unfold your code, hit the opposite Command + Option + ].

*Note: Windows users, substitute command and option for CTRL + SHIFT

Block level code folding is where its at!

Selecting the code you want to fold can be a pain. If you maintain nice, clean indenting within your document, you’ll be able to quickly fold and unfold several levels of code in just a few key strokes.

To fold a block, place your cursor anywhere within the block you want to fold. For our example, lets place it in the myFunc function. Now you just hit the folding keys to collapse that block.
Command + Option + [

Fold Multiple blocks at once

Another handy feature of Sublime Text 2 code folding is being able to fold all blocks that are indented with a certain level. For this example, I want to fold all the and just see the the properties/functions of obj.

The keyboard shortcut for this is a little different. We need to hold down Command and then tap k.
While you are still holding down Command tap the level of code block you want to fold. In this case 2.

Confused? CMD + K, CMD + 2

We now see that everything beyond 2nd level blocks are hidden. To unfold everything again, we do the same thing but with 0.

CMD + K, CMD + 0

Folding Tag attributes

When working with an HTML document that is heavy on attributes, it can be helpful to hide everything but the element type. This is extremely useful when working with something like jQuery UI that have long class names, titles, data, and aria attribues. Now, this one is all or nothing, so you can’t hide them case-by-case.

To hide:
CMD + K, CMD + T

To show again:
CMD + K, CMD + 0


You’re now a cold folding master

Do each of these folding steps a few times to get the hang of it and you will find it very useful in your day to day development.

Let me know if you have any questions. If you like this stuff please Follow Me on Twitter.

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

20 Responses to Code Folding in Sublime Text

  1. profetes says:

    Hi,
    really nice tutorial, thanks to you I like Sublime even more :)

    Have you considered making similar tutorial for vintage mode?

    cheers!

  2. Locke says:

    In Mac OSX (Snow Leopard) the Command + Option + [ or ] causes the text to indent instead of folding it, do you know why? Is there some option/configuration missing?

    • wesbos says:

      Locke - CMD + [ or ] indents, CMD + Option + [ or ] folds the code. Make sure you have the latest build of sublime text 2 that has code folding enabled.

      • Miguel Cordova says:

        The same problem with Mac OS X Snow Leopard and Spanish keyboard. [ and ] keys are activated with Option, so CMD + Option + [ actually indents code.

        Any user with international keyboard (Mac or Windows) should have another keymap, for instance, what Tor Arve Stangeland said…

        Try this keymap:

        { “keys”: [“ctrl+alt+f”], “command”: “fold” },
        { “keys”: [“ctrl+alt+u”], “command”: “unfold” }

  3. Boaz says:

    Thanks for the tutorial. I wasn’t %100 clear on the commands. By the way, on Windows it’s Ctrl+Shift+Arrow to fold/unfold.

  4. Rick says:

    Is there any way to maintain the state of the code folding after closing and opening files and projects?

  5. On Windows, the key bindings don’t seem to work. If I fold it with the Edit -> Code Folding menu item, then ctrl-shift-[ seems to unfold it. However, fold with key combination doesn’t work. ctrl-shift-arrow doesn’t work either.

  6. Just let me say thank you for this post.

  7. Tor Arve Stangeland says:

    To get folding to work on Windows with norwegian keyboard layout I had to add the following to my user keybindings:

    { “keys”: [“ctrl+alt+f”], “command”: “fold” },
    { “keys”: [“ctrl+alt+u”], “command”: “unfold” }

    Now I can fold/unfold using ctrl+alt+f/ctrl+alt+u

  8. Pingback: 5 great visual tweaks for Sublime Text | Wes Bos

  9. Mike says:

    To get the arrows on the side go in preferences-settings-default and change these:

    // Fold buttons are the triangles shown in the gutter to fold regions of text
    “fold_buttons”: true,

    // Hides the fold buttons unless the mouse is over the gutter
    “fade_fold_buttons”: false,

  10. Women Issue says:

    I still confuse for windows comment, I used CTRL + SHIFT but there is no effect on my code in sublime text 2

  11. Colin says:

    Great tutorial! Was very helpful. Any chance you’ve used these shortcuts with the PlainTask plugin?

  12. enchance says:

    Does anyone have the problem where after closing the file then reopening it all of the folded code are now unfolded? Is this just me because I’m using the portable version.

  13. Parvez says:

    I was looking for the solution was quite some time. Thank you for unfolding it :-)

  14. Pingback: Paul's Perambulations

  15. Pingback: Sublimely obsessive podcasts | Paul's Perambulations

  16. Prince says:

    Does anyone know if its possible to keep the arrow designating folding code visible at all times instead of just when the mouse hovers?

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>