複数人でコードを書いている場合、スペースにするか・タブにするか、スペースなら何個にするか（インデント論争）、改行コードはどうするのかなど、各々のエディター設定によって出力されるコードスタイルに違いが出ます。コードスタイルの違いは変更履歴をわかりづらくし、バグの原因の一つとなります。
この問題を解決するためエディターやIDE(統合開発環境)の違いによらず、コードスタイルを統一するためのツールとして「EditorConfig」が有名です。本エントリーでは、EditorConfigの基本的な設定方法を紹介します。
EditorConfigの設定
EditorConfigにおける設定は、.editorconfigというファイルに記述します。次のように、コードスタイルを記述します。
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = crlf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
一つ一つの意味を見ていきましょう。
root = trueを記述すると、EditorConfigの影響範囲が.editorconfigファイルが置かれているフォルダ以下となります。
その他の設定内容は次のとおりです。
- indent_style：インデントのスタイル。スペース(space)かタブ(tab)か
- indent_size：インデントのサイズ
- end_of_line：改行コード
- charset：文字コード
- trim_trailing_whitespace：最終行の空白を削除するかどうか
- insert_final_newline：最終行に空行を入れるかどうか
.editorconfigファイルをGit等で共有することで、各開発者の各エディターのコードスタイルを統一できるのです。
※ GitHubのEditorConfig Propertiesより
対象ファイルの指定方法
前述の.editorconfigのうち、[*]部分がコードスタイルを適用する対象ファイル。*は全ファイルを対象するという意味です。ファイルの指定にはワイルドカードが使用できます(記事「EditorConfig - File Location」参照)。
拡張子別にコードスタイルは設定できるので、例えばHTMLファイルのいみに別のコードスタイルを設定する場合は、次のように追記します。
[*.html]
indent_size = 4
EditorConfigの設定をコードに反映
EditorConfigは、主要なエディター・IDEで対応しています。有名所で言えば下記です。
- AppCode
- Atom
- Brackets
- IntelliJ IDEA
- PhpStorm
- Sublime Text
- Vim
- Visual Studio
- Visual Studio Code
- WebStorm
- Xcode
WebStormでのコードスタイル適用例
WebStormで.editorconfigのコードスタイルを反映させるには、ファイルを選択した状態で[Code]→[Reformat Code]を実行します。キーボードショートカットを使うと便利です(macOSなら[alt]+[command]+[L])。なお、WebStormにもコードフォーマット機能がありますが、EditorConfigを有効にした場合、EditorConfigの設定が優先されます。
実際に動作する様子は下記です。
WebStormではEditorConfigがデフォルトサポートされている（だいぶ前から）。コードスタイル戦争を終結のための強力な味方。#WebStorm #EditorConfig pic.twitter.com/5CWFch2nxS
— 鹿野壮（かのたけし） (@tonkotsuboy_com) 2016年7月26日
また、フォルダを選択した状態で[Code]→[Reformat Code]を実行することで、フォルダ内の全ファイルに対して一括でコードスタイルを設定できます。
EditorConfigで複数人の開発も安全に
設定ファイル .editorconfigをGitHubで管理することで、EditorConfigに対応しているIDEであればコードスタイルを統一できます。コードスタイルの統一はコードの見通しを上げ、バグの発生を防ぐ効果があります。是非導入してみてください。
なお、WebStorm(IntelliJ IDEA)では、テキストファイルを直接編集することなく、UI上から設定が変更できて便利です。記事「テキストファイルの編集不要、WebStormのEditorConfig設定機能がスゴイ」にて解説しました。