Why does indentation done in vim look different in different editors?

Question

I just used vim to edit a javascript file. My indentation in vim is set like so:

_{(source: take.ms)}

When I edit a portion of the file, in vim it looks as though the indentation is correct:

_{(source: take.ms)}

However, in SourceTree and in Sublime Text, the indentation is incorrect:

SourceTree:

_{(source: take.ms)}

Sublime Text:

Can anyone explain to me why this is happening and how I might fix it? I'm also curious which, really, is the "true" representation of the file's state.

Answer 1

There are three related settings: tabstop, softtabstop, and shiftwidth. They are not the same.

• tabstop sets the size of a tab character.
• softtabstop sets the number of spaces inserted when the <Tab> key is pressed.
• shiftwidth sets the number of spaces inserted when autoindentation is used (e.g. after typing if (foo) {<Cr>).

If expandtab isn't set, then spaces will be automatically replaced by a Tab character (0x09) as soon as the number of spaces is a multitude of tabstop. If expandtab is set, then spaces are never "expanded" to a tab character.

In your case, you only set the shiftwidth, which doesn't control the actual size of the tab characters. You either want to set tabstop to the same value as Sublime text, or you want to use space indentation by setting expandtab. If you use set list you can see if your file is using tab characters or spaces (use set nolist to disable this).

Bonus tip

In my personal opinion, you generally want to set all three settings to the same value. I use this command to quickly set all three with :TS 4:

command! -nargs=1 TS setlocal ts=<args> sts=<args> sw=<args>

Answer 2

The solution (thanks to @ceejayoz) was to set the expandtab option in my .vimrc settings, so this:

autocmd FileType javascript setlocal shiftwidth=2 tabstop=2 expandtab
autocmd FileType jsx setlocal shiftwidth=2 tabstop=2 expandtab

did the job.