EditorConfigを使って、テキストエディターの設定を共通化しよう

こんにちは、プロクラスの国府です

1つのプロジェクトで、複数の人がテキストエディタを使う場合、

文字コード、改行の種類、インデントの種類などを合わせる必要が出てくると思います

特にGitなど、バージョン管理を使う場合は尚更だと思います

そこで、今回はEditorConfigを使って、テキストエディタの設定を共通化する方法を

ご紹介します

私は普段、VSCodeというテキストエディタを使っているので、こちらでの設定方法になります

あしからず

公式ホームページは、こちらになります

対応しているエディタは、こちらを確認してください。

かなりたくさんのエディタが対応していると思います。

こんなにたくさんのエディタがあることにもびっくりしました。

読者さんのエディタは、対応しているでしょうか？

対応ページの

「No Plugin Necessary」という見出しにあるエディタは、

ネイティブで対応しています。そのままで、あとは設定ファイルを置けば

動きます。設定ファイルの書き方は、後述します

「Download a Plugin」という見出しにあるエディタは、

そのままでは対応していないので、プラグインとかモジュールとか拡張機能とかのソフトを

インストールすれば使えるようになります。

各エディタごとにインストールが必要なソフトは、

「Main Contributors」に、書いてあります。

ここからは、VSCodeでEditorConfigを使う方法を説明していきます

残念ながら、プラグインをインストールしないとそのままでは対応していないようです

VSCodeにプラグインをインストールしましょう。

下の画像をみながら、インストールしてみてください。

これでインストールは完了です。

ここからは、プラグインの有無に関わらず、各エディタ共通の設定になります。

EditorConfigは、「.editorconfig」というファイル名のファイル

をプロジェクトフォルダ直下に置くことで設定を行います。

こちらが、.editorconfigのサンプルになります。

各パートに沿って、説明します。

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true

# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,py}]
charset = utf-8

# 4 space indentation
[*.py]
indent_style = space
indent_size = 4

# Tab indentation (no size specified)
[Makefile]
indent_style = tab

# Indentation override for all JS under lib directory
[lib/**.js]
indent_style = space
indent_size = 2

# Matches the exact files either package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

①editorconfigファイルの検索を停止するかどうか。

# top-most EditorConfig file
root = true

エディタでファイルを開くと、ファイルのあるディレクトリから親ディレクトリ向かって

.editorconfigファイルを探しに行きます。見つかった場合に「root = true」であれば検索を停止して、その.editorconfigファイルにある設定に従います。

②ファイルごとの設定

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true

このブロック単位で、ファイルごとの設定を行います。

ファイルの指定は、[]で囲みます。

「end_of_line = lf」は、指定されたファイルにどういったエディタ設定を適用するかという意味になります。この場合は「改行コードはラインフィードを使う」いう意味になります。

③ファイルの指定方法

上記②で説明したファイル指定の方法を詳しくみていきます。

[]の中は、ワイルドカードに対応しています。

*: パス区切り文字 (/) を除く任意の文字列と一致します。たとえば、[*]はプロジェクト直下の全てのファイルに対して設定すると意味になります
**: 任意の文字列と一致します
?: 任意の 1 文字と一致します
[name]: 文字列がnameに一致する
[!name]: 文字列がnameに一致しない
{name1,name2,name3}: 文字列がname1 name2 name3のいずれかに一致する（カンマで区切る）
{num1..num2}: num1 と num2 の間の任意の整数と一致します。num1 と num2 は正または負のいずれかになります。

④ファイルに対して、エディタの設定方法

indent_style = [ tab | soft]: インデントの方法をタブ（ハードタブ）またはスペース（ソフトタブ）にするかを指定します。
indent_size = 整数: インデントに使用するスペースの数を指定する
tab_width = 整数: タブ文字で使用するスペースの数.デフォルトでは、上のindent_sizeの値が使われるので、普段は使われない。
end_of_line = [lf | cr | crlf ] : 改行文字を指定する
trim_trailing_whitespace = [ true | false ]: 改行文字の前にある空白文字を削除するか
insert_final_newline = [ true | false ]: ファイルの最終行を、改行のみにするか

以上が、EditorConfigの使い方になります。

とてもプロジェクト開発で便利なので、ぜひ使ってみてください。

関連