Grow your CSS skills. Land your dream job.

Changing Between Spaces and Tabs in Sublime Text

Published by Chris Coyier

Sublime Text is pretty dang good at making it easy to switch between using tabs and spaces to indent your code. More importantly, it makes it easy to adjust the indentation of code that doesn't match your preference. I thought I'd put this together for reference, as there is a particular sequence of steps for some of the transitions that needs to be followed.

The first step is making sure your User Preferences are how you like them.

I prefer spaces, so my settings are like this:

{
  // other stuff

  "tab_size": 2,
  "translate_tabs_to_spaces": true,

   // more other stuff
}

Adjust to your liking there.

You can override these settings on any given file, from the bottom right.


The bottom right corner is where you can see the current settings for the open document.

This is also headquarters for fixing up a document that isn't how you like it.

Changing from Tabs to Spaces (Same Level of Indentation)

Here's a document that is in tabs right now. I can tell because I've selected the text and there are dashes in the white space not dots. Dashes are tabs, dots are spaces. Also, in the bottom right, I can see it says "Tabs Size: 2".

You can see that those Tabs are 2 spaces wide. Assuming I want to switch to spaces and I'm happy with 2 spaces per tab, I just select "Convert Indentation To Spaces" from that menu.

And I'm good to go for that case.

Changing from Tabs to Spaces (Different Level of Indentation)

Let's say a straight conversion from tabs to spaces isn't going to do it for me. Say the tab level is set to 6 spaces per tab, and I want to convert to spaces, but only 2 spaces per indentation. The trick here is to adjust the spacing while in tabs first, then convert.

Changing From Spaces to Spaces (Different Level of Indentation)

What if you have a file that is in spaces how you like it, but it's using 4 spaces instead of 2? Sublime Text can still help here. You use the ability of tabs to be of variable length. So first convert to tabs, adjust the width, then switch back to spaces.

Changing From Spaces to Tabs

I think we're getting the hang of this now. You can do any of this in the reverse direction if you prefer tabs.


I think you can extrapolate other switching scenarios from there.

I don't think there is any scenario that you can't adjust to your liking this way. If you're caught manually adjusting indentation (that is consistent within itself), stop, you can figure out a way to fix it with settings.

If you want to discuss tabs vs. spaces below, go for it, but I can tell you I really don't care. I mostly care that any particular project is consistent about it and enforces it.

.editorconfig

Also worth mentioning: There is a thing called EditorConfig. You put a file in the root of your project called .editorconfig. If someone opens that project in an editor that supports it, those settings will be honored. There is one for SublimeText.

The file might look something like:

# editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

