EditorConfigでプロジェクト・チーム間のエディタ設定を統一させる

EditorConfigでプロジェクト・チーム間のエディタ設定を統一させる

ひとりで行っているものであれば自分の中でルールが決まっているし使用するエディタがそのような設定になっていることがほとんどだと思うので特に必要ないと思いますが、逆に複数人で行うプロジェクトだったり自分とは全く異なるルールでコーディングしなければいけないとなると、毎回そのプロジェクト毎に設定を変更したり、他のメンバーにどのようなルールなのか説明するのが面倒です。そんな時に便利なのが「EditorConfig」というもので、例えばインデント設定や文字コードといったエディタ設定を自動で適用してくれるので、先述したようなプロジェクト・チーム間のエディタ設定を容易に統一させることができます。

EditorConfigでプロジェクト・チーム間のエディタ設定を統一させる 目次

  1. EditorConfigとは
  2. インストール
  3. 使用・記述方法
  4. Markdownを使用している場合
  5. 他のプロジェクトではどのように記述しているのか

1. EditorConfigとは

EditorConfig

「EditorConfig」は異なるエディタでも統一したコーディングスタイルを定義してくれる設定ファイルで、これを利用することで異なるエディタを使っていたり普段から違うコーディングスタイルのメンバーがいても簡単に同じ環境にすることができます。
インデントや文字コードなど設定できるものとしては以下のようなものがあります。

root
「true」にすることで上位階層の設定を読まなくなります。
また、この記述は設定ファイルの先頭に記述しておきます。
indent_style
インデント種類を「tab」か「space」かで設定できます。
indent_size
インデント幅を設定でき、設定値は整数で記述します。
tab_width
インデントの種類がタブの場合に幅を設定できますが、「indent_size」を設定しているなら基本省略して問題ないと思います。
記述する場合は設定値を整数で記述します。
end_of_line
改行コードを設定でき、設定値は「lf」「cr」「crlf」があります。
charset
文字コードを設定でき、設定値は「latin1」「utf-8」「utf-8-bom」「utf-16be」「utf-16le」があります。
trim_trailing_whitespace
「true」にすれば行末にあるスペースやタブといった空白文字を取り除いてくれます。
insert_final_newline
「true」にすれば最後の行に空行を入れてくれます。

目次へ

2. インストール

EditorConfigを各エディタで適用させるにはそれぞれでプラグインをインストールする必要があります。
エディタによってインストールが違うのでここでは省略しますが、大体は「EditorConfig」とプラグイン検索などして出てきたものをインストールするぐらいで、あとはサイト下部にイメージのように各エディタロゴが並べられており、そこからそれぞれインストール方法を確認したりすることができます。

プラグインをインストールできるエディタ一覧

※関係ないけど、この各エディタの緩い感じのロゴデザインいいですね。

イメージにあるようにBrackets、Sublime Text、Atom、Coda、Vim、Emacsなどよく利用されているエディタはひと通りあるので、自身で利用しているエディタでどのようにインストールするのか確認してください。

目次へ

3. 使用・記述方法

プラグインをインストールしたら.editorconfigという名前でファイルを作成し、設定を適用させたいプロジェクトフォルダなどに配置します。
サイトにもサンプルとして記述がありますが、設定ファイルは以下のような形で記述をしていきます。

.editorconfig

root = true

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

記述の順番としてはまず上位階層の設定を読まなくするために、ファイルの先頭にroot = trueを記述します。

次に[*]という記述では、その各設定を適用させるファイルを指定します。
上記の場合はすべてのファイルということになるのですが、例えばHTMLにだけ設定したいなら[*.html]、CSSにだけ設定したいなら[*.css]という感じで指定すれば、そのファイルにだけ適用させることができます。
その他のファイル指定方法としては**で任意の文字列、?で任意の1文字、[name]でファイル名指定、[!name]でファイル名以外を指定というものがあるので、これら指定方法を組み合わせれば特定のディレクトリ・ファイルで設定というのが可能になります。
また、ファイルは異なるけど同じ設定を使いたいという時は{s1,s2,s3}を使用し、例えば先述したHTMLとCSSを指定するときは[{*.html, *.css}]または[*.{html, css}]という感じで指定していきます。

あとはindent_stylecharsetといった各設定を記述して保存すれば各種エディタの設定がこの設定で統一されるようになるので、これを例えばgitで一緒に管理したり、一緒に動いている他のメンバーに共有するなどすれば、みんなが同じエディタ設定で作業を行うことができます。

ちなみに#を使えばコメントを記述することもできるので、ちょっとしたメモを残したい時などは以下のようにして記述します。

.editorconfig

# comment here...

目次へ

4. Markdownを使用している場合

自分が使用する際は大体[*]を指定するのですべてのファイルにこれら設定を適用させるのですが、ディレクトリ内にMarkdownがある場合は少し追記をして使用します。
具体的にはtrim_trailing_whitespace = trueで行末にあるスペースを取り除くよう指定していますが、Markdownの場合は改行させるために意図的にスペースをいれることもあります。
なので、Markdownを多用している人は上記に加え.editorconfigに以下も記述しておくと良いと思います。

.editorconfig

[*.md]
trim_trailing_whitespace = false

目次へ

5. 他のプロジェクトではどのように記述しているのか

例えばWordPress、jQuery、AngularJS、Bootstrap、Node.js、gulpのような数多くのフレームワークやライブラリなどが主にGitHubを利用するなどして公開されていますが、それらを見てみると多くのプロジェクトでもEditorConfigが利用されています。
そこまで大きく記述が変わるというものではないですが、もし他のプロジェクトはどのように設定しているのか気になる場合は、以下に一覧化されてまとめられているので、興味ある方は見てみてください。

目次へ

Back to Top

EditorConfigでプロジェクト・チーム間のエディタ設定を統一させる

EditorConfigでプロジェクト・チーム間のエディタ設定を統一させる

/ Services & Resource

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。