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

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

**この問題を解決するためエディターやIDE(統合開発環境)の違いによらず、コードスタイルを統一するためのツールとして「[EditorConfig](http://editorconfig.org/)」が有名です**。本エントリーでは、EditorConfigの基本的な設定方法を紹介します。

# EditorConfigの設定
EditorConfigにおける設定は、`.editorconfig`というファイルに記述します。次のように、コードスタイルを記述します。

```bash
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](https://github.com/editorconfig/editorconfig/wiki/EditorConfig-Properties#current-universal-properties)より

## 対象ファイルの指定方法
前述の`.editorconfig`のうち、`[*]`部分がコードスタイルを適用する対象ファイル。`*`は全ファイルを対象するという意味です。**ファイルの指定にはワイルドカードが使用できます(記事「[EditorConfig - File Location](http://editorconfig.org/#file-location)」参照)**。

拡張子別にコードスタイルは設定できるので、例えば`HTML`ファイルのいみに別のコードスタイルを設定する場合は、次のように追記します。

```bash:
[*.html]
indent_size = 4
```

# EditorConfigの設定をコードに反映
EditorConfigは、主要なエディター・IDEで対応しています。有名所で言えば下記です。

- [AppCode](https://www.jetbrains.com/objc/)
- [Atom](https://atom.io/)
- [Brackets](http://brackets.io/)
- [IntelliJ IDEA](https://www.jetbrains.com/idea/)
- [PhpStorm](https://www.jetbrains.com/phpstorm/)
- [Sublime Text](https://www.sublimetext.com/)
- [Vim](http://www.vim.org)
- [Visual Studio](https://www.microsoft.com/ja-jp/dev/default.aspx)
- [Visual Studio Code](https://www.microsoft.com/ja-jp/dev/products/code-vs.aspx?Search=true)
- [WebStorm](https://www.jetbrains.com/webstorm/)
- [Xcode](https://developer.apple.com/jp/xcode/)

## WebStormでのコードスタイル適用例
WebStormで`.editorconfig`の**コードスタイルを反映させるには、ファイルを選択した状態で[Code]→[Reformat Code]を実行します**。キーボードショートカットを使うと便利です(macOSなら[alt]+[command]+[L])。なお、WebStormにもコードフォーマット機能がありますが、EditorConfigを有効にした場合、EditorConfigの設定が優先されます。

実際に動作する様子は下記です。

<blockquote class="twitter-video" data-lang="ja"><p lang="ja" dir="ltr">WebStormではEditorConfigがデフォルトサポートされている（だいぶ前から）。コードスタイル戦争を終結のための強力な味方。<a href="https://twitter.com/hashtag/WebStorm?src=hash">#WebStorm</a> <a href="https://twitter.com/hashtag/EditorConfig?src=hash">#EditorConfig</a> <a href="https://t.co/5CWFch2nxS">pic.twitter.com/5CWFch2nxS</a></p>&mdash; 鹿野壮（かのたけし） (@tonkotsuboy_com) <a href="https://twitter.com/tonkotsuboy_com/status/757837673256017920">2016年7月26日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

また、フォルダを選択した状態で[Code]→[Reformat Code]を実行することで、フォルダ内の全ファイルに対して一括でコードスタイルを設定できます。

# EditorConfigで複数人の開発も安全に
設定ファイル `.editorconfig`をGitHubで管理することで、EditorConfigに対応しているIDEであればコードスタイルを統一できます。**コードスタイルの統一はコードの見通しを上げ、バグの発生を防ぐ効果があります**。是非導入してみてください。

なお、WebStorm(IntelliJ IDEA)では、テキストファイルを直接編集することなく、UI上から設定が変更できて便利です。記事「[テキストファイルの編集不要、WebStormのEditorConfig設定機能がスゴイ](http://qiita.com/tonkotsuboy_com/items/bf668bf9a8f77e031ef5)」にて解説しました。