Parlons de la façon de migrer tslint vers eslint dans Angular

 ng ajouter @angular-eslint/schematics

Résultats en cours d'exécution :

• Le fichier .eslintrc.json est automatiquement généré à la racine et le plug-in @angular-eslint eslint est utilisé par défaut.

 {
  "racine": vrai,
  "ignorer les modèles": [
    "projets/**/*"
  ],
  "remplacements": [
    {
      "fichiers": [
        "*.ts"
      ],
      "ParserOptions": {
        "projet": [
          "tsconfig.json"
        ],
        "createDefaultProgram": vrai
      },
      "étend": [
        "plugin :@angular-eslint/recommandé",
        "plugin :@angular-eslint/template/process-inline-templates"
      ],
      "règles": {
        "@angular-eslint/directive-selector": [
          "erreur",
          {
            "type": "attribut",
            "prefix": "application",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "erreur",
          {
            "type": "élément",
            "prefix": "application",
            "style": "étui-kebab"
          }
        ]
      }
    },
    {
      "fichiers": [
        "*.html"
      ],
      "étend": [
        "plugin :@angular-eslint/template/recommended"
      ],
      "règles": {}
    }
  ]
}

• La configuration cli suivante liée à eslint est ajoutée à angulaire.json Si vous générez une bibliothèque ou une application via la ligne de commande ng à l'avenir, .eslintrc.json sera automatiquement généré sous ce module.

 "cli": {
	    "defaultCollection": "@angular-eslint/schematics"
  }

2. Supprimez ou remplacez les fichiers ou configurations liés à tslint

• Supprimez tslint.json sous le répertoire racine ou le module
• Supprimez les packages de dépendances de développement liés à tslint, tels que tslint ou typescript-tslint-plugin etc.
• (Le cas échéant) Supprimez la configuration liée au plugin tslint dans tsconfig.json, telle que

• Modifiez la configuration tslint (le cas échéant) sous angulaire.json en eslint, qui devra peut-être être modifiée manuellement.

Configuration tslint d'origine :

Configuration eslint modifiée (par exemple configurée pour exécuter lint dans le répertoire projets/lint-test) :

3. Si vous devez désactiver temporairement la vérification eslint de certains codes ou fichiers

• Ajoutez le commentaire suivant au-dessus du code pour désactiver temporairement la vérification eslint de ce code

 /* eslint-disable */
const some_un_used_var;

• Vous pouvez ajouter la règle lorsque la vérification eslint signale une erreur dans le commentaire pour indiquer la raison de la désactivation temporaire de la vérification. Par exemple, dans le code suivant, vous ne voulez pas qu'une variable inutilisée soit extraite par eslint et qu'une erreur soit générée.

 /* eslint-disable @typescript-eslint/no-unused-vars */
const some_un_used_var;

• Si vous devez désactiver la vérification eslint de certains fichiers, vous pouvez ajouter le fichier .eslintignore sous root.
• Les modèles qui nécessitent une vérification des peluches peuvent être configurés dans .eslintrc (cet article n'entrera pas dans les détails, introduction officielle)

4. Vérifiez s'il peut être utilisé

Exécuter la commande lint

 ng charpie

S'il fonctionne correctement, félicitations pour avoir terminé la migration !

(Facultatif) Autres plug-ins Eslint pris en charge

• eslint-plugin-deprecation : Vérifier que le code est obsolète
• eslint-plugin-header : Vérifiez si les commentaires d'en-tête de fichier suivent certaines règles (peuvent être utilisés pour la version, la vérification des brevets, etc.)
• eslint-plugin-import : Vérifiez les erreurs d'orthographe ou de nom de l'adresse d'importation, la grammaire, etc.
• eslint-plugin-prefer-arrow : Valider à l'aide des fonctions fléchées
• eslint-plugin-unicorn : Vérifiez la syntaxe js et ts liée
• eslint-plugin-jsdoc : documentation relative
• ...

Peut être configuré dans .eslintrc.json (documentation officielle)

(Facultatif) Configurer le code VS

Installer le plugin Eslint

Le code VS corrige automatiquement les problèmes liés à Eslint lors de l'enregistrement

Définir dans .vscode/settings.json

 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }

Ou recherchez les paramètres de sauvegarde sous Fichier->Préférences->Paramètres pour trouver les paramètres liés à Eslint.