create-react-appで作ったアプリをESLintする

Sider というGitHubのプルリクエストを自動でレビューしてくれるサービスがあり、これをちょっと使ってみようと思った。 以前 React開発環境構築(create-react-app利用) に書いたとおり、ESLintの設定がダルいので普段はStandard Styleのモジュールを入れてLintの設定は簡単に済ましているが、このSiderがStandard Styleには対応してなくてJSHintかESLintにしか対応していないようなので、今回ESLintでLintしてみた。

モジュールのインストール

react-create-appにはReactをESLintするために必要なモジュールは同梱されている。なのでStandard Style用のプラグインだけ追加で入れる。

yarn add -D \
  eslint-config-standard \
  eslint-plugin-node \
  eslint-plugin-standard \
  eslint-plugin-promise \
  prettier-standard

.eslintrc.json

こいつが面倒…かと思いきや下記の設定だけで良い模様。

{
  "extends": ["react-app", "standard"]
}

これで yarn run eslint src/ などやればLintしてくれる。

Vimの設定(ALE)

ALEはLintのモジュールを自動検知してくれるので、ESLintになっても設定は変更しなくても問題なかった。

let g:ale_fixers = {'javascript': ['prettier_standard']}
let g:ale_fix_on_save = 1

Atom

reactプラグインとlinter-eslintを入れればOK。 linter-eslintの設定をいじれば自動修正もしてくれる。

VSCode

eslintプラグインを入れればOK。 設定をいじれば自動修正もしてくれる。

まとめ

思ったより設定項目少なくて楽だった。最初からこうすれば良かった感がある。