Lassen Sie uns darüber sprechen, wie Sie in Angular Tslint zu Eslint migrieren

 ng @angular-eslint/schematics hinzufügen

Laufergebnisse:

• Die Datei .eslintrc.json wird automatisch im Stammverzeichnis generiert und standardmäßig wird das Eslint-Plug-in @angular-eslint verwendet.

 {
  „root“: wahr,
  „ignorePatterns“: [
    „Projekte/**/*“
  ],
  „überschreibt“: [
    {
      "Dateien": [
        „*.ts“
      ],
      "parserOptions": {
        „Projekt“: [
          „tsconfig.json“
        ],
        „createDefaultProgram“: wahr
      },
      „erweitert“: [
        „plugin:@angular-eslint/recommended“,
        „plugin:@angular-eslint/template/process-inline-templates“
      ],
      "Regeln": {
        „@angular-eslint/directive-selector“: [
          "Fehler",
          {
            „Typ“: „Attribut“,
            „Präfix“: „App“,
            „style“: „camelCase“
          }
        ],
        „@angular-eslint/component-selector“: [
          "Fehler",
          {
            „Typ“: „Element“,
            „Präfix“: „App“,
            „style“: „Kebab-Koffer“
          }
        ]
      }
    },
    {
      "Dateien": [
        „*.html“
      ],
      „erweitert“: [
        „plugin:@angular-eslint/template/recommended“
      ],
      "Regeln": {}
    }
  ]
}

• Die folgende eslint-bezogene CLI-Konfiguration wird zu angle.json hinzugefügt. Wenn Sie in Zukunft eine Bibliothek oder Anwendung über die NG-Befehlszeile generieren, wird .eslintrc.json automatisch unter diesem Modul generiert.

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

2. Entfernen oder ersetzen Sie Tslint-bezogene Dateien oder Konfigurationen

• Löschen Sie tslint.json im Stammverzeichnis oder Modul
• Löschen Sie Tslint-bezogene Entwicklungsabhängigkeitspakete wie tslint oder typescript-tslint-plugin usw.
• (Falls vorhanden) Löschen Sie die tslint-plugin-bezogene Konfiguration in tsconfig.json, z

• Ändern Sie die tslint-Konfiguration (falls vorhanden) unter angle.json in eslint, was möglicherweise manuell geändert werden muss.

Ursprüngliche Tslint-Konfiguration:

Geänderte eslint-Konfiguration (z. B. konfiguriert, um Lint im Verzeichnis „projects/lint-test“ auszuführen):

3. Wenn Sie die Eslint-Prüfung einiger Codes oder Dateien vorübergehend deaktivieren müssen

• Fügen Sie den folgenden Kommentar über dem Code hinzu, um die Eslint-Prüfung für diesen Code vorübergehend zu deaktivieren

 /* eslint-disable */
const some_un_used_var;

• Sie können die Regel hinzufügen, wenn die Eslint-Prüfung einen Fehler im Kommentar meldet, um den Grund für die vorübergehende Deaktivierung der Prüfung anzugeben. Im folgenden Code möchten Sie beispielsweise nicht, dass eine nicht verwendete Variable von eslint ausgecheckt und ein Fehler ausgegeben wird.

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

• Wenn Sie die Eslint-Prüfung einiger Dateien deaktivieren müssen, können Sie die .eslintignore-Datei im Root-Verzeichnis hinzufügen.
• Muster, die eine Lint-Prüfung erfordern, können in .eslintrc konfiguriert werden (dieser Artikel wird nicht auf Details eingehen, offizielle Einführung)

4. Prüfen Sie, ob es verwendet werden kann

Führen Sie den Lint-Befehl aus

 ng Flusen

Wenn es erfolgreich ausgeführt wird, herzlichen Glückwunsch zum Abschluss der Migration!

(Optional) Weitere unterstützende eslint-Plug-ins

• eslint-plugin-deprecation: Überprüfen Sie, ob der Code veraltet ist
• eslint-plugin-header: Überprüfen Sie, ob Datei-Header-Kommentare bestimmten Regeln folgen (können zur Versions-, Patentüberprüfung usw. verwendet werden).
• eslint-plugin-import: Überprüfen Sie die Rechtschreib- oder Namensfehler, Grammatik usw. der Importadresse.
• eslint-plugin-prefer-arrow: Validierung mithilfe von Pfeilfunktionen
• eslint-plugin-unicorn: Überprüfen Sie die Syntax von js und ts
• eslint-plugin-jsdoc: Dokumentationsbezogen
• ...

Kann in .eslintrc.json konfiguriert werden (offizielle Dokumentation)

(Optional) Konfigurieren Sie VS-Code

Installieren Sie das Eslint-Plugin

VS-Code korrigiert beim Speichern automatisch Eslint-bezogene Probleme

In .vscode/settings.json festgelegt

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

Oder suchen Sie unter Datei->Einstellungen->Einstellungen nach Onsave-Einstellungen, um eslint-bezogene Einstellungen zu finden.