matsuo

EditorConfig でチームみんなのエディタの設定を揃える

みなさん、インデントはタブ派ですかスペース派ですか。
インデントは 2つですか 4つですか。

一人でコードを書いている分には好みの書き方でいいかと思いますが、チーム作業する場合には、ここを揃えておかないとエラいことになりますね。タブとスペースと混じったコードは見てて気持ち悪いですし、git のコミットログもめちゃくちゃになる。ストレスたまる。

なので何らかの規約に則って、各自がしっかりエディタの設定をすればよい!!!……とはいえ、この手間を楽にできたりはしないもんか。
たとえばプロジェクトごとに事情があり、この案件はタブであの案件ではスペース、という場合は? いちいち設定切り替える……? 設定忘れでコード崩れるとかつまらないので、できれば未然に防ぎたい。

 
ということで EditorConfig の出番となります。

EditorConfig とは?

http://editorconfig.org/

エディタをまたいで、プロジェクト単位に、設定を共有できるツールです。
以下のような設定をメンバー間で簡単に揃えることができます。

  • インデントサイズ
  • インデントスタイル (TAB or スペース)
  • 文字コード
  • 改行コード

チームメンバが別々のエディタを使っていてもOKというのがありがたい。

対応エディタはたくさんありますが、たとえば Sublime Text, Vim, Emacs, ATOM, Brackets, PhpStorm あたりはサポートされているようです。

インストール

まずはエディタに EditorConfig プラグインを入れます。インストールの仕方はエディタによって異なりますのでググるなどしてください。
例えば Sublime Text であれば、ふつうに Package Control からインストールできました。

.editorconfig という設定ファイルを書く

プロジェクトのルートフォルダに、こんな感じで設定ファイルを作成します。

見ていただければなんとなくお分かりかと思いますが、インデントをスペースに、文字コードを utf-8 に、改行コードを LF に設定しています。
そして拡張子が php のファイルはインデントサイズを 4 に、html / scss / coffee のファイルはインデントサイズを 2 に設定しています。こんな感じでファイル別に設定を分けることもできます。

冒頭の root = true は、プロジェクトのルートフォルダかどうかの設定。これを書いていない場合、親階層の .editorconfig ファイルも順にたどってくれるようです。

他にも行末の余分な空白を削除するかどうか?みたいな設定もありまして詳しくはオフィシャルサイトを。
http://editorconfig.org/#file-format-details

.editorconfigファイルを共有する

作った .editorconfig ファイルを共有し、メンバー全員が同じ .editorconfig ファイルを使うようにします。
といっても難しいことはなく、たとえばプロジェクトの git にこの .editorconfig ファイルを含めてしまえば、全員のエディタの設定が自動的に統一されるというわけです。

まとめ

楽!

最初にプラグイン入れて、.editorconfig 書いて git に入れるだけ!
あとは勝手に設定が揃う!
いらんトラブルを未然に防げる!

というわけで、今後あたり前に使っていくツールになりそうな予感です。

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら