ESLintとPrettierの記事を読む

ESLint と Prettier の記事を読む

ESLint と Prettier、もちろん知っているしプロダクトで使っているのだけど、設定ファイルをイチから書いたりメンテしたりしたことは一回しかなくて、その一回もめちゃくちゃスモールなプロダクトをススっとリリースしたので全然ちゃんとしてなかった。

で、今回 Linter / Formatter の改善をすることになって今調べていて、そういえば Prettier って ESLint とどうやって組み合わせてるんだっけというのを初心に返って調べてみることにした。

コードの整形機能は ESLint にもあるけど、Prettier はそれに比べて手軽に整形できるし、かつ ESLint では整形できないコードも整形できる。

ESLint の整形は、そもそもできないものもあるしできても設定を複雑にしないといけない。Prettier はデフォルトで整形の設定があるので、ノーコンフィグでサクッと整形できるし、好みの設定もできる。

Prettier はフォーマッターなので構文チェック機能がないので、整形を Prettier が、構文チェックを ESLint が行う。

で、Prettier と ESLint を併用するには、ESLint のフォーマットのルールを無効化して Prettier の設定を使えるようにする。

そのためにeslint-config-prettierというパッケージを使う。これは ESLint のフォーマット関連のルールをすべて無効化するという設定のパッケージ。

husky とか lint-staged の件も書いてあって読みやすかった。

別の記事も読んでみた。

最初に読んだ記事にも書いてあったけど、ESLint と Prettier を併用する際に ESLint から Prettier を使うeslint-plugin-prettierが非推奨になった。

この記事によると、

prettier --check .というコマンドが Prettier にある
Prettier 用のエディタプラグインが充実してきている
Linter 経由だと赤線出て怒られまくる
Prettier オンリーにすることでシンプルに実行スピードが上がる
間接的なレイヤーを挟むことで余計なバグになる可能性がある
Prettier のフォーマットで気になるところがあるならprettier-eslintを使って Prettier でフォーマットしたあとにeslint --fixする

という感じらしい。