Linters : vérification automatique du style de code — guide complet pour les développeurs

Imaginez que vous travaillez dans une équipe de cinq développeurs. L'un préfère les guillemets simples, l'autre les guillemets doubles. Le troisième met des points-virgules partout, le quatrième les évite. Le cinquième utilise quatre espaces pour les retraits, et vous, deux. Le code commence à ressembler à un patchwork, et chaque revue de code se transforme en un débat sur le formatage au lieu d'une discussion sur l'architecture. Une situation familière ?

C'est pour résoudre ces problèmes que les linters ont été inventés : des outils pour vérifier automatiquement le code pour la conformité à certaines règles de style. Ils permettent non seulement de gagner du temps sur la révision du code, mais aussi de trouver des erreurs potentielles avant même le lancement du programme.

Qu'est-ce qu'un linter et pourquoi en avez-vous besoin

Un linter (de l'anglais lint — « nettoyer les peluches ») est un programme d'analyse statique de code qui vérifie la conformité du code source aux règles spécifiées sans l'exécuter. Le terme est apparu en 1978, lorsque Stephen Johnson a créé l'utilitaire lint pour le langage C.

Les linteurs modernes résolvent plusieurs tâches importantes. Ils assurent la cohérence du code dans le projet afin que tout développeur puisse facilement lire et comprendre le code de ses collègues. Les linters détectent les erreurs potentielles, telles que les variables inutilisées, les fautes de frappe dans les noms de fonctions ou les problèmes de visibilité. Ils automatisent la vérification du style de code, libérant du temps pour discuter de choses plus importantes lors de la révision du code. En outre, les linters aident les débutants à s'adapter plus rapidement aux normes de l'équipe et enseignent les meilleures pratiques.

Linters populaires pour différentes langues

Pour JavaScript et TypeScript, la solution la plus populaire est ESLint. C'est un outil flexible et extensible avec un grand nombre de règles et de plugins. ESLint vous permet de personnaliser les règles en fonction des besoins du projet, d'utiliser des configurations prédéfinies de la communauté, de corriger automatiquement de nombreux problèmes et de s'intégrer à tous les éditeurs de code populaires.

L'écosystème Python utilise plusieurs outils à la fois. Pylint offre une vérification complète avec un grand ensemble de règles, Flake8 combine les capacités de plusieurs outils en un seul, et Black fonctionne comme un « formateur de code sans compromis » avec un minimum de configuration.

Pour PHP, la norme de facto est PHP_CodeSniffer, qui vérifie la conformité du code aux normes PSR et vous permet de créer vos propres règles de vérification. Dans le monde de CSS et SCSS, Stylelint est populaire avec le support de CSS moderne et de préprocesseurs.

Comment fonctionne le linter de l'intérieur

Le processus de travail du linter peut être divisé en plusieurs étapes. Tout d'abord, le code source est analysé dans un arbre syntaxique abstrait (AST). Le linter parcourt ensuite cet arbre et applique des règles à chaque nœud, en vérifiant la structure du code, les noms des variables, le formatage et d'autres aspects. Après cela, le linter recueille tous les problèmes trouvés et génère un rapport indiquant le fichier, la ligne et la description du problème. Enfin, pour certains problèmes, le linter peut appliquer automatiquement des correctifs.

Prenons un exemple simple de travail avec ESLint. Supposons que nous ayons le code suivant :

function calculateSum(a,b) {
    var result = a + b
    console.log(unused)
    return result
}

ESLint y trouvera plusieurs problèmes : il n'y a pas d'espaces après la virgule dans les paramètres de la fonction, le mot-clé obsolète var est utilisé au lieu de const, il n'y a pas de point-virgule à la fin de la ligne, et il y a aussi un appel à une variable indéfinie unused.

Configuration d'ESLint pour le projet Vue.js

Examinons en détail la configuration du linter pour un vrai projet sur Vue.js. Installez d'abord les paquets nécessaires :

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

Ensuite, nous créons un fichier de configuration .eslintrc.js à la racine du projet :

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    '@vue/prettier'
  ],
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'vue/multi-word-component-names': 'off',
    'vue/require-default-prop': 'error',
    'vue/no-unused-vars': 'warn'
  }
}

Dans le fichier package.json, on ajoute des scripts pour lancer la vérification :

{
  "scripts": {
    "lint": "eslint --ext .js,.vue src",
    "lint:fix": "eslint --ext .js,.vue src --fix"
  }
}

Vous pouvez maintenant lancer la vérification avec la commande npm run lint ou corriger automatiquement les problèmes avec la commande npm run lint:fix.

Intégration avec l'éditeur de code

Pour voir les erreurs du linter directement lors de l'écriture du code, vous devez configurer l'intégration avec l'éditeur. Pour VS Code, installez l'extension ESLint depuis le marché et ajoutez .vscode/settings.json aux paramètres :

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ]
}

Désormais, lors de l'enregistrement d'un fichier, tous les problèmes corrigibles seront automatiquement résolus.

Définition des règles : équilibre entre rigueur et commodité

Une question fréquente : à quel point les règles du linter devraient-elles être strictes ? Des règles trop souples ne donneront pas l'effet désiré, et des règles trop strictes irriteront les développeurs et ralentiront le travail.