Comments

  1. Very useful. I’ve been using sublime from long but didn’t notice about all these features available. Thanks.

  2. Steve
    Permalink to comment#

    Nice tips, thanks. What theme and color scheme are you using in the screen shots?

    • Clive Cooper
      Permalink to comment#

      He’s using Twilight, it comes with Sublime Text.
      Just click Preferences > Color Scheme > Twilight

  3. Permalink to comment#

    You’re a Sublime person, eh? I use Coda myself. Have you tried other text editors, and if so, what is it about Sublime that keeps you using it? Or is it just habit/familiarity?

    • Alex
      Permalink to comment#

      I used Coda but changed to Espresso from MacRabbit which I prefer.

    • Koen
      Permalink to comment#

      Piers,

      I used to use Coda, but decided to check out Sublime Text 2 because I heard great things about it. I’ve been using it for a couple of months now and I can tell you that I’m never going back to Coda.

      Sublime Text has tons of features that makes coding much more fun. ‘Go to anything’ and ‘Package Control’ should be enough to convince you. Learning shortcuts to minimize your mouse usage is nice. Oh, and it’s quite fast!

      Sublime Text is like a beautiful white canvas, which you can paint to your needs.

    • efraim
      Permalink to comment#

      I used to switch between Coda and Espresso whenever one of them was updated, like both them.

      Then came Sublime and there was no turning back. Our entire dev team all dropped their favorite editors of years, and we all went over to Sublime within a couple of weeks of each other. It’s super fast, extensible, clean, adaptable and just feels like it “stays fresh” somehow.

  4. Good one Chris. Lots of people will find this useful, myself included. Are there shortcut keys to do this?

    • Mike Hopley
      Permalink to comment#

      This is Sublime Text. Of course there are shortcuts. ;-)

      Open up the command palette (Shift + Ctrl + P on Windows, Shift + Command +P on Mac)
      Start typing, e.g. “contabs” (this should get the exact item) or just “tabs” (press down arrow to select the correct item)
      Press Enter

      Similarly “conspaces” or “spaces”.

      …and if that’s not fast enough for you, you could define an actual shortcut key in your key bindings.

    • Cheers Mike, I think I will define y own shortcuts.

  5. Exdeniz
    Permalink to comment#

    Sublime macro convert TwoSpace to FourSpace
    convertTwoSpacesToFour.sublime-macro

    [
    {
        "args": null,
        "command": "select_all"
    },
    {
        "args":
        {
            "set_translate_tabs": true
        },
        "command": "unexpand_tabs"
    },
    {
        "args": {
            "setting": "tab_size",
            "value": 4
        },
        "command": "set_setting"
    },
    {
        "args":
        {
            "set_translate_tabs": true
        },
        "command": "expand_tabs"
    }
    

    ]

  6. Alex
    Permalink to comment#

    Hi Chris!
    Please tell me why you prefer spaces?
    Thanks.

  7. Sarah Adams
    Permalink to comment#

    I used to prefer spaces as well, until a colleague pointed out that if we used tabs, each developer could configure their own editor to make the tabs whichever width they prefer. With spaces, we were all stuck with whatever number of spaces were used by the first dev to work on each file and had to try to agree as a team on how many spaces should be standard.

    • Agreed. I also think tabs make it easier to get a more consistent hierarchy. I’ve seen so many mistakes in code that’s space indented where there are extra spaces when there shouldn’t be. Seems like tab make hierarchy mistakes more obvious.

    • This, exactly.

    • Rhys Lloyd
      Permalink to comment#

      Yes, yes, yes.

      This is my biggest argument for tabs. With tabs, each individual can work with whichever space sizes they prefer. Surely that’s more efficient than forces devs out of their comfort zone?

    • People are afraid of tabs. There’s some voodoo magic about 1 character equaling an arbitrary number of spaces in monospaced type.

      That being said, I prefer tabs because it matches what I’m trying to accomplish. I’m trying to accomplish 1 level of indent.

      I used spaces for a while because it seemed that you weren’t a REAL developer unless you used plain old ASCII #10 and I do think that some older text editors had problems with anything other than spaces and would flatten files.

      However, in this day and age with code completion, syntax highlighting and automated tools to control spacing, it seems to make more sense to think in indent levels rather than the number of spaces.

      Over time, I feel that using spaces will be as quaint as using plain ol’ CSS instead of a preprocessor. Of course, maybe I’m wrong. They said the same thing about manual transmissions in cars.

  8. Ivan
    Permalink to comment#

    hi!

  9. Geoff
    Permalink to comment#

    Nice tip!

    Word of warning though: Don’t be tempted to fiddle at the same time you’re fixing a bug or making code changes… Your source control will bury the ‘useful’ work in a pile of indentation changes.

    Keep indentation changes in their own ‘fix’ commit; Your co-workers will thank you…

  10. Steve
    Permalink to comment#

    The problem I have always had is that our developers on Windows, especially those using Visual Studio, use spaces. I would fix the documents in Sublime, but then it became a pain to diff files due to the whole file being changed for spacing.

    • Joshua Reilly
      Permalink to comment#

      Steve, why not change Visual Studio settings to use tabs? It has similar features, Use Tabs, Tab Width, etc.

  11. Very handy, nothing worse than “spaces vs tabs” wars in the office and git pulls…

  12. Shaimoom
    Permalink to comment#

    Hey Chris, great set of tips. How do you make those snazzy Animated GIFs in your article?

  13. Noufal Binu
    Permalink to comment#

    thumps up :) Really Great info, You are Writing awesome Resource for developers. @Chris, lot thanks.

  14. Permalink to comment#

    Nice! I’ve been on the search for a re-tabify type of solution for Sublime Text. Converting to tabs first was the missing link for me.

  15. de_hues
    Permalink to comment#

    Thanks for this article, Chris. I have purchased Sublime Text 3 to use since starting your classes in the Lodge. I have used Dreamweaver for about 16 years so I am looking for some packages that would give me some of the DW sweetness, like a code reformat to straighten up the indents quickly. Also I am still using DW for ftp. Anyone have some favorite packages to suggest.

    Also, what are some good resources for package reviews? I don’t just want to pick from the many listed without some good recommendation. I use Emmet and love it. Thanks.

  16. Permalink to comment#

    I find myself having to re-indent chunks of code frequently, either because I’ve moved a chunk of code, or because I’m trying to reuse it elsewhere. For those searching, that command is under Edit -> Line -> Reindent.

    Select a chunk of code first, and it’ll reindent that section based on its surroundings.

  17. Permalink to comment#

    This is great snippets. I regularly use sublime but never thought that it has a great featured like this. Thanks again to you Chrish.

  18. Sublime text rocks indeed. Lot of detailing on the features it gives, indeed!

  19. Its a handy tool. Actually, I discovered it when I was playing through the options in Sublime Text.
    Coda is also a good app I think.

  20. Great info. I am using sublime since 3 yrs but I didn’t noticed such a great feature. Thank you very much.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".