Utilisation d’ESLint pour améliorer la qualité du code

Apprenez à utiliser ESLint dans vos projets Angular et comment ESLint vous aide à écrire un meilleur code.

Qu’est-ce que le peluchage ?

Le linter est essentiellement une analyse de code statique automatisée d’un bloc de code pour les erreurs généralement effectuées par un outil appelé linter. Angular utilise TypeScript, qui dans le passé était livré avec son propre linter par l’équipe Palantir appelée TSLint.

Qu’est-il arrivé à TSLint ?

Si vous utilisez Angular, eh bien, vous connaissez probablement TSLint et comment cela a toujours été ce que les développeurs Angular utilisent pour le linting. Cependant, certaines modifications ont été apportées il y a quelque temps.

Selon la déclaration officielle de l’équipe TSLint en février 2019 :

Il est clair que le linting est un élément essentiel de l’expérience des développeurs TypeScript/JavaScript, et l’équipe TSLint de Palantir a donc rencontré l’équipe principale de TypeScript à Redmond pour discuter de ce que la convergence TypeScript/JavaScript devrait signifier pour le linting. La communauté TypeScript a l’intention de rencontrer les développeurs JavaScript là où ils se trouvent, et ESLint est l’outil de choix pour le linting JavaScript. Afin d’éviter de bifurquer l’espace de l’outil de linting pour TypeScript, nous prévoyons donc de déprécier TSLint et de concentrer nos efforts à la place sur l’amélioration de la prise en charge de TypeScript par ESLint.

— Blog Palantir

TSLint est devenu obsolète pour se concentrer sur l’amélioration de la prise en charge de TypeScript par ESLint (un autre linter).

Angulaire Sans Linters

TSLint était toujours pris en charge par Angular, même s’il était obsolète, jusqu’à la sortie de CLI angulaire v12. À partir de cette version, une fois que vous avez exécuté la commande ng new, la configuration lint n’est plus générée par défaut. Voyons comment cela fonctionne lorsque nous créons un nouveau projet Angular.

Exécutez cette commande dans le terminal à l’emplacement du fichier de votre choix :

ng new testy

Vous verrez qu’à l’intérieur du fichier package.json, il n’y a plus de spécifications de linter. Le même résultat lorsque vous ouvrez également le fichier angular.json. Ce n’est qu’à partir d’Angular 12 et des versions supérieures – les anciennes versions ont toujours TSLint.

BYOL : Apportez votre propre linter

Avec les anciennes versions, vous pouvez simplement exécuter la commande ng lint comme ceci

ng lint

Maintenant, quand vous le faites, c’est ce que vous trouvez.

Vous voyez qu’Angular vous permet d’apporter votre propre linter. Cependant, ils recommandent ESLint, et si vous le souhaitez, il peut être facilement ajouté à votre projet en un seul clic.

Qu’est-ce qu’ESLint ?

ESLint est l’un des linters les plus utilisés qui existent. Il exécute une analyse rapide de votre code pour trouver des bogues, des erreurs et des problèmes, et il est intégré à de nombreux IDE. Vous pouvez corriger automatiquement ces erreurs d’une manière sensible à la syntaxe, et vous obtenez également un comportement de type rechercher et remplacer dans certains IDE. Il est également entièrement personnalisable et c’est la meilleure partie.

Configurer ESLint dans votre projet angulaire

Il existe deux façons d’ajouter ESLint à votre projet Angular. La première consiste à exécuter la commande lint :

ng lint

Cela vous indiquera qu’il n’y a pas de linter disponible mais vous demandera si vous voulez ajouter ESLint. Si vous dites oui, tout le reste n’est qu’un clic.

Maintenant, cela crée un fichier .eslintrc.json dans le répertoire d’accueil de votre application et met à jour les fichiers package.json et angular.json.

La deuxième façon est de les faire vous-même. La première chose à faire est de lancer cette commande dans le terminal de votre application :

ng add @angular-eslint/schematics

Exécutez ensuite cette deuxième commande :

ng g @angular-eslint/schematics

Les deux commandes gèrent l’installation de nouvelles dépendances et ces trois changements qui se sont produits dans la première option se produiront ici aussi. De la création d’un fichier .eslintrc.json dans le répertoire d’accueil de votre application à la mise à jour des fichiers package.json et angular.json.

Le fichier eslint devrait ressembler à ceci :

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ]
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {}
    }
  ]
}

Maintenant que vous êtes prêt, jetons un coup d’œil à votre IDE.

Utilisation d’ESLint dans VS Code

Vous pouvez installer l’extension ESLint dans l’IDE de votre choix. J’utilise VS Code.

Fournie par l’équipe Microsoft et déjà téléchargée plus de 20 millions de fois, ESLint est une extension incontournable. Au fur et à mesure que vous codez, des problèmes et des erreurs apparaissent comme des problèmes dans votre terminal. Vous pouvez définir vos propres règles et maintenir un sentiment de cohérence entre tous vos projets et même avec les autres membres de l’équipe. Vous pouvez également utiliser des règles populaires – l’Angular ESLint utilise les règles que vous pouvez en savoir plus ici.

Emballer

Nous avons examiné Linting dans nos projets Angular, comment nous sommes passés de TSLint à ESLint et pourquoi le linting est important pour la cohérence, l’apprentissage de plus de JS et l’efficacité du temps et des ressources. Nous avons également vu comment configurer ESLint afin de pouvoir commencer immédiatement. Bon piratage !