Showing Indentation, Spaces, Tabs (Invisibles) in Various Editors

Invisibles are the characters that are in your editor anyways, but they are usually not displayed with anything but empty space or simply completely invisible, like line breaks. Showing invisibles in Vi or Vim can easily be done by changing the vim config with the list and listchars properties. Other editors have config files or an easy to use UI like Atom or Visual Studio Code.

via GIPHY

Displaying Invisible Characters in Vim

To enable this, either paste the lines into a running vim editor or edit your config at /home/$USER/.vimrc. For nvim use: /home/$USER/.config/nvim/init.vim:

:set listchars=eol:⏎,tab:>-,trail:·,extends:>,precedes:<
:set list

This will start showing a greater than character > and then fill dashes - until the indentation stops.

Displaying Invisible Characters in VS Code

In the "User Settings" you can find the setting called "Render Whitespaces"

Displaying Invisible Characters in Atom

To display spaces, tabs and linebreaks in Atom, you'll need to go to "Settings" -> "Editor" and then scroll down until you find the "Show Invisibles" option.

Displaying Invisible Characters in Sublime Text

In Sublime you can set the following config line:

"draw_white_space": "all",

Why show Invisibles at all?

I needed to enable showing invisibles on a server recently, because I had edited a file and got a python warning about inconsistent indentation (mixed tabs and spaces) so I needed to know which line was indented in which way.

Typical Python error:

  File "py-watch-script.py", line 17
    print(r2)
            ^
TabError: inconsistent use of tabs and spaces in indentation

Other files are relatively sensitive to indentation like kubernetes or docker-compose files (or all other YAML files for that matter, which is why they should all be shot and converted to something sensible).

via GIPHY