EditorConfigでコーディングルールの統一

チーム内で同じエディターを使われていますか？  

- SublimeText
- Atom
- Vim
- IntelliJ IDEA

その他様々なエディターがチームでバラバラに使用していることが多いと思います。

またエディターだけでなく 
「htmlのインデントはタブで( +･｀ω･)b」  
「cssのインデントはスペースで(　･`ω･´)」
のようにそれぞれの自分ルールが存在していて、新しく入った人は間違えるだけで怒られることも...  (￣ー￣；

そんな時コーディングルールを統一できれば喧嘩も起きず
チームのみんなが、自分の好きなエディターを統一されたルールで
使用できれば嬉しいですよね？

今回紹介するのは[EditorConfig](http://editorconfig.org/)です。   

![illustrain05-etonezumi08.png](https://qiita-image-store.s3.amazonaws.com/0/162922/b784c922-f1dd-2ec4-5415-6b519fa96a28.png)

設定自体すごく簡単で様々なエディターで共通して使用できます。

### 使用できるエディター
使用できるエディターはこれだけあります。

<b>インストールが不要なもの</b>
<img width="665" alt="スクリーンショット 2017-02-28 12.02.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/162922/9e95ffb5-f82d-ba71-0709-0ccadb212671.png">

これらのエディターには最初から入っています。

<b>インストールが必要なもの</b>
![スクリーンショット 2017-02-28 12.03.22.png](https://qiita-image-store.s3.amazonaws.com/0/162922/dab10c5d-ab42-a70f-8eb8-6f73bc7f487c.png)

### 導入方法
僕は今回3つのエディターで試したので、その際の導入方法を書きます。
</span>
### Sublime Text
Macの場合
1. [cmd]+[shift]+[p]でパッケージコントロールを開きます
2. [install]と入力してInstallPackageを開きます
3. 開いたInstallPackageで[EditorConfig]を入力して選択します
### Vim
Mac Vundleの場合
1. ~/.vimrcを開きPluginに`Plugin 'editorconfig/editorconfig-vim'`を追記します。
2. exモードで`:PluginInstall`を入力します。
二画面モードになり`Done!`と表示されれば導入は完了です。
### IntelliJ IDEA
Mac
intelliJには元々入っていますが有効になっていない場合があるため
1.Preferences > PluginsのEditorConfigが有効になっていることを確認してください。

### 設定方法
プロジェクトディレクトリ配下に  
「.editorconfig」ファイルを作成して記述していきます。  

#### .editorconfigファイルの書き方
- <b>indent_style</b>  
ハードタブかソフトタブか。tabかspaceを指定できます。
- <b>indent_size</b>  
インデントを半角スペースいくつ分にするか。
- <b>tab_width</b>  
タブの幅。省略するとindent_sizeの幅が適応されます。
- <b>end_of_line</b>  
改行コードの種類(lf,cr,crlf)を指定する。
- <b>charset</b>  
文字コード。
- <b>trim_trailing_whitespace</b>  
行末の空白を削除するかどうか。(true||false)
- <b>insert_final_newline</b>  
最終行に空行を入れるかどうか。(true||false)
- <b>root</b>  
必ず先頭に記述します。  
これをtrueにしておかないとルート・ディレクトリまでたどってしまいます。  
このファイルを最上位の階層として以下のディレクトリのみを検索する。  
</span>

#### ファイル名の指定方法

|セレクタ|効果    |
|:----- |:----- |
| * | "/"を除いた任意の文字列 |
|**| 任意の文字列 |
|?|任意の一文字|
|[name]|*name*に一致するもの|
|[!name]|*name*に一致しないもの|
|{s1,s2,s3}|*s1,s2,s3*に一致する各々|

### 使い方
<span style="font-size: 110%">
今回導入するにあたって、実際に書いた.editorconfigファイルが以下になります。  
例としてみてください！  
</span>

``` bash:.editorconfig
# root検索の停止
root = true

[*]
end_of_line = lf

[*.md]
trim_trailing_whitespace = false
insert_final_newline = true

[*.html]
charset = utf-8
indent_size = 2
indent_style = space
trim_trailing_whitespace = true
insert_final_newline = true

[{*.css,*.scss}]
charset = utf-8
indent_size = 2
indent_style = space
trim_trailing_whitespace = true
insert_final_newline = true

[{*.js,*.jsx}]
charset = utf-8
indent_size = 2
indent_style = space
trim_trailing_whitespace = true
insert_final_newline = true


```
<span style="font-size: 120%">
このファイルはフロントで使用する言語ばかりですが、  
もちろんバックエンドの言語も使用できます！( • ̀ω•́ )✧  
</span>

<span style="font-size: 110%">
gitでファイル管理を行っている場合.editorconfigファイルを  
含めると<span style="color: #ff5252">全員のエディターで自動的に統一</span>されます。  
</span>

### 最後に
初めて見たときはたったこれだけの設定しかないのに意味あるのかな？
と思ったりしましたが、このルールすら守れていないと後から修正するのが
大変だったり、時間を使うことがあるので絶対入れたほうがいいなと思いました。
皆さんも是非導入して見てはいかがでしょうか？

#### 参考サイト
[EditorConfig 公式](http://editorconfig.org/)

↓こちらでも記事を公開しています！
[ネオキャリアグループの技術者による開発ブログ](http://neo-developers.hatenablog.com/entry/2017/03/21/110545)