【エディターコンフィグ】

EditorConfig とは?

最終更新:
💡 VS CodeでもVimでも、コードのお作法をそろえる

エディターやIDEの種類が違っても、インデントや改行コードなどのコーディングスタイルをそろえるための設定ファイルの形式と、それを読むエディター用プラグインの集まり。

📌 このページのポイント
EditorConfig: エディター間のスタイル統一 .editorconfig indent_style = space indent_size = 2 end_of_line = lf VS Code 2スペース / LF IntelliJ 2スペース / LF Vim 2スペース / LF 対応エディターなら同じスタイルに
EditorConfigによるスタイル統一のイメージ
ひよこ ひよこ
チームメンバーとインデントが合わなくて困ってるんだけど...
ペンギン先生 ペンギン先生
それはEditorConfigの出番だね。.editorconfigというファイルをプロジェクトに置くと、対応したエディターがそれを読んで、インデント幅や改行コードを設定に合わせてくれるよ。エディターが違っても同じ設定を共有できるのがポイントなんだ
ひよこ ひよこ
VS Codeだと何か入れる必要ある?
ペンギン先生 ペンギン先生
VS Codeはプラグイン(拡張機能)が必要だよ。公式サイトの一覧では、IntelliJやWebStorm、Vim、Neovim、Emacs、Visual Studioなどは標準で対応、VS CodeやSublime Text、Notepad++などはプラグインが必要、と分けて紹介されているんだ。対応していないエディターでは.editorconfigを置いても何も起きないから、そこは注意してね
ひよこ ひよこ
設定って難しくない?
ペンギン先生 ペンギン先生
シンプルだよ。INI形式で、たとえば indent_style = space、indent_size = 2 のように書くんだ。[*.py] のようにファイル名のパターンを見出しにすると、その種類のファイルだけに効く設定を書けるよ。指定できるのは、インデント、改行コード(end_of_line)、文字コード(charset)、行末の空白の削除、ファイル末尾の改行などだね
ひよこ ひよこ
Prettierでフォーマットすれば同じことじゃない?
ペンギン先生 ペンギン先生
役割が少し違うんだ。Prettierは対応している言語のコードを丸ごと整形し直すツール。EditorConfigは、書いている最中のエディターの設定をそろえるもので、Prettierが対応していない種類のファイルにも使えるよ。それに、Prettierはプロジェクトに.editorconfigがあると、インデントや改行コードなどの設定を読み取って自分の設定に反映してくれる(.prettierrcなどに書いた設定のほうが優先)。だから併用しやすいんだ
ひよこ ひよこ
フォルダーがたくさんあるときは、どの.editorconfigが使われるの?
ペンギン先生 ペンギン先生
開いたファイルのあるフォルダーから、親フォルダーへと順にさかのぼって.editorconfigを探すよ。「root = true」と書いたファイルが見つかるか、一番上のフォルダーに着いたら、そこで探すのをやめるんだ。だからプロジェクトの一番上に置くファイルには root = true を書いておくと、プロジェクトの外にある設定の影響を受けずに済むよ
ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「EditorConfig」って出てきたら「どのエディターでもスタイルを揃える設定ファイル」と思えればだいたいOK!
📖 おまけ:英語の意味
「EditorConfig」 = エディター設定
💬 Editor(エディター)とConfig(設定)を組み合わせた名前だよ

参考資料

← 用語集にもどる