Indentez votre HTML

Depuis que je développe avec AngularJS, j'ai pris l'habitude d'indenter mon HTML et ses attribut de façon un peu particulière, ce qui a pour effet de souvent choquer les personnes qui lisent mon markup. Pourtant, j'ai d'excellents arguments pour vous inciter à passer vous aussi à ce style d'indentation. Prenons comme exemple une soupe de html pleine d'attributs et de directives.

<div class="kikoo lol" style="background: red" ng-class="{'bla': truc, 'blo': bidule}" my-custom-directive ng-click="click()">  
  <p>Pwet</p>
</div>

Ah oui hein, c'est de la soupe, mais pourtant, on en voit beaucoup de ce genre de chose. Alors moi je nettoie tout ça comme ça :

<div  
  class="kikoo lol"
  style="background: red"
  ng-class="{
    'bla': truc,
    'blo': bidule
  }"
  my-custom-directive
  ng-click="click()">
  <p>Pwet</p>
</div>

Ça prend plus de place en hauteur, c'est certain mais :

on voit très clairement la liste de tous les attributs de l'élément,
l'outil de versionning (git) galère beaucoup moins en cas de conflit.

Imaginons que quelqu'un décide soudain de remplacer le magnifique fond rouge par un fond un peu moins joli, bleu. Dans le premier cas, nous aurons le diff suivant :

@@ -1,3 +1,3 @@
-<div class="kikoo lol" style="background: red" ng-class="{'bla': truc, 'blo': bidule}" my-custom-directive ng-click="click()">
+<div class="kikoo lol" style="background: blue" ng-class="{'bla': truc, 'blo': bidule}" my-custom-directive ng-click="click()">
   <p>Pwet</p>
 </div>

Oui, toute la ligne est remplacée. Du coup, en cas de gestion de conflit manuel, ça devient un peu relou pour retrouver quels sont les caractères qui ont été modifiés.

Alors qu'avec ma méthode :

@@ -1,6 +1,6 @@
 <div
   class="kikoo lol"
-  style="background: red"
+  style="background: blue"
   ng-class="{
     'bla': truc,
     'blo': bidule

C'est plus clair non ?

Menu