EditorConfigとは
プロジェクトごとのコードフォーマットを、簡単に統一させることができる設定ファイルのことです。
設定ファイルがフォーマットを強制します。
そのため、下記のメリットがあります。
- 人によってインデントがタブになったりスペースになったり、といったことから解放されます。つまり複数人が関わるプロジェクトにも有効です。
- エディタ/IDEごとにフォーマットを環境設定から行うのは面倒です。EditorConfigはテキストファイルなので対応しているエディタであれば他のエディタで開いてもルールが保持されます。違うマシンのエディタで開いても、
.editorconfigという名前のファイルさえ移しておけばOKです。 - ルールの作成が簡単です。
- 各エディタの環境設定で1つ1つ設定する必要がありません。
- 環境設定を操作しないので、環境設定の方法を覚える必要がありません。
- テキストファイルなので、Gitなどでバージョン管理ができます。
- プロジェクトのルートに
.editorconfigという設定ファイルにルールを記述します。つまり、各プロジェクトごとのルールを作成できます。
EditorConfigの使い方
.editorconfig
root = true
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 4
trim_trailing_whitespace = true
[*.md]
trim_trailing_whitespace = false
[*.{yml,json,scss,html,js,vue,blade.php}]
indent_size = 2
上記のように、コードフォーマットのルールを記載した.editorconfigというファイルをプロジェクトのルートディレクトリに保存します。
そうすることで、そのディレクトリ以下全てのファイルに設定が適用されます。
上記のファイルだと、
- 文字コードはUTF-8
- 改行コードはLF
- インデントはスペース4文字、ただしscss、html、jsなど特定の拡張子のファイルはスペース2文字
というルールになります。
[]の中身はファイルの適用範囲です。
ディレクトリやファイルを指定でき、ワイルドカードも使えます。
プロジェクト内全てのファイルに適用させることも、特定の拡張子に適用させることも可能です。
上記にはありませんが、特定のディレクトリだけに適用させることもできます。
各ルールはプロパティ名 = 値の形式で追記していきます。
一番上の行にはroot = trueを必ず記述します。
プロジェクトのルートディレクトリであることを示します。
記述法は下記です。それほど多くのルールはありません。
EditorConfigのパターン
| パターン | 意味 |
|---|---|
| [*] | 全てのファイル |
| [*.php] | 全てのPHPファイル |
| [*.{css,html,js}] | 全てのCSS/HTML/JavaScriptファイル |
| [package.json] | package.jsonという名前のファイル |
| [config/*] | configディレクトリ内にある全てのファイル |
ワイルドカードそのものの意味はEditorConfigの公式サイトに記載されています。
EditorConfigのプロパティ
| プロパティ名 | 役割 | 値 |
|---|---|---|
| indent_style | インデントの種類 | space, tab |
| indent_size | インデントサイズ | 数値 |
| tab_width | タブ幅※インデントの種類をタブにしたときのみ | 数値 |
| end_of_line | 改行コードの種類 | lf, crlf, cr |
| charset | 文字コード | latin1, utf-8, utf-8-bom, utf-16be, utf-16le, etc... |
| trim_trailing_whitespace | 行末の空白を自動で取り除く | true, false |
| insert_final_newline | ファイルの最終行に空行を追記する | true, false |
対応しているエディタ
詳細はEditorConfigの公式サイトに記載されています。
プラグインなしで、インストールすれば利用可能
- BBEdit
- Code Crusader
- CodeLite
- elementary Code
- GNOME Builder
- GitHub
- GitBucket
- Gogs
- intelliJ
- KTextEditor
- Komodo
- Kakoune
- MonoDevelop
- PyCharm
- ReSharper
- Rider
- RubyMine
- sourcehut
- SourcLair
- TortoiseGit
- Visual Studio Professional
- WebStorm
- Working Copy
プラグインをインストールすれば利用可能
- AppCode
- Atom
- Brackets
- CLion
- Coda
- Code::Block
- Eclipse
- Emacs
- Geany
- Gedit
- jEdit
- Lazarus
- Micro
- NetBeans
- Notepad++
- PHPStorm
- Sublime Text
- Textadept
- TextMate
- Vim
- Visual Studio Code