[フロントエンド] EditorConfigを用いて複数のエディタで同じコードスタイルを用いた開発を行う

こんにちは、@yoheiMuneです。
今日は、EditorConfigを用いて、複数にいるチームで人それぞれ違うエディタを使っていたとしても、同じコードスタイルを適用できるようにする方法をブログに書きたいと思います。

目次

EditorConfigとは

EditorConfigとは、異なる複数のエディタでコードスタイル（インデントや改行コードなど）を揃えることができるツールです。これをプロジェクトルートに配置して使うと、Sublime Textの人も、Vimの人も、Atomの人も、同じ設定で（エディタの設定を変えることなく）コードを書くことができます。
対応エディタも以下の通りで、かなり多くの範囲をカバーしています。

設定なしに使えるエディタ一覧

プラグインを入れて使えるエディタ一覧

プラグインが必要なエディタは、こちらで該当のエディタのアイコンをクリックすると、インストール方法を見ることができます。Sublime Textの場合はPackegeControl、Atomの場合はapmインストール、Vimの場合はNeoBundleでインストール、といった具合です。

EditorConfigの使い方

各種プロジェクトのルートに.editorconfigというファイルを配置することで、エディタが自動的にそれを読み取って使えるようになります。.editorconfigの中身は以下のような設定を書くことができます。

# .editorconfig

# プロジェクトルートではroot=trueを指定
root = true

# 全てのファイルに適用する設定
[*]
indent_style = space                # インデントはホワイトスペース
indent_size = 2                     # インデントサイズは2
end_of_line = lf                    # 改行コードの指定
insert_final_newline = true         # 最終行に空行を入れるかの設定
trim_trailing_whitespace = true     # 保存時に不要な行末余白の削除

[*.html]
indent_size = 4                     # ファイルごとに個別指定もできる

[*.md]
trim_trailing_whitespace = false    # マークダウンだと行末余白に意味があるので、トリムしない

といった感じに書くことで、設定を書くことができます。詳しい詳細は、以下のページをご覧ください。
http://editorconfig.org/

最後に

コードの一貫性を担保する方法は色々とありますが、エディタの設定を統一できるのはミスが減るので非常に良いですね。今後活用していきたいと思います。

最後になりますが本ブログでは、フロントエンド・Go言語・Node.js・Python・Linux・開発関連・Swift・Java・機械学習など雑多に情報発信をしていきます。自分の第2の脳にすべく、情報をブログに貯めています。気になった方は、本ブログのRSSやTwitterをフォローして頂けると幸いです ^ ^。

最後までご覧頂きましてありがとうございました！