.editorconfigは複数人でコードを書く際、使うエディターやその人のクセによってコーディングのスタイルがバラバラになるのを防ぐファイルです。
「インデントはタブ派orスペース派」や、「インデント幅は2派or4派」みたいな部分は個人によって結構違いますよね。
「どんなエディターを使っても誰がコードを書いても常に一定のルールに則ったコードにしたい…」そんな願いを叶えるのがeditorconfigです。
というわけで今回は.editorconfigの設定の仕方を解説していきます。
.editorconfigを導入するメリット
どんなエディターを使っても誰がどんなコードを書いてもを常に一定のルールに則ったコードになるので統一性が保てる
これに限ります。
.editorconfigがない場合、人によってインデント幅が2だったり４だったり、タブだったりスペースだったりと結構バラバラになります。こんなファイルがプロジェクト中に散らばってたらイライラしますよね。
そこで.editorconfigを使ってインデント幅やインデントスタイルを統一することで、誰がどんなエディターで作業しても一定の規則に則ったコードになります。チームで複数人が関わるならもはや必須ですね。
もちろん個人で開発するときも全然使えます。エディターを変えてもインデント幅などが常に一定になるので、全てのプロジェクトで統一性のあるコードが書けるようになります。
.editorconfigの書き方
.editorconfigはこんな感じで書きます。
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = false
それぞれの項目の意味は以下の通り。
| root | trueを指定することでプロジェクト全体に.editorcofigの設定を反映します。基本的に常にtrueにしておきます。 |
|---|---|
| [*] | 「全ファイルに適用」という意味です。特定のファイルのみ別の設定にすることもできます（後述） |
| indent_style | インデントをタブにするかスペースにするか指定できます。値はtabかspaceのどちらかです。 |
| indent_size | インデント幅を指定します。2か4あたりが定番。 |
| end_of_line | 改行コードを指定できます。値はlf、cr、crlfのどれかです。迷ったらlfでいいと思います。 |
| charset | 文字コードを指定します。色々指定できますが基本的にutf-8でokです。 |
| trim_trailing_whitespace | 行末にスペースがあった場合、取り除くか指定できます。値はtrue、falseのどちらかです。trueにするとファイル保存時に自動で行末のスペースを取り除いてくれます。 |
| insert_final_newline | 最終行に改行を入れるかどうかを指定できます。値はtrue、falseのどちらかです。trueにするとファイル保存時に自動で最終行に改行を入れてくれます。 |
root = trueと[*]は基本変えないので設定項目は6つしかありません。
設定も簡単！楽勝です。
特定のファイルのみ.editorconfigの設定を適用する
特定のファイルのみ.editorconfigの設定を適用したい場合は以下のように書くこともできます。
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = false
[*.md, *.json]
indent_size = 4この場合、〜.mdと〜.jsonのみインデント幅が4になります。
指定の仕方は以下の通りです。
| * | 「/」を除く任意の文字列に一致 |
|---|---|
| ** | 任意の文字列に一致 |
| ? | 任意の1文字に一致 |
| [ファイル名] | 特定のファイル名に一致 |
| [!ファイル名] | 特定のファイル名以外 |
| {ファイル1, ファイル2, ファイル3} | 指定された特定のファイル名に一致 |
特定の拡張子やファイルだけ設定を変えたい場合に便利ですね。
.editorconfigを適用する方法
1.エディターに拡張機能を入れる
実は.editorcinfogはファイルを用意しただけでは機能しません。
エディターに.editorconfigの設定を反映させるためのパッケージやプラグインを入れる必要があります（ここ忘れがち）。.editorconfigの設定が効かない人は使っているエディターにプラグインが入っているか確認してみてください。
エディターのプラグインインストール画面から「editorconfig」とか調べると出てくると思うのでインストールしちゃいましょう。
VSCodeの場合はこれですね。AtomやSublime Textなどでも似たようなプラグインがあるのでインストールしちゃってください（一部デフォルトで対応しているエディターもあります）。
チームなど複数人で開発する場合は全員のエディターに.editorconfigのプラグインが入っているか事前に確認しておくといいですね。
2.プロジェクトのルートディレクトリに.editorconfigを置く
ルートディレクトリに置きます。これだけ。
置いたら試しに適当なファイルをいじってみましょう。設定が反映されているのが確認できるはずです。
まとめ
とにかく設定がめちゃめちゃ簡単で1分くらいで終わります。使わない手はありません！
特に複数人で開発しているときはかなり使えるのでコードの品質を常に一定に保つ為にも導入するのをオススメします。
もちろん個人でもエディターによらず常に一定のルールに則ったコードが書けるので入れておいて損はないですよ！
