Spaces indentation just like tabs in VS Code

— 3 minute read

I wrote before, that tabs are more accessible as indentation than spaces. It's not always possible to convert a project to a different indentation, unfortunately. I've struggled for years in situations like this. Luckily I just discovered extension for Visual Studio Code, which helps with this problem enormously.

Stretchy Spaces extension allows changing the width of spaces which are used for indentation! For example, if the codebase has two spaces indentation, but for you, a code is more readable with four spaces wide indentation. This extension for the rescue. It doesn't change the code, rather visual appearance.

Here's how it looks like for code indented with two spaces, and target indentation width set to four spaces:

Editor window with a code, which uses two spaces indentation, but it looks like four spaces

The extension detects file indentation, calculates the difference, and adjusts letter spacing for each indentation character (space) so character takes more (or less) space on the screen. Very clever workaround! However, it leads to one problem:

Editor window with a code, which uses two spaces indentation, but it looks like four spaces. Indentation guides look broken because they are placed to match two spaces indentation

Native indentation guides are not aware of this trick. To fix that another extension is required: Guides (or any other extension for guides). Native indentation guides should be disabled.

Editor window with a code, which uses two spaces indentation, but it looks like four spaces. Indentation guides look correct

I configured Guides to behave like native ones (for your theme colors could be different):

{
"editor.renderIndentGuides": false,
"guides.active.hideOnSelection": false,
"guides.normal.color.light": "#e0e0e0",
"guides.normal.hideOnSelection": false,
"guides.sendUsagesAndStats": false,
"guides.updateDelay": 0.01,
"guides.stack.color.light": "#e0e0e0",
"guides.stack.enabled": false,
"guides.active.color.light": "#afafaf"
}

Guides extensions (and other similar extensions) work with Stretchy Spaces because they use the same VS Code API — decorate character cell. This API has a limitation. On empty lines there are no characters, because of that Guides can't show a guide on empty line unlike native guides:

Editor window with code. Indentation guides are not shown on an empty line

This is unfortunate, but it's something I'm willing to close my eyes on. Because value, which I receive from Stretchy Spaces is much bigger.

Stretchy Spaces also works for people, who prefers two spaces indentation, but have to work with a codebase, which uses four spaces:

Editor window with a code, which uses four spaces indentation, but it looks like two spaces