Une bonne stratégie consiste à commencer par un ensemble de règles de base recommandées et à les adapter progressivement à l'équipe. N'incluez pas toutes les règles possibles à la fois, choisissez celles qui aident vraiment à éviter les erreurs. Utilisez les niveaux de gravité : error arrête la compilation et nécessite une correction obligatoire, warn affiche un avertissement, mais ne bloque pas le travail, et off désactive complètement la règle.

Mettez-vous d'accord avec l'équipe sur les règles controversées. Par exemple, les guillemets simples ou doubles ne sont pas une question de correction, mais d'accord. Documentez les raisons du choix de règles spécifiques afin que les nouveaux membres de l'équipe comprennent la logique des décisions.

Linter dans le pipeline CI/CD

Le linter apporte un réel avantage lorsqu'il est intégré au processus d'intégration continue. Cela garantit que tout le code entrant dans la branche principale est conforme aux normes.

Exemple de configuration pour GitHub Actions dans le fichier .github/workflows/lint.yml :

name: Lint

on: [push, pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm ci
      - run: npm run lint

Désormais, chaque fois que vous appuyez sur push ou créez une pull request, la vérification du code démarre automatiquement. Si le linter trouve des erreurs, GitHub marquera la vérification comme ayant échoué et vous verrez immédiatement ce qui doit être corrigé.

Correction automatique et formatage

De nombreux linters peuvent non seulement trouver des problèmes, mais aussi les corriger automatiquement. ESLint avec le drapeau --fix peut corriger les problèmes de formatage, placer les points-virgules manquants, corriger les guillemets et bien plus encore.

Cependant, il est préférable d'utiliser des outils spécialisés pour formater le code. Prettier est un formateur de code opinionné qui formate le code selon des règles strictes avec une configuration minimale. La combinaison d'ESLint pour la vérification de la qualité du code et de Prettier pour le formatage est devenue la norme dans la communauté JavaScript.

Pour éviter les conflits, utilisez eslint-config-prettier, qui désactive toutes les règles ESLint liées au formatage :

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

Et ajoutez à .eslintrc.js :

extends: [
  'plugin:vue/vue3-recommended',
  'eslint:recommended',
  'prettier' // doit être le dernier
]

Erreurs typiques lors de l'utilisation de linters

La première erreur courante est d'ignorer les avertissements du linter. Les développeurs ajoutent des commentaires eslint-disable pour désactiver les vérifications au lieu de corriger les problèmes. Utilisez les commentaires de désactivation uniquement dans des cas exceptionnels et ajoutez toujours une explication de la raison pour laquelle la règle est désactivée.

La deuxième erreur est le manque de cohérence au sein de l'équipe. Si chaque développeur utilise sa propre configuration locale, cela annule tous les avantages du linter. Stockez la configuration dans le dépôt et assurez-vous que tout le monde utilise les mêmes paramètres.

La troisième erreur est une mise en œuvre trop tardive. Il est difficile d'ajouter un linter à un grand projet avec une base de code existante. Il est préférable de commencer dès le début du projet ou de l'implémenter progressivement : d'abord pour les nouveaux fichiers, puis de remanier progressivement l'ancien code.

Fonctionnalités avancées

Les linters modernes offrent de nombreuses fonctionnalités avancées. Vous pouvez créer vos propres règles de vérification pour les exigences spécifiques de votre projet. Les plugins étendent les fonctionnalités : par exemple, eslint-plugin-security détecte les vulnérabilités potentielles de sécurité, eslint-plugin-a11y vérifie la disponibilité et eslint-plugin-import contrôle l'exactitude des importations.

L'intégration avec TypeScript via @typescript-eslint vous permet de vérifier le code typé en tenant compte du système de type. Et les configurations personnalisées pour différentes parties du projet (par exemple, des règles différentes pour le frontend et le backend) aident à configurer la vérification de manière flexible.

Conclusion

Les linters ne sont pas seulement un outil pour les perfectionnistes pointilleux. C'est un moyen éprouvé d'améliorer la qualité du code, d'accélérer la révision du code, de prévenir les erreurs et de créer un style uniforme au sein de l'équipe. Il est facile de commencer à utiliser un linter : choisissez l'outil approprié pour votre langage de programmation, installez la configuration de base, configurez l'intégration avec l'éditeur et CI/CD, adaptez les règles aux besoins de l'équipe. Au début, il peut sembler que le linter ne fait que ralentir le travail et agacer avec des remarques constantes. Mais après une semaine, vous remarquerez que le code est devenu plus propre et que la révision du code est plus rapide et plus constructive. Le linter deviendra votre assistant silencieux, qui surveille la qualité du code 24 heures sur 24 et ne se lasse pas de rappeler les meilleures pratiques.

Annexe Code propose des cours interactifs sur Python, JavaScript et d'autres technologies pour les développeurs de tous niveaux.

Rejoignez notre Chaîne Telegram, où nous partageons régulièrement des articles utiles, analysons des concepts complexes dans un langage simple et aidons à résoudre les problèmes qui se posent.

Apprenez avec un enseignant communauté de développeurs!