EditorConfigとは何ですか？

エディターやIDEの種類を問わず、インデントや改行コードなどのコーディングスタイルを統一するための設定ファイル規格。チーム開発でのスタイル不一致を防ぐ。

EditorConfigのポイントは？

.editorconfigファイルをプロジェクトに置くだけで、インデント幅や改行コードをエディター間で統一できる。VS Code、IntelliJ、Vim、Emacs など主要エディターがプラグインまたはネイティブで対応。ファイル種類ごとに設定を分けられるので、JavaScriptは2スペース、Pythonは4スペースといった使い分けが可能。PrettierやESLintなどフォーマッターの前段として、最も基本的なスタイルルールを担う

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

EditorConfig とは？

💡 VS CodeでもVimでも、コードのお作法をピシッと統一

📌 このページのポイント

.editorconfigファイルをプロジェクトに置くだけで、インデント幅や改行コードをエディター間で統一できる
VS Code、IntelliJ、Vim、Emacs など主要エディターがプラグインまたはネイティブで対応
ファイル種類ごとに設定を分けられるので、JavaScriptは2スペース、Pythonは4スペースといった使い分けが可能
PrettierやESLintなどフォーマッターの前段として、最も基本的なスタイルルールを担う

EditorConfigによるスタイル統一のイメージ

ひよこ

チームメンバーとインデントが合わなくて困ってるんだけど...

ペンギン先生

それはEditorConfigの出番だね。.editorconfigというファイルをプロジェクトのルートに置くだけで、誰がどのエディターを使っていてもインデント幅や改行コードが統一されるよ

ひよこ

Prettierでフォーマットすれば同じことじゃない？

ペンギン先生

PrettierはJavaScriptやCSSなど対応言語のフォーマットだけど、EditorConfigはMakefileやYAMLなどPrettierが対象にしない言語にも効くんだ。両方使うのがベストだよ

ひよこ

設定って難しくない？

ペンギン先生

すごくシンプルだよ。たとえばindent_style = space、indent_size = 2 と書くだけ。INI形式で直感的に読み書きできるんだ

ひよこ

VS Codeだと何か入れる必要ある？

ペンギン先生

VS Codeの場合はEditorConfig拡張をインストールするだけだよ。IntelliJやWebStormは標準で対応しているから追加インストールも不要なんだ

ひよこ

ぶっちゃけ、どのくらいのプロジェクトで使われてるの？

ペンギン先生

GitHubの人気リポジトリを見ると、かなりの割合で.editorconfigが置いてあるよ。設定コストがほぼゼロなのにチーム全体のストレスを減らせるから、入れない理由がないんだよね

まとめ：ざっくりこれだけ覚えればOK！

「EditorConfig」って出てきたら「どのエディターでもスタイルを揃える設定ファイル」と思えればだいたいOK！

📖 おまけ：英語の意味

「EditorConfig」＝エディター設定

💬 Editor（エディター）とConfig（設定）を組み合わせたそのままの名前だよ。シンプルな名前だけど、やることもシンプルで分かりやすいんだ

← 用語集にもどる