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
まだメンテナンスされており、公式推奨		移行方法 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 などの 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 関連の設定を見つけます #その他のプログラミングについては、-関連知識については、 プログラミング入門 をご覧ください。 ！

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