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

In diesem Artikel lernen Sie weiter Angular, vergleichen Tslint und Eslint und stellen vor, wie Sie Tslint zu Eslint in Angular migrieren. Ich hoffe, dass es für alle hilfreich ist!

Hallo zusammen, Angular wurde kürzlich von 12 auf 13 aktualisiert. Der Beamte hat die Tslint-Konfiguration in Angular.json automatisch entfernt, daher ist es für uns am besten, der offiziellen Vereinbarung zu folgen und Eslint zu verwenden. [Verwandte Tutorial-Empfehlung: „Angular-Tutorial“]

tslint vs. eslint

lint-Typ	Verwendung	Aktuelle Situation
tslint	Plug-in zur Überprüfung der ts-Syntaxspezifikationen ?? So migrieren Sie 1. Installieren Sie eslint-Abhängigkeiten und führen Sie den folgenden Befehl aus: ng add @angular-eslint/schematics Run-Ergebnisse: . Die Datei „eslintrc.json“ wird automatisch im Stammverzeichnis mit @angular-eslint< generiert /code standardmäßig >eslint-Plugin. <code>@angular-eslinteslint插件。 { "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": {} } ] } 以下eslint相关的cli配置被添加至angular.json，今后如果通过ng命令行生成lib或者application，将会自动在该模块下生成.eslintrc.json "cli": { "defaultCollection": "@angular-eslint/schematics" } 2. 移除或替换tslint相关文件或者配置 删除根目录或模块下的tslint.json 删除tslint相关dev依赖包，如tslint或者typescript-tslint-plugin /* eslint-disable */ const some_un_used_var; 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 /* eslint-disable @typescript-eslint/no-unused-vars */ const some_un_used_var; 2. Verschieben Sie Tslint-bezogene Dateien oder Konfigurationen entfernen oder ersetzen. Löschen Sie tslint.json im Stammverzeichnis oder Modul. Löschen Sie Tslint-bezogene Entwicklungsabhängigkeitspakete wie tslint oder typescript-tslint-plugin Warten Sie, bis (falls vorhanden) die Tslint-Plugin-bezogene Konfiguration in tsconfig.json löscht, z. B. Ändern Sie die Tslint-Konfiguration (falls vorhanden) unter Angular .json in eslint, was möglicherweise manuell erfolgen muss. Ändern Sie die ursprüngliche Tslint-Konfiguration: Die geänderte Eslint-Konfiguration (z. B. konfiguriert, um Lint im Verzeichnis „projects/lint-test“ auszuführen): 3. Wenn Sie einen Code oder eine Eslint-Prüfung der Datei vorübergehend schließen müssen Fügen Sie den folgenden Kommentar über dem Code hinzu, um die Eslint-Prüfung des Codes vorübergehend zu deaktivieren ng lint Sie können die Regel hinzufügen, wann Die Eslint-Prüfung meldet einen Fehler im Kommentar, 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 überprüft wird und einen Fehler auslöst. "editor.codeActionsOnSave": { "source.fixAll.eslint": true } Sie müssen die Eslint-Prüfung einiger Dateien deaktivieren root Sie können die im .eslintrc-Muster erforderliche Lint-Prüfung konfigurieren (nicht in diesem Artikel beschrieben, offizielle Einführung ) 4. Überprüfen Sie, ob sie zum Ausführen des Lint-Befehls verwendet werden kannrrreee Wenn er ausgeführt wird erfolgreich, herzlichen Glückwunsch zum Abschluss der Migration! (Optional) Andere unterstützende Eslint-Plug-Ins eslint-plugin-deprecation: Überprüfen Sie, ob der Code veraltet ist eslint-plugin-header: Überprüfen Sie, ob die Datei-Header-Kommentare bestimmten Regeln folgen (können). Wird für Version, Patentüberprüfung usw. verwendet.) eslint-plugin-import: Überprüfen Sie, ob die Importadresse Rechtschreib- oder Namensfehler, Grammatikfehler usw. aufweist. eslint-plugin-prefer-arrow: Überprüfen Sie mithilfe des Pfeilfunktion eslint-plugin-unicorn : Überprüfung der Syntax von js, ts eslint-plugin-jsdoc : Dokumentbezogen ... kann in .eslintrc.json (offizielles Dokument) konfiguriert werden ) (optional) VS-Code konfigurieren Eslint-Plugin installieren VS-Code korrigiert automatisch Eslint-bezogene Probleme beim Speichern Eingestellt in .vscode/settings. json rrreee oder in Datei->Einstellungen- >Suchen Sie unter Einstellungen nach Onsave-Einstellungen, um eslint-bezogene Einstellungen zu finden🎜🎜🎜🎜🎜Weitere Kenntnisse im Zusammenhang mit der Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie Sie in Angular Tslint zu Eslint migrieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!