Indentation – Convention de codage JavaScript (Épisode 2)

6 min, 1071 mots

L’indentation c’est quoi ?

En informatique, on utilise l’indentation pour hiérarchiser les instructions en plusieurs niveaux.

L’indentation te permet de structurer ton code pour le rendre plus lisible. Regarde par toi-même. En haut, un code bien indenté tiré du code source de react-native. En bas, le même code non indenté.

if (Platform.OS === 'ios') { 
  if (typeof type !== 'undefined') { 
    console.warn('Alert.alert() with a 5th "type" parameter is deprecated and will be removed. Use AlertIOS.prompt() instead.'); 
    AlertIOS.alert(title, message, buttons, type); 
    return; 
  } 
  AlertIOS.alert(title, message, buttons); 
} else if (Platform.OS === 'android') { 
  AlertAndroid.alert(title, message, buttons,options); 
}
if (Platform.OS === 'ios') { 
if (typeof type !== 'undefined') { 
console.warn('Alert.alert() with a 5th "type" parameter is deprecated and will be removed. Use AlertIOS.prompt() instead.'); AlertIOS.alert(title, message, buttons, type);
return;
}
AlertIOS.alert(title, message, buttons);
} else if (Platform.OS === 'android') {
AlertAndroid.alert(title, message, buttons,options);
}

Mais l’indentation n’est pas qu’esthétique. Pour certains langages, l’indentation est obligatoire. C’est l’indentation et non les parenthèses qui définissent les blocs de code. Regarde cet exemple tiré de Wikipedia :

// C
int factorielle(int n) { 
    if (n < 2) {
        return 1; 
    } else { 
        return n * factorielle(n - 1); 
    } 
}
# Python
def factorielle(n): 
    if n < 2:
        return 1 
    else: 
        return n * factorielle(n - 1)

L’indentation se définit donc par le nombre d’espaces ou de tabulations utilisés à chaque niveau.

On retrouve principalement 3 types d’indentation :

  • Une indentation composée de 2 espaces
  • Une indentation composée de 4 espaces
  • Une indentation composée d’une tabulation

Tu retrouveras ces 3 types d’indentation sur des projets JavaScript. Il faut donc que tu prennes soin de respecter l’indentation du projet auquel tu vas contribuer.

A titre d’exemple :

  • JQuery impose pour ses projets l’indentation par tabulation
  • Bower utilise l’indentation composée de 2 ou 4 espaces
  • Vue.js utilise l’indentation composée de 2 espaces

Quel choix d’indentation pour ton projet JavaScript ?

Maintenant que tu sais ce qu’est une indentation et les différents choix qui s’offrent à toi, tu te demandes sûrement quel style d’indentation choisir : la tabulation, 2 ou 4 espaces ?

Bien entendu, le choix te revient. Ce n’est qu’une question de confort. Tu trouveras sur internet toutes sortes d’arguments pour l’un ou l’autre choix.

Pour ma part, j’ai fait le choix de 2 espaces. En voici mes raisons :

Maintenant, il faut savoir que beaucoup de développeurs ne veulent pas s’embêter avec les espaces et utilisent la tabulation. Il suffit alors de paramétrer son éditeur de texte pour qu’il comprenne qu’une tabulation doit être remplacée à la volée par deux espaces.

Pour ma part, j’utilise l’éditeur Vim. J’écrirai prochainement (si tu en fais la demande en commentaire) comment paramétrer Vim pour gérer l’indentation correctement.

L’indentation avec ESLint

Maintenant que tu as fait ton choix de type d’indentation, tu peux paramétrer ESLint pour qu’il prenne en compte ta règle d’indentation. (Voir mon article pour installer ESLint).

Le premier paramètre de ta règle est toujours le niveau d’erreur à soulever (off, warn, error). Si tu ne souhaites pas de règle sur l’indentation, il te suffit de mettre :

"indent": ["off"]

Je te conseille de soulever une erreur. Ce qui t’obligera à garder un code cohérent.

Le deuxième paramètre de ta règle est ton style d’indentation. Il prend en valeur soit “tab” pour la tabulation. Soit un chiffre correspondant au nombre d’espace souhaité pour l’indentation.

"indent": ["error", 2]

La règle indent accepte un troisième paramètre qui est un objet comportant pleins d‘options pour l’indentation que tu retrouveras sur le site d’ESLint.

Voici la règle proposée par Airbnb, que j’utilise :

indent: ['error', 2, { 
  SwitchCase: 1, 
  VariableDeclarator: 1, 
  outerIIFEBody: 1, 
  // MemberExpression: null, 
  // CallExpression: { 
  // parameters: null, 
  // }, 
  FunctionDeclaration: { 
    parameters: 1, 
    body: 1 
  }, 
  FunctionExpression: { 
    parameters: 1, 
    body: 1 
  } 
}]

Comme on le voit, Airbnb propose une indentation basée sur 2 espaces. Et voici l’explication des deux premiers paramètres :

SwitchCase :

Définir le niveau d’ indentation pour les clauses contenues dans l’instruction switch. Il prend en paramètre un nombre qui est le multiplicateur de l’indentation. Si vous avez choisi une indentation de 2 espaces et que votre SwitchCase est à 2, vous aurez alors une indentation de 4 espaces. 2 fois 2 espaces.

/*eslint indent: ["error", 2, { "SwitchCase": 1 }]*/

switch(a){ 
  case "a": break; 
  case "b": break; 
}

/*eslint indent: ["error", 2, { "SwitchCase": 1 }]*/ 

switch(a){
  case "a": break;
  case "b": break; 
}

VariableDeclarator

Comme pour SwitchCase, il définit le niveau d’indentation pour les déclarations de variables qui se feraient sur plusieurs lignes.

/*eslint indent: ["error", 2, { "VariableDeclarator": 1 }]*/ 
/*eslint-env es6*/ 

var a, 
    b, 
    c; 
let a, 
    b, 
    c; 
const a = 1,
      b = 2,
      c = 3;

/*eslint indent: ["error", 2, { "VariableDeclarator": 1 }]*/ 
/*eslint-env es6*/ 

var a, 
  b, 
  c; 
let a, 
  b, 
  c; 
const a = 1, 
  b = 2, 
  c = 3;

On le voit, ESLint est vraiment puissant car paramétrable de façon assez précise. Alors je le rappelle, ces conventions de codage ne sont pas obligatoires pour que le langage soit interprété. C’est uniquement pour harmoniser l’ensemble du code et le rendre cohérent à la lecture pour un humain.

Petite astuce de la fin

Généralement, tu vas faire en sorte qu’ESLint t’alerte de tes erreurs en même temps que tu codes. Mais si jamais tu récupères un code vraiment mal indenté et que tu aimerais remettre en ordre, sache qu’ESLint peut gérer ça pour toi.

Il te suffit de lancer ESLint sur ton ficher et d’ajouter le paramètre fix.

$ ./node_modules/.bin/eslint ./index.js --fix

Cette option demande à ESLint de corriger automatiquement les erreurs rencontrées. ESLint n’est pas capable de tout corriger mais l’indentation est dans ses capacités.

C’en est fini pour l’indentation, notre première règle de codage JavaScript de notre série. J’espère que ça t’a aidé et que tu vas te discipliner à indenter correctement ton code, en fonction de la convention que tu auras choisi.


Série : Convention de codage JavaScript

Épisodes :