Angular で tslint を eslint に移行する方法について話しましょう-jsチュートリアル-php.cn

Angular で tslint を eslint に移行する方法について話しましょう

青灯夜游

リリース： 2022-04-19 21:42:49

転載

3339 人が閲覧しました

この記事では、angular の学習を継続し、tslint と eslint を比較し、Angular で tslint を eslint に移行する方法を紹介します。

Angular で tslint を eslint に移行する方法について話しましょう

皆さん、こんにちは。最近 Angular が 12 から 13 にアップグレードされました。公式は angular.json の tslint 設定を自動的に削除したため、公式の取り決めに従う方がよいでしょう。 . エスリントを使用しました。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

tslint と eslint

##tslintts構文の仕様を確認するために使用するプラグインメンテナンスされなくなりました; Angular は 11 以降非推奨になりました js/ts コード仕様を確認してください

lint タイプ使用状況

#eslint

まだメンテナンスされており、公式推奨

lint タイプ	使用状況
		#eslint
まだメンテナンスされており、公式推奨		移行方法 1. eslint の依存関係をインストールし、次のコマンドを実行します: ng add @angular-eslint/schematics ログイン後にコピー実行結果: .eslintrc.json ファイルはルートで自動的に生成され、`@angular-eslint`eslint プラグインがデフォルトで使用されます。 { "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 コマンドラインを通じてライブラリまたはアプリケーションを生成すると、.eslintrc.json が自動的に生成されますこのモジュールの下 "cli": { "defaultCollection": "@angular-eslint/schematics" } ログイン後にコピー 2. tslint 関連のファイルまたは構成を削除または置換しますルートディレクトリの tslint を削除しますjson `tslint` や `typescript-tslint-plugin` などの tslint 関連の開発依存パッケージを削除します。 (if any) in tsconfig.json などの tslint プラグイン関連の構成を削除します。angular.json の下にある tslint 構成 (存在する場合) を次のように変更します。 eslint、手動で変更する必要がある場合があります元の tslint 設定: 変更された eslint 設定 (例: プロジェクトで lint を実行するように設定/ lint-test ディレクトリ): 3. 一部のコードまたはファイルの eslint チェックを一時的にオフにする必要がある場合コードの上に次のコメントを追加して、このコードの eslint チェックを一時的にオフにします。 /* eslint-disable / const some_un_used_var; ログイン後にコピー eslint チェックでエラーが報告されたときにルールを追加できます。コメントにエラーを追加して、チェックを一時的にオフにする理由を示します。たとえば、次のコードでは、未使用の変数が eslint によってチェックされてエラーがスローされることを望まない場合 / eslint-disable @typescript-eslint/no-unused-vars / const some_un_used_var; ログイン後にコピー一部のファイルの eslint チェックをオフにする必要がある場合、ルートの下に .eslintignore ファイルを追加できます lint チェックが必要なパターンは .eslintrc で構成できます (この記事では詳細には触れません。正式な紹介) 4. 使用できるかどうかを確認します* lint コマンドを実行します ng lint ログイン後にコピー操作が成功したら、おめでとうございます移行が完了しました！ (オプション) その他のサポート eslint プラグイン eslint-plugin-deprecation: コードが古いかどうかを確認します eslint-plugin-header: ファイルヘッダーのコメントが特定のルールに従っているかどうかを確認します (バージョン、特許の検証などに使用できます) eslint-plugin-import:インポートアドレスまたは名前のスペルエラー、構文などを確認してください。 eslint-plugin-prefer-arrow: アロー関数を使用して確認してください eslint- plugin-unicorn: js 、 ts 構文関連の検証 eslint-plugin-jsdoc: ドキュメント関連 ... .eslintrc.json で設定できます (公式ドキュメント) (オプション) VS コードを設定します eslint プラグインをインストールします VS コードは保存時に eslint 関連の問題を自動的に修正します .vscode に設定/settings.json "editor.codeActionsOnSave": { "source.fixAll.eslint": true } ログイン後にコピーまたは、[ファイル]->[設定]->[設定] で onsave 設定を検索して、eslint 関連の設定を見つけます #その他のプログラミングについては、-関連知識については、プログラミング入門をご覧ください。！

移行方法

1. eslint の依存関係をインストールし、次のコマンドを実行します:

ng add @angular-eslint/schematics

ログイン後にコピー

実行結果:

.eslintrc.json ファイルはルートで自動的に生成され、@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 コマンドラインを通じてライブラリまたはアプリケーションを生成すると、.eslintrc.json が自動的に生成されますこのモジュールの下

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

ログイン後にコピー

2. tslint 関連のファイルまたは構成を削除または置換します

ルートディレクトリの tslint を削除しますjson
tslint や typescript-tslint-plugin などの tslint 関連の開発依存パッケージを削除します。
(if any) in tsconfig.json

Angular で tslint を eslint に移行する方法について話しましょう

などの tslint プラグイン関連の構成を削除します。angular.json の下にある tslint 構成 (存在する場合) を次のように変更します。 eslint、手動で変更する必要がある場合があります

元の tslint 設定:

Angular で tslint を eslint に移行する方法について話しましょう

変更された eslint 設定 (例: プロジェクトで lint を実行するように設定/ lint-test ディレクトリ):

Angular で tslint を eslint に移行する方法について話しましょう

3. 一部のコードまたはファイルの eslint チェックを一時的にオフにする必要がある場合

コードの上に次のコメントを追加して、このコードの eslint チェックを一時的にオフにします。

/* eslint-disable */
const some_un_used_var;

ログイン後にコピー

eslint チェックでエラーが報告されたときにルールを追加できます。コメントにエラーを追加して、チェックを一時的にオフにする理由を示します。たとえば、次のコードでは、未使用の変数が eslint によってチェックされてエラーがスローされることを望まない場合

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

ログイン後にコピー

一部のファイルの eslint チェックをオフにする必要がある場合、ルートの下に .eslintignore ファイルを追加できます
lint チェックが必要なパターンは .eslintrc で構成できます (この記事では詳細には触れません。正式な紹介)

4. 使用できるかどうかを確認します

lint コマンドを実行します

ng lint

ログイン後にコピー

操作が成功したら、おめでとうございます移行が完了しました！

(オプション) その他のサポート eslint プラグイン

eslint-plugin-deprecation: コードが古いかどうかを確認します
eslint-plugin-header: ファイルヘッダーのコメントが特定のルールに従っているかどうかを確認します (バージョン、特許の検証などに使用できます)
eslint-plugin-import:インポートアドレスまたは名前のスペルエラー、構文などを確認してください。
eslint-plugin-prefer-arrow: アロー関数を使用して確認してください
eslint- plugin-unicorn: js 、 ts 構文関連の検証
eslint-plugin-jsdoc: ドキュメント関連
...

.eslintrc.json で設定できます (公式ドキュメント)

(オプション) VS コードを設定します

eslint プラグインをインストールします

Angular で tslint を eslint に移行する方法について話しましょう

VS コードは保存時に eslint 関連の問題を自動的に修正します

.vscode に設定/settings.json

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

ログイン後にコピー

または、[ファイル]->[設定]->[設定] で onsave 設定を検索して、eslint 関連の設定を見つけます

Angular で tslint を eslint に移行する方法について話しましょう

#その他のプログラミングについては、-関連知識については、

プログラミング入門をご覧ください。！

以上がAngular で tslint を eslint に移行する方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。