EditorConfigでエディタの設定を統一する
EditorConfigとは様々なエディタの設定を統一するための設定ファイルです。
EditorConfigとは?
たとえば複数人で実装を行うプロジェクトで、実装者がそれぞれの実装箇所でインデントを1タブだったり2スペースだったり4スペースだったりと自分勝手なインデントルールで行なっているとマージの際に様々なインデントルールがミックスされたファイルが出来上がってしまいます。
多くのプロジェクトではそれらを防ぐためコーディングルールなどの共通ルールを設けてコードの品質を均一化しようとしているのではないかと思います。
とはいえ、このコーディングルールというものだけでは守っているつもりだけど抜けてしまう箇所などがでてきてしまったりと実装者に依存してきます。
EditorConfigはプロジェクト共通の設定ファイルを用意しておくと、様々なエディタの設定を強制的に設定ファイルの内容に合わせることができ実装者への依存を減らすことができます。
EditorConfigが2スペースの設定の場合はTabキーを入力してもエディタ側で勝手に2スペースに変換されるためコーディングルールから逸脱することが難しくなります。
対応エディタは?
プラグインの要不要はありますが主要なエディタはほとんど対応してます。(Dreamweaverや秀丸は対応してないです)
デフォルトで対応
プラグインを入れれば対応
プラグインが必要なエディタはプラグインをインストールして有効にしておきましょう
.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»