【Typescript】ESLint

ESLint はコードの厳密なチェックを行う JavaScript の静的解析ツール（リンター）です。
TypeScript 用のプラグインを使うことで、TypeScript のリンターとしても使えます。
TypeScript には、TSLint というものが用意されていますが、2019年で非推奨になっていますので、現時点では ESLint を TypeScript 用のプラグインとともに使うことが推奨されています。

【環境】
S: windows8.1 / npm: 6.14.8 / node.js: 15.4.0 / typescript: 4.1.3 / eslint: 7.16.0 / vscode: 1.52.1

プロジェクトの作成

先ずは下準備として、以下のディレクトリに TypeScript プロジェクトを作成していきます。

C:\xampp\htdocs\ts_test\test2

① 新しいnpmプロジェクトを初期化します。

C:\xampp\htdocs\ts_test\test2 > npm init -y

test2 ディレクト直下に「package.json」ファイルが作成されます。

② TypeScriptをインストールします。

C:\xampp\htdocs\ts_test\test2 > npm i -D typescript

③ tsconfig.jsonを作成します。

C:\xampp\htdocs\ts_test\test2 > npx tsc –init

test2 ディレクト直下に「tsconfig.json」ファイルが作成されます。

ESLint のインストール

① ESLint のパッケージをインストールします。

C:\xampp\htdocs\ts_test\test2 > npm i -D eslint

② ESLint は JavaScript のリンターなので TypeScript 用のプラグインをインストールします。

C:\xampp\htdocs\ts_test\test2 > npm i -D @typescript-eslint/eslint-plugin

③ TypeScript を ESLint が理解できるよう、パースをインストールします。

C:\xampp\htdocs\ts_test\test2 > npm i -D @typescript-eslint/parser

ESLint の設定

test2 ディレクト直下に「.eslintrc.js」ファイルを作成します。
※ json で記述する場合は「.eslintrc.json」になります。

ESLint では、ESLint 本体やサードパーティーのプラグインに含まれるルールを設定ファイルで指定してコードをリントします。ESLint や ESLint の TypeScript 用プラグインに定義されたお勧めのルールは簡単に使えるようになっているため、それらをベースに必要に応じて好きなルールを追加する事ができます。

.eslintrc.js の例

module.exports = {
    root: true, // 1
    parser: '@typescript-eslint/parser', // 2
    parserOptions: {
        project: './tsconfig.json' // 3
    },
    plugins: [
        '@typescript-eslint' // 4
    ],
    extends: [ // 5
        'eslint:recommended', // 6
        'plugin:@ typescript-eslint/eslint-recommended', // 7
        'plugin:@ typescript-eslint/recommended', // 8
        'plugin:@ typescript-eslint/recommended-requiring-type-checking' // 9
    ]
}

1: root

.eslintrc.js ファイルの配置された場所がプロジェクトのルートであることを示します。ESLint は設定ファイルで「root:true」が指定されていないと、親フォルダーの設定ファイルを探しにいき、それをファイルシステムの最上位まで繰り返します。プロジェクトのルートの設定ファイルで「root:true」を指定することで、それより上位のフォルダーの探索を回避できます。

2: parser

ESLint が TypeScript のコードを理解できるよう、パッケージをパーサーに指定します。

3: parserOptions.project

tsconfig.json の場所を指定します。
※ 8のplugin:@typescript-eslint/recommended-requiring-type-checkingを指定しない場合は、ここは省略しても構いません。

4: plugins

@typescript-eslint/eslint-plugin パッケージをプラグインに指定し、そこに含まれるルールを利用できるようにします。ESLintの命名規約により、@typescript-eslint/eslint-pluginという名前でプラグインを作れば、/eslint-plugin の部分を省略してして（@typescript-eslintだけで）指定できます。

5: extends

extends プロパティは、外部の設定ファイルで設定された一郡のルールを有効にするのに使います。

