Article original : How to Create Your Own ESLint Config Package

Par Leonardo Faria

ESLint est un outil puissant qui vous aide à appliquer des conventions de codage cohérentes et à garantir la qualité de votre base de code JavaScript.

Les conventions de codage sont parfois difficiles à décider, et avoir un outil qui automatise leur application aide à éviter des discussions inutiles. Garantir la qualité est également une fonctionnalité bienvenue : les linters sont d'excellents outils pour détecter les bugs, tels que ceux liés à la portée des variables.

ESLint est conçu pour être complètement configurable, vous donnant l'option d'activer/désactiver chaque règle, ou de mélanger les règles pour correspondre à vos besoins.

Avec cela à l'esprit, la communauté JavaScript et les entreprises qui utilisent JavaScript peuvent étendre la configuration originale d'ESLint. Il y a plusieurs exemples dans le registre npm : eslint-config-airbnb est l'un des plus connus.

Dans votre routine quotidienne, vous combinerez probablement plus d'une configuration, car il n'y a pas de configuration universelle. Cet article montrera comment créer votre propre dépôt de configurations, vous donnant l'option de centraliser toutes vos définitions de règles.

Créer le projet

Tout d'abord, vous devrez créer un nouveau dossier et un projet npm. Par convention, le nom du module commence par eslint-config-, comme eslint-config-test.

mkdir eslint-config-test
cd eslint-config-test
npm init

Vous aurez un fichier package.json qui ressemblera au snippet suivant :

{
  "name": "eslint-config-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Ensuite, il est temps d'ajouter vos dépendances ESLint :

npm install -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier

Les packages changeront selon vos besoins. Dans ce cas, je travaille avec des bases de code React et j'utilise Prettier pour formater mon code. La documentation mentionne que si votre configuration partageable dépend d'un plugin, vous devriez également le spécifier comme une peerDependency.

Ensuite, je vais créer un .eslintrc.js avec ma configuration - cela ressemble à ce que vous faites déjà dans vos applications :

module.exports = {
  extends: [
    'airbnb',
    'eslint:recommended',
    'plugin:import/errors',
    'plugin:react/recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:prettier/recommended',
    'prettier/react',
  ],
  plugins: [
    'react-hooks',
  ],
  rules: {
  },
};

L'objet rules stocke toute règle que vous souhaitez remplacer. Dans le snippet ci-dessus, rules est vide, mais n'hésitez pas à consulter mes remplacements. Dans le dépôt Airbnb/JavaScript, vous pouvez trouver une liste de règles remplacées par la communauté.

Créer des règles personnalisées

Il est temps de créer un .prettierrc avec vos règles personnalisées - c'est une partie délicate car Prettier et ESLint peuvent entrer en conflit sur quelques règles :

{
  "tabWidth": 2
}

Il est important de mentionner que le fichier .prettierrc doit se trouver à la racine du projet qui utilise votre package. Pour l'instant, je le copie manuellement.

L'étape suivante consiste à exporter votre configuration dans le fichier index.js :

const eslintrc = require('./.eslintrc.js');

module.exports = eslintrc;

Il est techniquement possible de créer toutes les configurations dans le fichier index.js. Mais si vous faites cela, vous n'aurez pas l'objet de configuration vérifié (insérez votre blague Inception ici).

Vous avez terminé !

Voilà ! C'est tout ce dont vous avez besoin pour démarrer votre propre package de configurations. Vous pouvez tester localement votre package de configuration en exécutant la commande suivante dans un projet JavaScript :

npm install /Users/leonardo/path/to/eslint-config-test

Gardez à l'esprit que les dépendances de votre package de configuration peuvent également être installées.

Si tout semble correct, vous pouvez publier dans le registre npm :

npm publish

Exemple complet

J'ai un projet GitHub fonctionnel montrant la configuration de cet article : eslint-config-leozera. Vous pouvez également le voir ci-dessous :

Plus d'informations sur le projet

Également publié sur mon blog. Si vous aimez ce contenu, suivez-moi sur Twitter et GitHub. Photo de couverture par Susan Holt Simpson/Unsplash.