ESLintで特定ルールの警告だけ修正する(TypeScript版)

TL;DR

検出

$ npx eslint --no-eslintrc --parser @typescript-eslint/parser --rule 'indent: ["error", 2]' 'src/**/*.ts'

修正

$ npx eslint --fix --no-eslintrc --parser @typescript-eslint/parser --rule 'indent: ["error", 2]' 'src/**/*.ts'

はじめに

TypeScriptプロジェクト + ESLintの環境で、
特定のルールの指摘箇所だけ修正したいな〜と思い、以下の記事にたどり着きました。

該当記事ではJavaScriptプロジェクトに対し、以下のコマンドを実施することで特定ルールの警告の検出・修正を実現しました。

検出

$ eslint --no-eslintrc --rule 'indent: ["error", 2]' src/js

修正

$ eslint --fix --no-eslintrc --rule 'indent: ["error", 2]' src/js

TypeScriptプロジェクトで実施すると、エラーが発生して正しく検出・修正できませんでした。
この記事ではTypeScript版を補足させていただきます。

私の環境ではESLintの実施にnpx eslintを利用するため、以降この記載とします。
また、ESLintの実施対象を'src/**/*.ts'とします。

環境

package.json（抜粋）

package.json

{
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.62.0",
    "@typescript-eslint/eslint-plugin-tslint": "^5.62.0",
    "@typescript-eslint/parser": "^5.62.0",
    "eslint": "^8.57.1",
    "tslint": "^5.18.0",
  }
}

.eslintrc.js（抜粋）

.eslintrc.js

module.exports = {
    "extends": [
        "plugin:@typescript-eslint/recommended",
        "plugin:@typescript-eslint/recommended-requiring-type-checking"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "project": "tsconfig.json",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint",
        "@typescript-eslint/tslint"
    ],
    "rules": {
    },
};

エラー内容

$ npx eslint --no-eslintrc --rule 'indent: ["error", 2]' 'src/**/*.ts'

/xxx/hoge/index.ts
  3:1  error  Parsing error: The keyword 'import' is reserved
/xxx/fuga/index.ts
  4:1  error  Parsing error: The keyword 'import' is reserved
/xxx/piyo/index.ts
...

TypeScriptファイルを正しく解釈できないようです。

変更内容

オプション--parser @typescript-eslint/parserを追加しました。

検出

$ npx eslint --no-eslintrc --parser @typescript-eslint/parser --rule 'indent: ["error", 2]' 'src/**/*.ts'

修正

$ npx eslint --fix --no-eslintrc --parser @typescript-eslint/parser --rule 'indent: ["error", 2]' 'src/**/*.ts'

実施結果

検出

$ npx eslint --no-eslintrc --parser @typescript-eslint/parser --rule 'indent: ["error", 2]' 'src/**/*.ts'

/xxx/hoge/index.ts
   11:1  error  Expected indentation of 2 spaces but found 4   indent
/xxx/fuga/index.ts
   19:1  error  Expected indentation of 2 spaces but found 4   indent
...

期待通りにindentに関する警告のみが出力されました。

修正

$ npx eslint --fix --no-eslintrc --parser @typescript-eslint/parser --rule 'indent: ["error", 2]' 'src/**/*.ts'

警告がなくなったため出力なしで、対象のファイルのインデントが修正されたことを確認しました。

説明

--no-eslintrcオプションはESLint設定ファイル（この場合は.eslintrc.js）を無視します。
.eslintrc.jsで設定された"parser": "@typescript-eslint/parser"も無視されるため、ESLintのデフォルトParserのEspree（参照：ESLint - Configure a Parser）が利用されます。
EspreeはJavaScript用のParserであり、TypeScriptのソースコードはパースできません。

コマンドラインで明示的にParserを@typescript-eslint/parserに指定するために、オプション--parser @typescript-eslint/parserを追加しました。

さいごに

元記事に敬意を込めて補足？発展？記事を書かせていただきました。
こういった形式で記事を書くのは初めてで、何卒お手柔らかによろしくお願いします。

参考

元記事

ESLint公式のCLIリファレンス