TypeScriptでESLintを導入する

TypeScriptにはかつてTSLintというリンターがありましたが、2019年に非推奨となりました。そこで現在は、JavaScriptのリンターであるESLintを、TypeScript用プラグインとともに使うのが推奨されているようです。

インストール

npm i -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

リンターの設定

プロジェクトルートに.eslintrc.jsファイルを追加します。リンターは自分好みにカスタマイズできますが、オススメの設定をそのまま使うには以下のような設定にします。

module.exports = {
  root: true, //ここがプロジェクトルートであることを示す
  parser: '@typescript-eslint/parser', //パーサーの指定
  parserOptions: {
    project: './tsconfig.json', //tsconfig.jsonの場所を指定
  },
  plugins: [
    '@typescript-eslint',
  ],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
  ],
}

スクリプトの追加

リントを実行するには以下のコマンドを実行します。–fixオプションをつけると修正まで自動で行ってくれます。

npx eslint . --ext ts --fix

このままでは長いのでpackage.jsonのスクリプトに設定します。とりあえず以下のようにしてみました。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint": "eslint . --ext ts", //追加
    "lint:fix": "eslint . --ext ts --fix", //追加
    "build": "tsc"
  },

これで、検出だけをするときは

npm run lint

修正も同時に行うときは

npm run lint:fix

で実行できるようになりました。

やってみる

src/index.tsファイルを作成して以下のコードを記述します。

var a = "test"
let b = "test2"
const c = "test3"

リントを実行すると検証結果が表示されます。「varは使うな」とか「再利用されない変数ならconstを使え」とか色々指摘してくれます。

  12:1  error    Unexpected var, use let or const instead      no-var
  12:5  warning  'a' is assigned a value but never used        @typescript-eslint/no-unused-vars
  13:5  error    'b' is never reassigned. Use 'const' instead  prefer-const
  13:5  warning  'b' is assigned a value but never used        @typescript-eslint/no-unused-vars
  14:7  warning  'c' is assigned a value but never used        @typescript-eslint/no-unused-vars

✖ 5 problems (2 errors, 3 warnings)
  2 errors and 0 warnings potentially fixable with the `--fix` option.

fixオプションをつけて修正も同時にしてもらうようにします。

  12:7  warning  'a' is assigned a value but never used  @typescript-eslint/no-unused-vars
  13:7  warning  'b' is assigned a value but never used  @typescript-eslint/no-unused-vars
  14:7  warning  'c' is assigned a value but never used  @typescript-eslint/no-unused-vars

✖ 3 problems (0 errors, 3 warnings)

エラーが消えてwarningだけになりました。

index.tsを見てみると、

const a = "test"
const b = "test2"
const c = "test3"

修正されていることがわかります。