Linter & Prettier

Pourquoi utiliser un linter et un formateur de code ?

Lorsque vous travaillez sur un projet, surtout en équipe, il est crucial de maintenir une qualité et une cohérence dans le code. Les linters et les formateurs de code sont des outils qui vous aident à y parvenir :

Linter (ESLint) : Analyse statiquement votre code pour détecter des erreurs, des problèmes potentiels et des violations des conventions de style.
Formateur (Prettier) : Reformate automatiquement votre code selon des règles prédéfinies pour assurer une cohérence visuelle.

ESLint

ESLint est l'outil de linting le plus populaire pour JavaScript et TypeScript. Il permet de détecter et de corriger les problèmes dans votre code.

Installation d'ESLint

Commencez par installer ESLint et ses dépendances :

npm install eslint --save-dev
npx eslint --init

La commande eslint --init vous guidera à travers un processus interactif pour créer votre configuration. Voici un exemple de configuration :

? How would you like to use ESLint? · style
> To check syntax, find problems, and enforce code style

? What type of modules does your project use? · esm
> JavaScript modules (import/export)

? Which framework does your project use? · none
> None of these

? Does your project use TypeScript? · No / Yes
> Yes

? Where does your code run? · node
> Node

? How would you like to define a style for your project? · guide
> Use a popular style guide

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

? What format do you want your config file to be in? · JavaScript
> JavaScript

Configuration d'ESLint

Après l'initialisation, vous aurez un fichier .eslint.config.mjs dans votre projet. Vous pouvez personnaliser davantage les règles selon vos besoins :

Version récente :

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";


/** @type {import('eslint').Linter.Config[]} */
export default [
  {files: ["**/*.{js,mjs,cjs,ts}"],
   ignores: ["node_modules", "dist", "build"],
  },
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  {
    rules: {
      'eqeqeq': ['warn', 'always'],
      'indent': ['error', 2],
    },
  },
];

Ignorer des fichiers

Dans le code ci-dessus, nous avons ajouté une propriété "ignores", avec les répertoires que eslint ne doit pas analyser.

Règles personnalisées

Par défaut, ESLint utilise une configuration recommandée qui inclut les règles les plus courantes (tseslint.configs.recommended), libre à vous de l'adapter et/ou d'ajouter de nouvelles règles. Vous pouvez consulter les règles présentes ou non dans la configuration par défaut ici.

Vous avez également pu apercevoir de nouvelles règles qui ont été ajoutées dans le fichier de configuration, chaque règle a un niveau de sévérité :

Sévérités

Le niveau de sévérité permet aux développeurs de comprendre rapidement si une violation de règle peut être critique ou non pour le projet. Une sévérité de niveau avertissement est souvent associé à une mauvaise pratique qui ne creusera peu la dette technique du projet.

Sévérité	Valeur	Comportement & Utilisation
Désactivée	'off'	La règle est désactivée et ne génère pas d'erreur ou d'avertissement. Utilisé pour ignorer une règle spécifique.
Avertissement	'warn'	Génère un avertissement sans interrompre le processus de build. Utilisé pour des violations mineures, qui ne nécéssite pas de correction urgente ou immédiate.
Erreur	'error'	Génère une erreur qui peut bloquer le processus de build. Utilisé pour des règles critiques à respecter.

Voici un exemple concret de règles, avec une sévérité adaptée :

  rules: {
    'no-console': 'warn',  // Affiche un avertissement pour l'utilisation de console.log
    'no-debugger': 'error', // Affiche une erreur pour l'utilisation de debugger
    'eqeqeq': ['error', 'always'],  // Force l'utilisation de === plutôt que ==, avec une erreur
    'no-unused-vars': 'warn', // Avertit pour les variables non utilisées
    'curly': ['error', 'all'], // Génère une erreur si les accolades sont manquantes
  }

Prettier

Prettier est un formateur de code "opiniated" (avec des opinions fortes) qui impose un style cohérent à travers votre base de code.

Installation de Prettier

npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

prettier : Le formateur lui-même
eslint-config-prettier : Désactive les règles ESLint qui pourraient entrer en conflit avec Prettier
eslint-plugin-prettier : Exécute Prettier comme une règle ESLint

Configuration de Prettier

Créez un fichier .prettierrc à la racine de votre projet :

{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true
}

Intégration avec ESLint

Mettez à jour votre configuration ESLint pour intégrer Prettier :

// .eslintrc.js
module.exports = {
  // ... autres configurations
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended', // Ajoutez cette ligne
  ],
  // ...
};

Ignorer des fichiers avec Prettier

Créez un fichier .prettierignore pour exclure certains fichiers du formatage :

node_modules
dist
build
coverage

Scripts npm

Ajoutez des scripts pratiques à votre package.json pour lancer facilement ESLint et Prettier :

{
  "scripts": {
    "lint": "eslint . --ext .ts,.js",
    "lint:fix": "eslint . --ext .ts,.js --fix",
    "format": "prettier --write \"src/**/*.{js,ts}\"",
    "check-format": "prettier --check \"src/**/*.{js,ts}\""
  }
}

npm run lint : Vérifie le code avec ESLint
npm run lint:fix : Corrige automatiquement les problèmes ESLint
npm run format : Formate le code avec Prettier
npm run check-format : Vérifie si le code est bien formaté sans le modifier

VSCode Integration

Pour une expérience de développement optimale, vous pouvez configurer VSCode pour formater automatiquement votre code à la sauvegarde.

Créez un fichier .vscode/settings.json à la racine de votre projet :

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "typescript"
  ]
}

Note : Vous devrez installer les extensions VSCode pour ESLint et Prettier pour profiter de cette configuration.

Bien débuter avec ESLint et Prettier

Voici quelques conseils pour bien utiliser ESLint et Prettier dans votre projet :

Commencez tôt : Intégrez ESLint et Prettier dès le début du projet pour éviter d'avoir à reformater une grande base de code plus tard.
Commencez simple : Adoptez d'abord une configuration standard comme Airbnb ou Standard, puis adaptez les règles progressivement selon les besoins de votre équipe.
Automatisez : Configurez vos outils pour formater automatiquement le code, par exemple à la sauvegarde dans votre éditeur ou avant les commits avec Husky (que nous verrons dans le prochain chapitre).
Documentation : Documentez vos choix de configuration et assurez-vous que tous les membres de l'équipe comprennent pourquoi certaines règles sont en place.

En suivant ces pratiques, vous obtiendrez une base de code plus propre, plus cohérente et plus facile à maintenir.

Pourquoi utiliser un linter et un formateur de code ?​

ESLint​

Installation d'ESLint​

Configuration d'ESLint​

Ignorer des fichiers​

Règles personnalisées​

Sévérités​

Prettier​

Installation de Prettier​

Configuration de Prettier​

Intégration avec ESLint​

Ignorer des fichiers avec Prettier​

Scripts npm​

VSCode Integration​

Bien débuter avec ESLint et Prettier​