EditorConfigはESLint + Prettierと共存できる
EditorConfigが、ESLintとPrettierを入れていると不要なのか分からなかったので、調べました。
ツール解説編
結論
EditorConfigとESLint/Prettierは共存できる。
各種ツール概要
- ESLint：JS/TSのlinter。フォーマットに関するルールもあるが、Prettierがあるときは、干渉しないようにフォーマットに関するルールを無効化しておく
-
Prettier：JS/TSのフォーマッタ。インデント数といったローレベルな内容から、セミコロンの有無や文字列のシングルクォート/ダブルクォートの統一など、意味的な内容まで幅広い。
- ESLintとPrettierをTypeScript環境に入れる方法については、この記事を参照。
- EditorConfig：インデント数や文字コードなど、ローレベルなコードスタイルを記述するための仕様。JS/TS以外の様々な言語も対象にできる。IDE側やツールがEditorConfigを見てフォーマットを効かせたりする
つまり、この文脈でフォーマットにESLintは関係ない。
この後、PrettierとEditorConfigの関係性について解説する。
なぜEditorConfigを入れても困らないのか
PrettierはEditorConfigを読み込み、フォーマットに反映している。
つまり、Prettierも、EditorConfigを見てフォーマットを効かせるツールの一種と言える。
Prettierの公式ドキュメントはこちら。
共存時の運用について
両ツールの設定値の関係性について
PrettierはEditorConfigの全ての設定値をサポートしているわけではない。
UTF-8の文字コードや、最終行の挿入などの動きはオーバーライドできないが、そもそもPrettierとして設定できない動きなので、Prettierを採用している以上は織り込み済みだろう。
PrettierとEditorConfigを両立させるための設定
特に必要ない。
prettierの公式ドキュメントはこちら。
JavaScriptAPIとしてはoptions.editorconfigにtrueを渡す必要があるものの、CLI経由ではデフォルトでtrueになるようである。
※JavaScriptAPIを利用する場合には、明示的に引数を渡す必要がある。
モノレポにおける挙動
Prettierは、.prettierrc同様、.editorconfigについてもフォルダ階層を意識して設定ファイルを探すため、モノレポでも問題なく機能する。
公式の仕様解説はこちら。
実際に動作も確認できた。
個人的見解編：EditorConfigとPrettierを共存させるべきか
EditorConfigとPrettierを共存させる以外に、Prettierに直接全ての設定を集約する方法もある。
どちらが望ましいだろうか。
結論
どちらかといえば、EditorConfigも利用したほうが良いと筆者は考える。
理由
ソースコードの品質担保という観点では、pre-commitでprettier + eslintが実行されれば問題ない。
しかし、プログラミング中の生産性という観点では、IDEがPrettierを理解していない状態だと、コードスタイルが既存のコードベースと合わなくなる。
例：IntelliJ IDEAの場合、EditorConfigはプリインストールされているが、Prettierはプラグインをインストールしない限り設定を理解しない。
特にインデントの種類やインデント数は、統一されていないとひと目で分かるほど気になるので、書きながらつい手で直してしまって生産性が下がったり、コードを書いていて不快に感じる人が多いだろう。
EditorConfigはより多くのIDEでサポートされているため、EditorConfigを記載しておくことで、開発メンバのIDEがPrettierを理解しなくても、最低限インデントや最大行長などが効いた状態でプログラミングすることができる。
まとめ
EditorConfigとPrettierを共存させることは可能である。
また、是非については、どちらかというと望ましいと考える。より多くのプログラミング環境で快適にプログラミングができると推測するためである。
追伸
この記事はMagicodeから移転しました。
2022年9月あたりの記事となります。
よければTwitterもフォローお願いします！
@sumiren_t
Discussion