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 une variété de styles règles 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 JavaScript open source outil de charpie 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 non valides et des variables indéfinies. Lorsque vous exécutez ESLint avec le
- -réparer tag, 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é :
? Comment souhaitez-vous utiliser EsLint ?
Sélectionnez cette option :
> Pour vérifier la syntaxe, trouver les problèmes et appliquer le style de code
Répondez aux questions suivantes selon votre projet jusqu'à ce que vous rencontriez l'invite suivante.
? Comment souhaitez-vous définir un style pour votre projet ?
Répondez ensuite comme suit.
> Utilisez un guide de style populaire
Sélectionnez le guide de style Airbnb pour l'invite suivante.
? Quel guide de style souhaitez-vous suivre ?
> Airbnb:
Enfin, installez les dépendances requises en sélectionnant "Oui" dans l'invite suivante.
Une fois l'installation terminée, vous devriez avoir un .eslintsrc.json fichier à 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 .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 règles.
{
"prolonge": [
"plugin: réagir/recommandé",
"airbnb"
],
"règles": {
"max-len": ["erreur", { "code": 80 }]
}
}Exécution d'ESLint dans package.json
Ajouter un script dans le package.json fichier pour exécuter ESLint.
"scénarios": {
"peluche": "eslint"
}
Exécutez le script lint pour vérifier les éventuelles erreurs de lint en exécutant cette commande.
npm exécuter des peluches
Vous pouvez également ajouter un script pour résoudre les problèmes dans le code à l'aide de la --réparer drapeau.
"scénarios": {
"peluche": "eslint",
« charpie: réparer »: "npm run lint -- --fix"
},
En cours npm run lint: correction 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.
- Allez dans l'onglet "Extensions" sur le côté gauche de la fenêtre VS Code.
- Rechercher le Extension ESLint et installez-le.
- Une fois l'extension installée, ouvrez les paramètres de VS Code (Fichier > Préférences > Paramètres ou en appuyant sur Ctrl +,).
- Dans l'éditeur de paramètres, recherchez "code actions on save".
- Cliquez sur "Modifier dans settings.json" et ajoutez les paramètres suivants au paramètres.json déposer.
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": vrai
},
"eslint.valider": ["javascript"],
"eslint.run": "surEnregistrer",
}
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.