Comment utiliser ESLint avec le guide de style JavaScript d’Airbnb

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 depuis devenu 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 facile à maintenir en appliquant diverses règles de style sur les indentations, les commentaires, la longueur de ligne maximale, les conventions de dénomination des variables, les guillemets et les définitions de fonctions. Pour configurer le guide de style Airbnb dans un projet JavaScript, vous devez utiliser un outil de linting comme ESLint.

Installer ESLint

ESLint est un outil de filtrage JavaScript open source qui aide les développeurs à écrire du code propre en trouvant et en résolvant les problèmes. Il peut détecter des problèmes dans votre code comme des erreurs de syntaxe, des paramètres non valides et des variables indéfinies. Lorsque vous exécutez ESLint avec la balise – -fix , il identifie et corrige automatiquement tous les problèmes réparables 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


Initialisez ensuite ESLint.

npx eslint --init


Vous serez invité à poser 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 selon votre projet jusqu’à ce que vous rencontriez l’invite suivante.

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


Répondez ensuite comme suit.

> Use a popular style guide


Sélectionnez le guide de style Airbnb pour l’invite suivante.

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


Enfin, installez les dépendances requises en sélectionnant « Oui » dans 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 fichier de configuration .eslintsrc.json .

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

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


Exécution d’ESLint dans package.json

Ajoutez un script dans le fichier package.json pour exécuter ESLint.

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


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

npm run lint


Vous pouvez également ajouter un script pour résoudre les problèmes dans le code à l’aide de l’ indicateur –fix .

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


L’exécution de npm run lint:fix sur le terminal résoudra automatiquement tous les problèmes que le linter peut résoudre.

Activer le peluchage lors de l’enregistrement dans le code VS

L’exécution d’un script chaque fois que vous voulez pelucher votre code peut devenir fastidieuse. Suivez les étapes ci-dessous pour activer le peluchage lors de l’enregistrement dans VS Code.

1. Accédez à 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 > Préférences > Paramètres ou en appuyant sur Ctrl +,).
4. Dans l’éditeur de paramètres, recherchez « code actions on save ».
5. Cliquez sur « Modifier dans settings.json » et ajoutez les paramètres suivants au fichier settings.json .

{
 "editor.codeActionsOnSave": {


    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript"],
  "eslint.run": "onSave",
}


Cela permet à l’extension ESLint de corriger automatiquement votre code lorsque vous enregistrez.

Avantages de l’utilisation d’un guide de style

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