6: eslint:recommended
ESLint 本体に含まれる、通常の JavaScript と共通のお勧めのルールを有効にします。

7: plugin:@ typescript-eslint/eslint-recommended
@typescript-eslint/eslint-plugin パッケージに含まれる eslint-recommended ルールを指定して、eslint:recommended に含まれるお勧めのルールのうち、TypeScript の型チェッカーでカバーできるものを無効にします。

8: plugin:@ typescript-eslint/recommended
@typescript-eslint/eslint-plugin パッケージに含まれる、TypeScript 特有のお勧めのルールのうち、型チェックが不要なルールを有効にします。

9: plugin:@ typescript-eslint/ recommended-requiring-type-checking
@typescript-eslint/eslint-plugin パッケージに含まれる、TypeScript 特有のお勧めのルールのうち、型チェックが必要なルールを有効にします。たとえば、不必要な型アサーションが指定されているとき警告を出す @typescript-eslint/no-unnecessary-type-assertion というルールが含まれます（型アサーションが必要かどうかをかどうかを判定するのに型チェックが必要になります）。型チェックが必要な分リントに時間がかかるため、そのトレードオフを考慮して有効にするかどうかを決めるとよいでしょう。

実行

プロジェクト内のすべての ts ファイルをリントするには、以下のようなコマンドを実行します。
※ node_modulesに含まれるファイルはデフォルトで無視されます。

C:\xampp\htdocs\ts_test\test2 > npx eslint . –ext ts

例

以下の内容の ts ファイルを作成し、リントを実行してみます。

var a:number = "10"

プロンプトでの実行結果は以下のようになります。

C:\xampp\htdocs\ts_test\test2\src\index.ts
1:1 error Unexpected var, use let or const instead no-var
1:5 warning ‘a’ is assigned a value but never used @typescript-eslint/no-unused-vars2 problems (1 error, 1 warning)
1 error and 0 warnings potentially fixable with the `–fix` option.

内容は、「var の代わりに let もしくは const の使用」と「変数 a には値が当てられているがどこでも使われていない」のエラーと警告の2つです。

ts ファイルを以下のように書き換えます。

const a = "10"
console.log(a)

これでエラーも警告も出なくなります。

VSCode で使う

いちいちプロンプトンで実行するのは面倒という事になるかと思いますので、ESLint を VSCode で使えるようにします。

インストール

先ずは、 VSCode に「ESLint拡張機能」をインストールします。
VSCode の「ファイル」→「ユーザー設定」→「拡張機能」を選択します。
するとエディタの左側に以下のような拡張機能の一覧が表示されます。その検索窓に「eslint」と入力してください。
そして表示された拡張機能の中から「ESLint」を選択してインストールしてください。

設定ファイル（settings.json）の作成

VSCode の「ファイル」→「ユーザー設定」→「設定」を選択します。
そして検索窓に「editor.codeActionsOnSave」と入力します。
すると以下のように表示されます。

「ワークスペース」を選択して、「settings.json で編集」をクリックしてください。
するとプロジェクトディレクトリ（test2）直下に「.vscode」ディレクトリが作成され、その中に以下の内容の「settings.json」ファイルが作成されます。

{
    "editor.codeActionsOnSave": null
}

こうする事でこのプロジェクトの為だけのローカルの「settings.json」ファイルを作成する事ができます。
内容は一旦このままにしておいてください。

フォーマッターをインストール

ここでTypescript で使えるフォーマッター「Prettier」もついでにインストールしておきます。
ESLint でも整形ができるようなのですが、Prettier の整形の方がより綺麗に、確実に整形ができるようです。

インストールの方法は ESLint の時と同じです。
拡張機能一覧の検索窓に「Prettier」と入力して「Prettier – Code formatter」を選択して、インストールしてください。

設定ファイル（settings.json）の内容作成

一旦置いておいた「settings.json」ファイルの内容を以下のようにします。

{
  "editor.formatOnSave": true, // 1
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 2
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 3
  }
}