ツール
EditorConfig
エディター
作業効率化
wenstorm

エディター間のインデントや改行コードを統一する為のEditorConfigの設定方法

複数人でコードを書いている場合、スペースにするか・タブにするか、スペースなら何個にするか(インデント論争)、改行コードはどうするのかなど、各々のエディター設定によって出力されるコードスタイルに違いが出ます。コードスタイルの違いは変更履歴をわかりづらくし、バグの原因の一つとなります。

この問題を解決するためエディターや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で対応しています。有名所で言えば下記です。

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設定機能がスゴイ」にて解説しました。