ESLint + plugins TypeScript : guide complet avec exemples

Introduction : Que sont ESLint et les plugins TypeScript et pourquoi en avez-vous besoin ?

Dans le développement web moderne, TypeScript est devenu le standard de facto pour créer des applications évolutives et fiables. Cependant, même le compilateur TypeScript le plus strict ne peut pas détecter toutes les erreurs logiques, les incohérences stylistiques ou les bogues potentiels qui peuvent survenir lors de l'écriture du code. C'est là qu'intervient ESLint — un puissant linter pour JavaScript qui, grâce à des plugins spéciaux, s'adapte pour fonctionner avec TypeScript.

ESLint + plugins TypeScript ne constituent pas une bibliothèque distincte au sens traditionnel (comme Lodash, par exemple), mais plutôt un écosystème d'outils. Le package principal — eslint — est responsable de l'analyse du code, tandis que les plugins @typescript-eslint/eslint-plugin et @typescript-eslint/parser ajoutent la prise en charge de la syntaxe TypeScript et fournissent des centaines de règles spécifiques à TypeScript.

Pourquoi est-ce nécessaire ?

• Détection précoce des erreurs : Le linter peut repérer des problèmes potentiels que le compilateur TypeScript laisserait passer (par exemple, des variables inutilisées, une mauvaise utilisation des promesses, des problèmes de types non syntaxiques).
• Style de code uniforme : Dans une équipe de développeurs, le linter garantit le respect d'un style de code cohérent (indentation, guillemets, points-virgules), rendant le code plus lisible et prévisible.
• Correction automatique : De nombreuses règles ESLint prennent en charge l'auto-correction (--fix), ce qui permet de formater automatiquement le code et de corriger les erreurs simples.
• Intégration avec l'IDE : La plupart des éditeurs de code modernes (VS Code, WebStorm) offrent une prise en charge intégrée d'ESLint, permettant de voir les erreurs et les avertissements directement pendant l'écriture du code.

Sur le site pythonlib.ru, nous nous efforçons de fournir les guides les plus utiles. Cet article sera votre référence complète pour configurer et utiliser ESLint avec TypeScript.

Installation d'ESLint et des plugins TypeScript

L'installation se fait via le gestionnaire de packages npm (ou yarn, pnpm). Il est supposé que vous avez déjà un projet avec un fichier package.json et que TypeScript (typescript) est installé.

Exécutez dans le terminal à la racine de votre projet :

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

Détaillons ce que nous avons installé :

• eslint — le cœur du linter.
• @typescript-eslint/parser — un analyseur qui permet à ESLint de comprendre la syntaxe TypeScript (y compris les génériques, les décorateurs, les types, etc.).
• @typescript-eslint/eslint-plugin — un plugin qui contient un ensemble de règles spécifiques à TypeScript (par exemple, @typescript-eslint/no-unused-vars au lieu du standard no-unused-vars).

Supplémentaire (recommandé) :

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

Cela permettra d'intégrer ESLint avec Prettier (un formateur de code) et d'éviter les conflits entre eux.

Démarrage rapide : configuration et premier lancement

Après l'installation, vous devez créer un fichier de configuration. Le moyen le plus simple est de le générer à l'aide de l'assistant intégré d'ESLint :

npx eslint --init

Plusieurs questions vous seront posées. Choisissez :

• Comment souhaitez-vous utiliser ESLint ? — To check syntax, find problems, and enforce code style
• Quel format de module utilisez-vous ? — JavaScript modules (import/export)
• Quel framework ? — None of these (ou React/Vue/Angular, si vous en utilisez un)