Le guide de style Airbnb est un ensemble de directives pour écrire un code propre et cohérent. Il a été publié en 2012 et est devenu depuis l’un des guides de style les plus populaires pour les projets JavaScript.


Il fournit un ensemble de directives pour écrire un code cohérent et facile à maintenir en appliquant une variété de règles de style sur les indentations, les commentaires, la longueur maximale des lignes, les conventions de dénomination des variables, les guillemets et les définitions de fonctions. Pour mettre en place le guide de style Airbnb dans un projet JavaScript, vous devez utiliser un outil de linting comme ESLint.

Installer ESLint

ESLint est un outil open-source de linting JavaScript qui aide les développeurs à écrire du code propre en trouvant et en corrigeant les problèmes. Il peut détecter des problèmes dans votre code comme des erreurs de syntaxe, des paramètres invalides et des variables non définies. Lorsque vous exécutez ESLint avec l’option -fixe il identifie et corrige automatiquement tous les problèmes corrigibles dans le code, ce qui vous fait gagner du temps.

Vous pouvez utiliser ESLint pour appliquer des guides de style comme le guide de style Airbnb.

Pour commencer, exécutez la commande suivante dans le terminal pour installer ESLint en tant que dépendance de développement :

 npm install --save-dev eslint eslint-config-airbnb

Ensuite, initialisez ESLint.

 npx eslint --init

Vous serez invité à répondre à des questions sur votre projet. Lorsque vous y êtes invité :

 ? How would you like to use EsLint?

Sélectionnez cette option :

 > To check syntax, find problems and enforce code style

Répondez aux questions suivantes en fonction de votre projet jusqu’à ce que vous tombiez sur l’invite suivante.

 ? How would you like to define a style for your project?

Répondez alors comme suit.

 > Use a popular style guide

Sélectionnez le guide de style Airbnb pour le prochain message.

 ? Which style guide do you want to follow?
> Airbnb: <https://github.com/airbnb/javascript>

Enfin, installez les dépendances requises en sélectionnant « Oui » à l’invite suivante.

Une fois l’installation terminée, vous devriez avoir un fichier .eslintsrc.json à la racine de votre dossier.

Personnalisation du guide de style Airbnb

Le guide de style Airbnb permet la personnalisation. Vous pouvez ajouter des règles supplémentaires ou remplacer les règles existantes dans le menu déroulant. .eslintsrc.json Fichier de configuration.

Par exemple, pour autoriser un maximum de 80 caractères par ligne, vous pouvez ajouter cette règle dans la section des règles.

 {
  "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],
  "rules": {
    "max-len": ["error", { "code": 80 }]
  }
}

Exécution d’ESLint dans le package.json

Ajout d’un script dans le fichier package.json pour exécuter ESLint.

 "scripts": {
   "lint": "eslint"
}

Exécutez le script lint pour vérifier les erreurs de linting en exécutant cette commande.

 npm run lint

Vous pouvez également ajouter un script pour corriger les problèmes dans le code en utilisant la commande –fixe drapeau.

 "scripts": {
    "lint": "eslint",
    "lint:fix": "npm run lint -- --fix"
  },

Exécution de npm run lint:fix sur le terminal corrigera automatiquement tous les problèmes que le linter peut corriger.

Activer le linting sur l’enregistrement dans le code VS

Exécuter un script à chaque fois que vous voulez linting votre code peut devenir fastidieux. Suivez les étapes ci-dessous pour activer le linting à la sauvegarde dans VS Code.

  1. Allez dans l’onglet « Extensions » sur le côté gauche de la fenêtre VS Code.
  2. Recherchez l’extension ESLint et installez-la.
  3. Une fois l’extension installée, ouvrez les paramètres de VS Code (Fichier &gt ; Préférences &gt ; Paramètres ou en appuyant sur Ctrl +,).
  4. Dans l’éditeur de paramètres, recherchez « code actions on save ».
  5. Cliquez sur « Editer dans settings.json » et ajoutez les paramètres suivants au fichier settings.json fichier.
 {
 "editor.codeActionsOnSave": {
  
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript"],
  "eslint.run": "onSave",
}

Ceci permet à l’extension ESLint de corriger automatiquement votre code lorsque vous le sauvegardez.

Avantages de l’utilisation d’un guide de style

Le principal avantage de l’utilisation d’un guide de style comme celui d’Airbnb est qu’il vous aide à maintenir une base de code cohérente. Cela est utile dans une équipe car les développeurs peuvent comprendre et contribuer à la base de code facilement. Il vous aide également à appliquer les meilleures pratiques et à éviter les erreurs de codage courantes.