2017/01/12更新

[フロントエンド] 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の脳にすべく、情報をブログに貯めています。気になった方は、本ブログのRSSTwitterをフォローして頂けると幸いです ^ ^。

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





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。