Heim  >  Artikel  >  Web-Frontend  >  Lassen Sie uns darüber sprechen, wie Sie in Angular Tslint zu Eslint migrieren

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

青灯夜游
青灯夜游nach vorne
2022-03-31 11:44:143284Durchsuche

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!

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

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-eslinteslint-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;
Lassen Sie uns darüber sprechen, wie Sie in Angular Tslint zu Eslint migrieren

    2. Verschieben Sie Tslint-bezogene Dateien oder Konfigurationen entfernen oder ersetzen.

Löschen Sie tslint.json im Stammverzeichnis oder Modul.

Lassen Sie uns darüber sprechen, wie Sie in Angular Tslint zu Eslint migrierenLö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.

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

Ä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

)

: Überprüfung der Syntax von js, ts

eslint-plugin-jsdoc

: Dokumentbezogen

...

kann in .eslintrc.json (offizielles Dokument) konfiguriert werden )

(optional) VS-Code konfigurierenLassen Sie uns darüber sprechen, wie Sie in Angular Tslint zu Eslint migrieren

Eslint-Plugin installieren

VS-Code korrigiert automatisch Eslint-bezogene Probleme beim SpeichernLassen Sie uns darüber sprechen, wie Sie in Angular Tslint zu Eslint migrieren

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!

Stellungnahme:
Dieser Artikel ist reproduziert unter:juejin.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel:Wozu dient „await“ in es6?Nächster Artikel:Wozu dient „await“ in es6?