ESLintを導入してみた

ESLintとは

Javascriptの静的解析を行ってくれるツールです。
フォーマッタとしての機能も兼ね備えていますが、この機能はPrettierを使用するのが主流みたいです。

Vscodeではファイルの保存時に、ESLintの自動修正が走るように設定を行えます。
下記で行っている設定はESLintの対象になっているファイルのみ走るようになっています。

"editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
  }

ESLintの有効/無効を設定できます。デフォルトは有効です。

デバッグモードの有効/無効を設定できます。

Vscodeのワークスペースにある全てのフォルダを対象にするかを設定できます。

ESLintが実行されるタイミングを設定できる。
- onsave => ファイルが保存された時
- ontype => コードの区切りを入力した時

all
これはターミナルで--fix オプションをつけて eslint を実行したのと同じコードパスで実行されるため、時間がかかることがあります。これがデフォルト値です。
problems
テキスト編集が重複していない限り、修正可能な既知の問題のみを修正します。このモードの方がはるかに高速ですが、問題の一部だけを修正する可能性が高いです。

ESlintで検証されたファイルのフォーマッタとしてESlintを使用します。この設定を有効にした場合、他のフォーマッタを無効にしてください。

例:

 "[javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" } ,
 "[typescript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }

拡張機能はワークツリー下にインストールされたESLintがある場合はそちらを参照し、なければグローバルにインストールされたESLintを参照します。

npm install -D eslint

npm install -g eslint

npx eslint --init

上記を実行するとどのような設定を行うか対話式で聞いてきます。
後から修正も可能ですので間違っても問題ありません。

eslintrc.json(.jsonは選択した拡張子で変わります)が作成されます。