ESLint x Prettier, où comment bien débuter son projet JavaScript

Publié sur dev.to et medium.com

En 2022, ESLint (v8.21.0) introduit un nouveau système de configuration nommé "Flat Config". Cet article est dédié à cette édition.

Il est très aisé d’initialiser un nouveau projet JavaScript, il suffit d’un éditeur de code, d’un environnement d’exécution, d’un terminal, et c’est parti !

De même, il est tout aussi simple de gâcher un projet Web, en rendant le code illisible, inmaintenable et ainsi en générant de la dette technique...

En effet, le JavaScript étant un langage très faiblement typé, tout est très vite permis :

• Omission de points virgule en bout de ligne ;
• Utilisation de simple et double quotes dans une même portion de code ;
• Variable déclarée mais non utilisée ;
• Lignes de code trop longues...

Cette souplesse du langage est à la fois une force, mais aussi une faiblesse, qui convient de combler en définissant des bonnes pratiques en amont du développement. Ainsi un code structuré correctement favorisera le travail collaboratif, mais aussi la scalabilité du projet.

Pour ce faire, il existe deux outils incontournables, qui amèneront de la rigueur à votre projet Web : le linter et le formater.

Définitions :

Linter : outil d’analyse de code permettant de détecter les problèmes de syntaxe.

Formater : outil permettant de mettre en forme le code en le rendant lisible.

NB : J’insiste sur le fait qu’il s’agit de deux outils distincts. Bien que le linter puisse mettre en forme certaines parties du code, ce n’est pas son rôle. Cette tâche-là est réservée au formater.

Bien débuter son projet JavaScript

Pour illustrer le fonctionnement de l’un et l’autre outil, je vous propose de créer un nouveau projet JavaScript (sans framework) avec ViteJS.

npm create vite@latest my-awesome-project -- --template vanilla

Telle une recette de cuisine, installons les premières dépendances fournies avec ViteJS, puis ajoutons les nouvelles librairies, à savoir : ESLint et Prettier !

npm install --save-dev eslint @eslint/js prettier eslint-config-prettier eslint-plugin-prettier

NB : Note pour plus tard, un projet échafaudé avec ViteJS fonctionnement directement en mode module. C'est-à-dire que vos fichiers .js sont implicitement des fichiers .mjs. De même, il faudra explicitement nommer vos fichiers .cjs pour écrire avec la syntaxe CommonJS.

Une fois les dépendances du linter et du formater correctement installées, il faut encore créer leurs fichiers de configuration respectifs : eslint.config.js et prettier.config.js

NB : Les fichiers de configuration ESLint et Prettier peuvent prendre plusieurs formes, dont les suivantes : .eslintrc.js, .eslintrc.cjs, .eslintrc.json, .eslintrc.yaml, .prettierrc, .prettierrc.json, .prettierrc.yaml, .prettierrc.js, prettier.config.cjs ou encore .prettierrc.toml.

Configuration du Linter

Commençons par mettre en oeuvre le linter, afin de l’utiliser dans le cadre de notre nouveau projet.

Voici une première forme du fichier eslint.config.js :

import globals from 'globals';
import js from '@eslint/js';

export default [
  {
    files: ['**/*.js', '**/*.jsx']
  },
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node
      }
    }
  },
  js.configs.recommended,
  {
    rules: {
      'no-console': 'warn'
    }
  }
];

Cette première configuration suffit à l’exécution d’ESLint depuis un nouveau terminal pour contrôler la syntaxe des fichiers JavaScript : npx eslint [file|dir]

Je vous conseille d’inscrire cette exécution en tant que script de votre package.json : npm run lint

{
  "name": "my-awesome-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint"
  },
  "devDependencies": {
    "@eslint/js": "^9.5.0",
    "eslint": "^9.5.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.1.0",
    "prettier": "^3.3.0",
    "vite": "^5.2.0"
  }
}

En ajoutant une instruction console.log() dans un fichier .js de votre projet, vous devriez avoir le résultat suivant à l'issue de l'invocation du linter.

/home/dmnchzl/my-awesome-project/counter.js
  5:5  warning  Unexpected console statement  no-console

✖ 1 problem (0 errors, 1 warning)

Configuration de Prettier

Passons maintenant à la mise en oeuvre du formater en éditant le fichier prettier.config.js :

export default {
  arrowParens: 'avoid',
  printWidth: 120,
  semi: true,
  singleQuote: true,
  trailingComma: 'none'
};

NB : Prettier possède une configuration par défaut, ci-dessus je surcharge seulement les paramètres dont je souhaite disposer pour mon projet.

À l’instar d’ESLint, il suffit maintenant d’exécuter Prettier (npx prettier --write [file|dir]) afin de mettre en forme les fichiers JavaScript.

Il est également possible de sauvegarder un nouveau script dans votre package.json : npm run format

{
  "name": "my-awesome-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint",
    "format": "prettier --write \"**/*.{js,jsx}\""
  },
  "devDependencies": {
    "@eslint/js": "^9.5.0",
    "eslint": "^9.5.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.1.0",
    "prettier": "^3.3.0",
    "vite": "^5.2.0"
  }
}

ESLint x Prettier

Dernière étape, interfacer les deux outils ! C’est-à-dire contrôler la syntaxe du formater depuis le linter.

Pour cela, il suffit d’ajouter la configuration de Prettier, dans les règles ESLint (sans oublier d’activer le plugin) :

import globals from 'globals';
import js from '@eslint/js';
import prettierRecommended from 'eslint-plugin-prettier/recommended';

export default [
  {
    files: ['**/*.js', '**/*.jsx']
  },
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node
      }
    }
  },
  js.configs.recommended,
  prettierRecommended,
  {
    rules: {
      'no-console': 'warn',
      'prettier/prettier': [
        'warn',
        {
          arrowParens: 'avoid',
          printWidth: 120,
          semi: true,
          singleQuote: true,
          trailingComma: 'none'
        }
      ]
    }
  }
];

Et voilà ! Dorénavant ESLint, est capable d’alerter dès que le format de Prettier n’est pas respecté.

Essayez donc de supprimer un ou plusieurs point-virgules en bout de ligne, ou bien d’indenter vos lignes de manière désorganisée...

/home/dmnchzl/my-awesome-project/counter.js
  2:18  warning  Insert `;`                      prettier/prettier
  3:22  warning  Replace `(count)` with `count`  prettier/prettier
  4:20  warning  Insert `;`                      prettier/prettier
  5:46  warning  Insert `;`                      prettier/prettier
  6:4   warning  Insert `;`                      prettier/prettier
  7:67  warning  Insert `;`                      prettier/prettier
  8:16  warning  Insert `;`                      prettier/prettier

Vous savez maintenant que la rigueur d’un projet Web ne vient pas seul, et qu’elle repose également sur de nombreux outils, dont le linter et le formater.

Pour aller plus loin, je vous invite à installer les extensions ESLint et Prettier, en fonction de votre éditeur de code favori (Visual Studio Code pour ma part). Ainsi, vous bénéficierez de fonctionnalités supplémentaires, telles que la coloration syntaxique en cas de non-respect des règles de linting, ou encore pour mettre en forme automatiquement le code à l’enregistrement du fichier.

Enjoy 👍