Migration von TSLint zu ESLint

In der Vergangenheit war TSLint der empfohlene Linter, aber jetzt ist TSLint veraltet und ESLint übernimmt seine Aufgaben. Dieser Artikel hilft Ihnen bei der Migration von TSLint zu ESLint.

ESLint: Installation

Sie müssen ESLint installieren. ESLint unterstützt TypeScript nicht nativ, daher müssen Sie auch eslint-typescript-support installieren.

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

oder wenn Sie yarn als Paketmanager verwenden

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

Der obige Befehl fügt ESLint hinzu, einen Parser, der ESLint TypeScript verständlich macht, und einige TypeScript-spezifische Regeln.

Um die eigentliche Migration zu vereinfachen, führen Sie jetzt das tslint-to-eslint-config Dienstprogramm aus. Dieses Tool nimmt Ihre TSLint-Konfiguration und erstellt daraus die "ähnlichste" ESLint-Konfiguration.

npx tslint-to-eslint-config

Dieser Befehl lädt das Dienstprogramm herunter und führt es aus, um die Migration durchzuführen. Weitere Optionen finden Sie in der Bedienungsanleitung des Dienstprogramms.

Es sollte nun eine neue Datei .eslintrc.js, eine Protokolldatei (tslint-to-eslint-config.log) und wahrscheinlich Änderungen an anderen Dateien wie .vscode/settings.json geben. Überprüfen Sie die Änderungen sorgfältig, insbesondere die an vorhandenen Dateien, und prüfen Sie die Protokolldatei.

ESLint: Konfigurieren

Die Datei .eslintrc.js ist normalerweise ausreichend für den Anfang, aber es ist wahrscheinlich, dass die Eigenschaft parserOptions.project immer noch auf Ihre tsconfig.json-Datei gesetzt ist. Das bedeutet, dass ESLint-Regeln semantische Informationen verwenden können, zum Beispiel, ob diese Variable eine Zeichenkette oder ein Zahlenarray ist? Diese Konfiguration ermöglicht einige leistungsstarke Regeln, bedeutet aber, dass ESLint viel länger zur Berechnung benötigt. Die Standardregeln für Erweiterungen benötigen keine semantischen Informationen, und wenn Sie keine Regeln hinzugefügt haben, die dies tun, empfehlen wir Ihnen, die Eigenschaft parserOptions.project zu entfernen.

ESLint: Ausführen

Sie sind nun bereit, ESLint auszuführen, aber vorher empfehlen wir Ihnen, TSLint zu deaktivieren. Öffnen Sie dazu die Erweiterungsansicht und wählen Sie im Kontextmenü der TSLint-Erweiterung Deaktivieren.

Es ist Zeit zum Linting! Verwenden Sie diesen Befehl: eslint -c .eslintrc.js --ext .ts <mySrcFolder> (beachten Sie die Option --ext .ts, die ESLint anweist, nach TypeScript-Dateien zu suchen). Wir empfehlen, den Befehl in den scripts-Abschnitt Ihrer package.json-Datei einzufügen, wie hier gezeigt

"lint": "eslint -c .eslintrc.js --ext .ts <mySrcFolder>"

Um ESLint in Visual Studio Code zu integrieren, gehen Sie wie folgt vor

• Installieren Sie die ESLint-Erweiterung.
• Erstellen Sie eine Aufgabe über den Befehl Aufgaben: Aufgabe konfigurieren und wählen Sie npm: lint.
• Konfigurieren Sie im resultierenden tasks.json-Datei den Problem-Matcher auf $eslint-stylish.

Hinweis: ESLint ist manchmal "korrekter" in der Art und Weise, wie es Dinge tut, und Sie sehen möglicherweise Warnungen, die Sie vorher nicht hatten, z. B. fehlende Semikolons. Versuchen Sie die Option --fix, damit ESLint die Dinge für Sie bereinigen kann.

TSLint: Entfernen

Herzlichen Glückwunsch. Sie sollten nun eine funktionierende ESLint-Einrichtung haben und es ist Zeit zum Aufräumen.

Das Entfernen von TSLint hängt von Ihrem Projekt ab, aber normalerweise sind dies die Schritte

• Aktualisieren Sie .vscode/extensions.json, um die ESLint-Erweiterung und nicht mehr TSLint zu empfehlen

  "recommendations": [
    "dbaeumer.vscode-eslint"
  ]
  

• Entfernen Sie die Datei tslint.json.

• Entfernen Sie die Abhängigkeit von tslint in der Datei package.json.

• Deinstallieren Sie TSLint mit npm uninstall tslint.