Culture dev video tutorial: Indentation: Space or Tab?

When doing word processing it is not uncommon to use indentation to better organize your content and allow a better visual understanding of the structure of the document. This typological process will also be useful in programming to simplify understanding. For example, this HTML code is difficult to read without indentation:

<section>
<h1>Ceci est un titre</h1>
<ul>
<li><strong>PHP</strong>, PSR "Code MUST use 4 spaces for indenting."</li>
<li><strong>JavaScript</strong>, Prettier 2 espaces</li>
<li><strong>Python</strong>, PEP8 "Use 4 spaces per indentation level."</li>
<li><strong>Golang</strong>, Tab</li>
<li><strong>Makefile</strong>, Tab</li>
</ul>
<p class="small">
<a href="http://www.opimedia.be/DS/languages/tabs-vs-spaces/">The Bible of Tabs vs Spaces Holy War</a>
</p>
</section>

And with indentation things are easier to understand with an easier parent/child relationship to establish.

<section>
    <h1>Ceci est un titre</h1>
    <ul>
        <li><strong>PHP</strong>, PSR "Code MUST use 4 spaces for indenting, not tabs."</li>
        <li><strong>JavaScript</strong>, Prettier 2 espaces</li>
        <li><strong>Python</strong>, PEP8 "Use 4 spaces per indentation level."</li>
        <li><strong>Linux kernel</strong>, <a href="https://www.kernel.org/doc/html/v4.10/process/coding-style.html">8 espaces</a></li>
        <li><strong>Golang</strong>, Tab</li>
        <li><strong>Makefile</strong>, Tab</li>
    </ul>
    <p class="small">
        <a href="http://www.opimedia.be/DS/languages/tabs-vs-spaces/">The Bible of Tabs vs Spaces Holy War</a>
    </p>
</section>

This is also true when writing algorithms allowing better differentiation of blocks (loops, conditions, functions, etc.)

// Sans indentation 
for(let i = 0; i < 8; i++) { 
for(let j =0; j < 8; j++) { 
if((i + j) % 2 === 0) { 
console.log({i, j}) 
} 
} 
}

// Avec
for(let i = 0; i < 8; i++) { 
  for(let j =0; j < 8; j++) { 
    if((i + j) % 2 === 0) {
      console.log({i, j}) 
    }
  } 
}

But there is the problem of the character to use for this indentation.

tab

In word processing software, the tabulation character allows the cursor to advance to a specific position. Also, it seems logical to use this same character to represent a level of indentation in our code.
But in our source code there are no tab stops and editors have to make a choice about the size of the tab character. Also, a code will not necessarily have the same appearance depending on the editor used. This also means that we cannot use this character to manage the alignment and we will then have to use spaces.

Mixing tabs and spaces

We find ourselves having to combine tabs (for indentation) and spaces (for alignment) on the same line.

Spaces

In order to avoid this mixture of tabs / spaces and to ensure consistent rendering of the code, some developers have chosen to use several spaces to manage a level of indentation.

Identification of 4 spaces

This approach allows for consistent rendering and avoids having to juggle multiple characters for indentation and alignment, but also has several drawbacks.

  • You have to use several characters to create a level of indentation (the editors allow you to do this automatically by pressing the Tab key)
  • Increases the weight of source files (not a problem with the size of current storage systems)
  • Fixed size spaces cause accessibility issues
    • You cannot customize the rendering according to your preferences (which is possible with a tab)
    • On braille keyboards, one level of indentation consumes more characters

What to choose?

The 2 approaches therefore have significant advantages and disadvantages and it is not easy to decide between these 2 solutions, which very often leads to a lot of discussion which rarely leads to a consensus. Fortunately for us, most programming languages ​​have conventions that will impose a choice on us and allow for better consistency in development practices. To name a few:

  • PHPThe PSR says “Code MUST use 4 spaces for indenting, not tabs.”
  • JavaScriptthe Prettier code formatter uses 2 spaces by default
  • PythonPEP8 says “Use 4 spaces per indentation level.”
  • linux-kernel8 spaces
  • golangthe formatter forces the use of tab

As we can see the conventions change according to the language but rest assured, you will not have to remember them because the editors are now smart enough to adapt their indentation method based on the type of file you are using. edit. Also, when you edit a file PHP for example, the key Tab will automatically add 4 spaces, but if you are on a file golang this will add a tab stop.