TECH BOX

Technology blog from Web Engineer

この記事は最終更新日から6年以上経過しているため正確ではないかもしれません

「EditorConfig」を利用してチーム内でのコーディングルールを統一しよう

  • 投稿日：

複数人で制作をしていると困るのが「コーディングルールがない」です。
また、ルール化していても単に文章で「インデントはスペース2つで…」というのではいつか死文化します。
また、プロジェクトごとにエディタの設定を変更するのも手間がかかります。

そこで、「EditorConfig」を利用することを推奨します。

EditorConfigとは

EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles. EditorConfig files are easily readable and they work nicely with version control systems.

〜公式サイトより〜

エディタとIDE(統合開発環境)で一貫したコーディングスタイルを定義し、維持することができる設定ファイルのことです。

設定ファイルは「.editorconfig」で作成します。
よほど事情がない限りプロジェクトのルートに置きましょう。

対応エディタ/IDE

対応エディタ/IDEは公式サイトに載ってますが代表的なものだけを紹介します。

プラグイン不要で置くだけで使える

  • GitHub
  • IntelliJ IDEA
  • WebStorm

ほか

プラグインのダウンロードが必要

ほか

サンプル

まずはどのように書くかを紹介します。

root = true

[*]
end_of_line = lf
charset = utf-8
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = false

[*.py]
indent_style = space
indent_size = 4

[*.md]
trim_trailing_whitespace = false
  • このファイルが存在するディレクトリより上の階層には適用しない
  • 改行コードはLF
  • ファイルのエンコードはUTF-8
  • インデントはスペース2つ
  • 行末の空白を削除
  • ファイルの最後に改行を挿入しない
  • pythonファイルではスペース4つ
  • markdownファイルでは行末の空白を削除しない

このサンプルではこんなルールになります。

指定方法

サンプルを見ればわかりますが、rootを除いては[xxx]で適用する形式を指定してその下にルールを記述していきます。
形式のルールはglobパターンを利用します。

ディレクトリパスは /(スラッシュ) のみが使用されます(OS関係なし)。

# 複数の拡張子にマッチ
[*.{js,json}]
indene_style = space

# 下階層直下のhtmlファイルのみに適用
[foo/*.html]
indent_style = tab

# 下階層のhtmlを再帰的に適用
[foo/**/*.html]
indent_style = tab

最後にマッチしたルールが優先

EditorConfigは上から下へ読み込まれていき、見つかった最新のルールを優先します。

root = true

[*.py]
indent_style = space

[*]
indent_style = tab

上記のような書き方だとpythonのインデントもタブになるので、記述する順番には気をつける必要があります。

大文字・小文字を区別しない

EditorConfigでは大文字・小文字を区別しません。
解析時に自動で小文字になります。

プロパティの指定をしない場合

デフォルトの値というものはないので、指定していないプロパティはエディタの設定に依存します。

エディタのデフォルトを使いたい

全体設定でプロパティを指定しているけど、特定の場合のみエディタの設定を利用したい場合はプロパティにunsetを指定することで定義を解除できます。

[*]
indent_style = tab
tab_width = 4

# PHPファイルのときはタブ幅はエディタに依存
[*.php]
tab_width = unset

サポートされているプロパティ

公式のWikiより参照。

root

ファイルが設置されているディレクトリをルートとする。

# 指定可能な値
root = true

例えば、fooディレクトリ内にEdtitorConfigを設置してroot=trueにした場合はルート直下のbar.htmlにはルールを適用しない。

root/
  ├ foo/
  │  └ .editorconfig
  └ bar.html

通常はこういう置き方をすることはないので、プロジェクトのルートに設置しましょう。

indent_style

インデントの種類。

# 指定可能な値
indent_style = tab
indent_style = space

indent_size

スペース数を指定。
indent_style = spaceの時にのみ設定可能。

# 指定可能な値
indent_size = 2   # 正数値
indent_size = tab

tab_width

タブ幅を指定。
indent_style = tabの時にのみ設定可能。
indent_sizeを正数で指定している場合はデフォルトがindent_sizeの数値。

# 指定可能な値
tab_width = 4   # 整数値

end_of_line

改行コードの指定。

# 指定可能な値
end_of_line = lf     # Linux/Unix/Mac OS X系
end_of_line = crlf   # Windows系
end_of_line = cr     # Mac OS 9まで

charset

文字コードの指定。
通常はutf-8で指定しておけば良い。

# 指定可能な値
charset = utf-8
charset = utf-8-bom
charset = utf-16be
charset = utf-16le
charset = latin1

trim_trailing_whitespace

行末の空白を削除するかの指定。

# 指定可能な値
trim_trailing_whitespace = true    # 削除する
trim_trailing_whitespace = false

insert_final_newline

ファイルの最後に改行して新しい行を追加するかの指定。

# 指定可能な値
insert_final_newline = true    # 追加する
insert_final_newline = false

trueを設定した場合は下記のように最終行の後に行を追加。

var foo = 'foo';  // 最終行がここで終了していた場合に自動で新しい行を追加

まとめ

EditorConfigは有名なプロジェクトや言語でも採用されています。
複数人での制作においてこういった自動でルールを適用してくれるというのは作業効率をアップさせることができるので、まだ導入していないのであればぜひ導入しましょう。