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

 @angular-eslint/schematics を追加しないでください

実行結果:

• .eslintrc.json ファイルはルートで自動的に生成され、 @angular-eslint eslint プラグインがデフォルトで使用されます。

 {
  "ルート": true、
  "ignorePatterns": [
    「プロジェクト/**/*」
  ]、
  「オーバーライド」: [
    {
      「ファイル」: [
        「*.ts」
      ]、
      "parserOptions": {
        "プロジェクト"： [
          「tsconfig.json」
        ]、
        "createDefaultProgram": true
      }、
      「拡張する」: [
        "プラグイン:@angular-eslint/推奨",
        「プラグイン:@angular-eslint/template/process-inline-templates」
      ]、
      「ルール」: {
        "@angular-eslint/ディレクティブセレクター": [
          "エラー"、
          {
            "タイプ": "属性",
            "プレフィックス": "アプリ",
            "スタイル": "キャメルケース"
          }
        ]、
        "@angular-eslint/コンポーネントセレクター": [
          "エラー"、
          {
            "タイプ": "要素",
            "プレフィックス": "アプリ",
            "スタイル": "ケバブケース"
          }
        】
      }
    }、
    {
      「ファイル」: [
        「*.html」
      ]、
      「拡張する」: [
        「プラグイン:@angular-eslint/テンプレート/推奨」
      ]、
      「ルール」: {}
    }
  】
}

• 次の eslint 関連の cli 設定が angular.json に追加されます。将来、ng コマンド ラインを通じてライブラリまたはアプリケーションを生成すると、このモジュールの下に .eslintrc.json が自動的に生成されます。

 "クリ": {
	    "defaultCollection": "@angular-eslint/schematics"
  }

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

• ルートディレクトリまたはモジュールの下の tslint.json を削除します。
• tslintやtypescript-tslint-pluginなどの tslint 関連の開発依存パッケージを削除します。
• (存在する場合) tsconfig.json 内の tslint-plugin 関連の構成を削除します。

• angular.json の下の tslint 構成 (存在する場合) を eslint に変更します。これは手動で変更する必要がある場合があります。

元の tslint 設定:

変更された eslint 設定 (たとえば、projects/lint-test ディレクトリで lint を実行するように設定):

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

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

 /* eslint を無効にする */
const some_un_used_var;

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

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

• 一部のファイルの eslint チェックをオフにする必要がある場合は、root に .eslintignore ファイルを追加できます。
• lint チェックが必要なパターンは .eslintrc で設定できます (この記事では詳しく説明しません。公式の紹介です)

4. 使用可能か確認する

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 関連の設定を見つけます。