Retour aux articles

Configurer ESLint + Prettier + Airbnb pour vos projets JavaScript

  • tutoriel
  • javascript
  • vscode
  • eslint
  • prettier
3 minutesmardi 02 février 2021

Dans cet article, nous allons apprendre à configurer un linter pour vos projets JavaScript afin d'améliorer la qualité de votre code.

Ecran d'ordinateur avec du code JavaScript

Qu'est-ce qu'un linter ?

Un linter est un petit plugin qui va venir vous "épauler" lorsque vous codez. Son rôle est simple : vous avertir lorsque votre code ne respecte pas certaines règles syntaxiques. Il existe différents linters, parmi les plus connus, il y a ESLint. Ce linter peut également être associé à un formateur de code comme Prettier : dès que vous enregistrez votre fichier, votre code se formatera automatiquement en fonction des règles de votre linter et de votre formateur.

Pourquoi utiliser un linter pour vos projets ?

Avoir un linter peut se révéler très utile dans le cas où vous travaillez à plusieurs sur un projet et que vous souhaitez avoir des règles syntaxiques spécifiques. Ces règles seront alors définies dans des fichiers de configuration à la racine de votre projet. Ainsi, vous aurez tous la même syntaxe pour tous vos fichiers.

Mettre en place ESLint, Prettier & Airbnb dans un projet

Dans un premier temps, assurez-vous que les extensions Prettier et ESLint soient installées et activées sur Visual Studio Code.

Ensuite, on peut installer les packages nécessaires au bon fonctionnement d'ESLint et de Prettier pour votre projet.

npm install -D eslint prettier eslint-config-prettier eslint-plugin-prettier
# or
yarn add -D eslint prettier eslint-config-prettier eslint-plugin-prettier

Une fois que c'est fait, on peut commencer à configurer ESLint en éxécutant cette commande :

npx eslint --init

Une série de question va vous être posée afin de configurer votre linter. Les choix que vous ferez varieront d'un projet à l'autre. Veillez à bien sélectionner To check syntax, find problems, and enforce code style au début de la configuration. Vous aurez alors l'occasion d'utiliser un style guide populaire comme celui d'Airbnb par exemple. N'oubliez pas d'installer les packages supplémentaires lorsque cela vous est demandé. Je vous conseille également d'utiliser le format JSON pour vos fichiers de configuration.

Lorsque la configuration est terminée, un fichier .eslintrc.json a été créé. Vous pouvez le modifier comme ceci :

// ...
"extends": [
    // ...
    "plugin:prettier/recommended"
],
"rules": {
    "prettier/prettier": "error",

    // Ici vous définissez vos règles de syntaxe
    // Retrouvez les règles sur la documentation d'ESLint
    "no-unused-vars": "warn",
    "no-console": "off",
    "func-names": "off",
    "no-process-exit": "off",
    "object-shorthand": "off",
    "class-methods-use-this": "off",

    // Seulement si c'est un projet React
    "react/jsx-filename-extension": [1, {"extensions": [".js", ".jsx"]}],
    "react/jsx-one-expression-per-line": "off"
}

Vous pouvez maintenant créer un fichier .prettierrc.json qui correspondra au fichier de configuration de votre formateur de code (Prettier) :

// Retrouvez les règles sur la documentation de Prettier
{
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true
}

Pour finir, dans les paramètres de Visual Studio Code, rajoutez cette configuration :

"editor.codeActionsOnSave": {
  "source.fixAll": true
}

Félicitations ! Vous avez configurer ESLint + Prettier + Airbnb pour votre projet.

Note : n'hésitez pas à créer vos propres fichiers de configuration avec vos propres règles, vous n'êtes pas obliger d'utiliser les miens !

A bientôt 👋

Partagez cet article

  • Logo Twitter
  • Logo Facebook
  • Logo LinkedIn
  • Logo Email