EditorConfigでエディタの設定を統一する

EditorConfigでエディタの設定を統一する

EditorConfigとは様々なエディタの設定を統一するための設定ファイルです。

EditorConfigとは?

たとえば複数人で実装を行うプロジェクトで、実装者がそれぞれの実装箇所でインデントを1タブだったり2スペースだったり4スペースだったりと自分勝手なインデントルールで行なっているとマージの際に様々なインデントルールがミックスされたファイルが出来上がってしまいます。

多くのプロジェクトではそれらを防ぐためコーディングルールなどの共通ルールを設けてコードの品質を均一化しようとしているのではないかと思います。

とはいえ、このコーディングルールというものだけでは守っているつもりだけど抜けてしまう箇所などがでてきてしまったりと実装者に依存してきます。

EditorConfigはプロジェクト共通の設定ファイルを用意しておくと、様々なエディタの設定を強制的に設定ファイルの内容に合わせることができ実装者への依存を減らすことができます。

EditorConfigが2スペースの設定の場合はTabキーを入力してもエディタ側で勝手に2スペースに変換されるためコーディングルールから逸脱することが難しくなります。

対応エディタは?

プラグインの要不要はありますが主要なエディタはほとんど対応してます。(Dreamweaverや秀丸は対応してないです)

デフォルトで対応

EditorConfigにデフォルトで対応

プラグインを入れれば対応

プラグインを入れればEditorConfigに対応

プラグインが必要なエディタはプラグインをインストールして有効にしておきましょう

.editorconfigの作成

ルートディレクトリの指定

EditorConfigの設定ファイルは.editorconfigという名称で基本的にはプロジェクトのルートディレクトリに配置します。

ルートディレクトリに配置する場合は「root = true」と記述を行います。

root = true

対象ファイルの指定

次に設定を行うファイル名を[....]内に記述を行います。

ファイルの指定には簡単な正規表現のようなものが利用でき、

などが可能です。

root = true
  
[*]
# 全ファイルへの設定
  
[*.html]
# HTMLファイルへの設定
 
[{*.scss,*.css}]
# CSSファイルとSCSSファイルへの設定
  
[{*.js,*.jsx}]
# JSファイルとJSXファイルへの設定

設定の指定

EditorConfigでは以下の様な設定が可能です。何も指定をしなければエディタの設定が採用されます。

設定名設定値
indent_style 「tab」でタブインデント、「space」でスペースインデント
indent_size インデントにspace選択時に1インデントスペースいくつかを設定できる
tab_width インデントにtab選択時にタブのサイズを設定できる
end_of_line 改行コードに「lf」 , 「cr」 , 「crlf」が指定できる。
charset 文字コードに「latin1」 , 「utf-8」 , 「utf-8-bom」 , 「utf-16be」 , 「utf-16le 」が指定できるが「utf-8-bom」は非推奨
trim_trailing_whitespac 行末の空白を取り除くかどうかを「true」と「false」で指定できる
insert_final_newline 最後に空行をいれるかどうかを「true」と「false」で指定できる

たとえば以下のように設定すると基本的には文字コード:UTF-8、改行コード:LFでインデントはタブとなるが、拡張子が「js」、「jsx」、「json」の場合は2スペースのインデントを採用するというルールを適応することができます。

root = true
  
[*]
charset = utf-8
end_of_line = lf
indent_style = tab
  
[{*.js,*.jsx,*.json}]
indent_style = space
indent_size = 2

このようにEditorConfigさえ設定してしまえば実装者の好みやエディタの設定によって成果物にバラつきが出るのを防ぐことができますので、複数人で作業する場合は設定しましょう。

スポンサードリンク

«「WordCamp Tokyo 2016 」にLTで出演します | メイン | git-flowとGitHub Flow»