TOC
はじめに
ESLintの設定について使用頻度の高い作業を記録する。
ESLintとは
ESLintはJavaScriptの静的検証ツール。C言語のための静的検証ツールLintから名前を取っているらしい。 設定に記述されたルールを元にエラー・警告を出したり、エラーをFixしたりする。 設定は.eslintrc.jsに書く。JSONやYAMLのフォーマットでも書ける。 スタンダードなStyleがいくつかあるため（後述）、とりあえずそのStyleでチェックしておけば無難っぽい。
設定方法
今回はReactのプロジェクトに適用する設定をインストールする。 TypeScriptやJSXを使用するため、それらの設定も含める。
まずは以下コマンドでESLintをインストール。
$ yarn add --dev @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-plugin-import eslint-plugin-jsx-a11y
Styleの詳細は後述するが、JavaScriptStandardStyleをインストール。
eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-node
IDEにIntelliJを使っているため、⌘,で設定を開き、Editor->Code Style->JavaScriptより、SetFrom…ボタンを押下。JavaScriptStandardStyleを選択する。
Language&Framework->JavaScript->CodeQualityTools->ESLintより、ManualESLintConfigurationを選択。
Run eslint –fix on saveを選択（保存時にfixできるものはfixする）
Styleの種類
有名なStyleは以下3つ。Airbnbが一番使われているがJavaScript Standard Styleが追い上げている感じ。とりあえずAirbnbを使うのが無難っぽい。
IntelliJの設定になぜかAirbnbが見当たらなかったので、今回はJavaScriptStandardStyleを元に設定した。
- Airbnb
- JavaScript Standard Style
トラブルシューティング
‘React’ was used before it was defined
以下で解決。
- yarn add -D eslint-import-resolver-typescript
- ルールには”no-use-before-define”: “off”を追加。”@typescript-eslint/no-use-before-define”: “off”はダメだった。 https://stackoverflow.com/questions/63818415/react-was-used-before-it-was-defined
IntelliJの既存プロジェクトにESLintを適用
再フォーマットしたいディレクトリかファイルを右クリックし、「Fix ESLint problems」を選択。
⌘+opt+Lのショートカットに紐付けるとその後楽になる。
コミット時にReformatやoptimize import にチェックを入れているとfixした結果が修正されてしまうのでチェックを外す。
https://mmll.hatenablog.com/entry/memo/phpstorm/eslint/reformat
