Better experience with tabs

— 4 minute read

When people argue about indentation, usually there is never an argument about the accessibility of a code. People see things differently, both by eyes and brains. There are people, who have to use a tab width of 1 or even 8 characters to be able to read code.

I struggle to read code indented with two spaces. I'm not visually impaired but for me is very hard to see nesting, when indentation is too small (2 characters). With 4 characters width, I can clearly see it. It's not about how it looks, it's about how the brain works and how much time it spends to see nesting.

For most web languages indentation is only for people, not for machines. Enforcing indentation width is the same as enforcing everyone to use the same font, font-size, or syntax highlighting color scheme. No one does that. But tab width is enforced most of the time, while it's being a purely stylistic thing, that could be customized by every person for their needs.

Using tabs is to allow people, who contribute to a code base, do it more comfortable.

There are some things that could be done to improve the experience for everyone, regardless of preferred tab width.

Tab width on websites permalink

Unfortunately, tab width on most websites (including Github) is set to a browser default value: 8 characters. This is not what most people would like to see

Github: 4 character tab width in Chrome permalink

The simplest solution is to use Tab Size on GitHub. It sets tab width via CSS.

Github: any tab width in Chrome, Firefox, Opera permalink

Use extension, which allows setting custom CSS on websites, e. g. Stylus.

Add a new rule for domains:

  • github.com
  • gist.github.com
  • raw.githubusercontent.com

And the following CSS:

.tab-size[data-tab-size='2'],
.tab-size[data-tab-size='4'],
.tab-size[data-tab-size='8'],
.inline-review-comment,
.gist table.lines,
table.diff-table,
.markdown-body pre,
body > pre
{
tab-size: 4 !important;
}

Adjust tab-width to the desired width.

It's just a copy of Tab Size on GitHub extension stylesheet :)

For any website permalink

For any other websites, like Gitlab or Enterprise version of Github/Gitlab, use Stylus, as in the section above, but you need to figure out selectors and domain yourself.

EditorConfig permalink

EditorConfig allows having some default editor configuration shared with all contributors to a specific repository.

For tabs set indent_style, but do not set indent_size:

[*]
indent_style = tab

Prettier permalink

When enabling useTabs, also set tabWidth to 4 or the highest value your team members are using. The reason for this is Prettier converts one tab to spaces when calculating if the line of code will fit in configured printWidth.

For example, Prettier is set to tabWidth: 2, and printWidth: 80. A developer has their editor tab width set to 4 characters. A particular line of code is 5 levels of nesting deep.

Prettier will calculate available space for code as 70 characters (80 − 2 × 5). But in fact, the developer has only 60 characters (80 − 4 × 5) on a screen left due to editor tab width settings. Because Prettier calculated available space as bigger than it is, a long line of code most likely will be wrapped on the second line in the developer's editor.

I recommend setting tabWidth to 4 or higher value. And increase printWidth to gain some space, which is taken by bigger indentation.

I found that the following Prettier config works well for many teams:

{
useTabs: true,
tabWidth: 4,
printWidth: 100,
}

Closing words permalink

Be mindful of other people. An indentation is a styling option, which helps read code. Let people change it!