ProgrammingVisual Studio Code
Visual Studio Code

EditorConfigを使ってコーディングスタイルを統一

EditorConfigの概要

EditorConfigはインデントや改行コードなど、コーディングスタイルを統一するための仕組みです。EditorConfigを導入すると、様々なエディタやIDE間で共通のルールを設定したり、プロジェクトごとに設定を変更・統一することができます。EditorConfigの導入で得られるメリットを下記に記載しました。

  • チームで共通のコーディングスタイルを設定できる
  • 様々なエディタで共通のコーディングスタイルを設定できる
  • プロジェクト毎に異なるコーディングスタイルを設定できる
  • JavaScriptやCSSなどファイルタイプ毎に異なるコーディングスタイルを設定できる

EditorConfigの正体は、.editorconfigという非常にシンプルな設定ファイルです。この設定に対応したエディタは、その設定を読み込んで保存時に自動的にフォーマットしてくれます。Visual Studio Codeはもちろん、Atom、Sublime、Vimなど様々なエディタが対応しています。

EditorConfigが有効になっているエディタは、プロジェクトディレクトリに.editorconfigがあればそのディレクトリ以下のファイルすべてにコーディングスタイルを適用します。Gitの管理対象に加えておけば、他のユーザはその設定をそのまま共有することができて便利です。

EditorConfigのインストール

Visual Studio Codeの場合はプラグインが用意されているので、インストールしてください。

コーディングスタイルの設定

EditorConfigをインストールしたらあとは適用したいプロジェクトに.editorconfigファイルを作成し、必要な設定を記述します。エクスプローラビューのフォルダ内で右クリックし、［Generate .editorconfig］を選択することでも.editorconfigファイルが作成されます。

ファイル例
root = true

[*]

# インデント時のスタイル設定（tab/space）
indent_style = tab

# インデント時のサイズ設定
indent_size = 4

# 改行コード設定（lf/cr/crlf）
end_of_line = lf

# 文字コード設定（latin1/utf-8/utf-8-bom/utf-16be/utf-16le/...）
charset = utf-8

# 文末スペースの設定（true=削除）
trim_trailing_whitespace = true

# 最終行の改行設定（true=改行あり）
insert_final_newline = true

EditorConfigの設定書式はプロパティ名 = 値です。

プロパティの設定

「EditorConfig for VS Code」プラグインでサポートされているプロパティは下記になります。

プロパティ値
rootEditorConfigは.editorconfigファイルが見つかるまで上位階層を探索します。この探索を同階層に限定したい場合はfalseに設定します。通常はプロジェクトのルートディレクトリに.editorconfigを設置し、その下層すべてに反映したいので、rootはtrueに設定します。
indent_styleインデントのスタイルを設定します。値にはspaceかtabを設定します。
indent_sizeインデントのサイズ（数値）を設定します。値には数値かtabを設定します。空白4つ分のインデントにしたい場合、indent_size=4とします。
end_of_line改行コードを設定します。値にはlf、cr、crlfが指定可能です。
charset文字コードを設定します。値にはlatin1、utf-8、utf-8-bom、utf-16be、utf-16leなどが指定可能です。
trim_trailing_whitespace文末のスペースを削除するかどうかの設定です。
insert_final_newline最終行に改行を入れるかどうかの設定です。tureにすると保存時に自動で最終行に改行を追加します。

すべてのプロパティと値は大文字と小文字を区別しません。プロパティが指定されていない場合、エディター設定が使用されます。

対象ファイルの指定

ファイル例にもある[*]という記号はファイルの種類を指定しています。アスタリスクは任意の文字を表すので、[*]ですべてのファイルを対象にしています。JSファイルとCSSファイルだけを対象にしたい場合は次のように書けます。

[*.js,*.css]

ファイル名やディレクトリ名に使えるワイルドカードパターンには次のようなものがあります。

記号説明
*パス区切り文字（/）を除く文字列
例：[*.js]
**特定ディレクトリの任意の文字列
例：[libs/**.js]
?任意の1文字
[name]指定したファイル名
例：[common.js]
[!name]指定したファイル名以外
例：[!common.js]
{s1,s2,s3}ファイル名s1 s2 s3のいずれか
例：[{.js,.css}]

関連記事