今さら聞けないEditorConfig
EditorConfig とは
EditorConfig(エディターコンフィグ) は, コードエディタ間でファイル(コード)のフォーマットを一貫させるための設定ファイル形式およびプラグインです.
プロジェクトのルートディレクトリに設置した .editorconfig という名前のファイルに設定を記述します.
エディタはこのファイルを読み込み, コードを一貫したスタイルで編集できるようにします.
EditorConfig は, さまざまなプログラミング言語/ファイル形式やエディタに対応しており, プロジェクト内の複数の開発者が同じコーディングスタイルに従い, プロジェクト全体でコード品質を向上させるのに役立ちます.
ソフトウェアエンジニア界隈では割りと常識っぽいところがあるので,「今さら聞けない」感じは結構あるような気がしています. (が,これに限らず, 今さら聞けないとは思わずにバンバン聞いて欲しいとは思っていますが. "質問は恥ではないし役に立つ" とかでググると良い記事が出てくると思います. 私が書いたものではないですが.)
シニア寄りのエンジニアと組むと, 説明無くしれっとリポジトリに .editorconfig があることはザラです.
まあ, ファイルを置いておけば対応エディタなら勝手に動くので, わざわざ説明するまでもなく適用されるのは便利なところではありますね.
PRくれた人にわざわざインデントやらコードの本質とはズレた指摘をしないといけないのも, 双方のモチベーションを無駄に削ってしまいますし. 😣
(とはいえ, どうしてこうなっているかを理解せずにコードを書いてもらうのも初学者の成長に繋がらないとは思うので. 自動で動いているモノの裏側や仕組みを知っておくことは基礎としてとても大事だと思います.)
設定できること
タブ幅, 改行コード, インデントスタイルなどのコードフォーマットに関するルールが定義可能です.
の, Supported Properties にある通りです.
制約
対応エディタのリストに該当するエディタであるか,
プラグインのインストールで対応可能なエディタのリストに含まれるエディタであれば利用可能です.
使ってみよう
下準備
今回は VSCode を使用してみます. (お手元の別の対応エディタで試してもOKです.)
VSCode はプラグインの追加で対応とのことなので, Extentions からインストールします.
はじめての .editorconfig を作る
下記の内容を, 作業ディレクトリかプロジェクトのルートディレクトリに .editorconfig という名前でファイルを作成・保存します.
# EditorConfig is awesome: https://EditorConfig.org
# 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
# My config
[*.txt]
indent_style = space
indent_size = 2
なお, この内容は https://editorconfig.org/#example-file からコピーしたものをベースにしています.
(追加したものをわかりやすくするために敢えて My config として分けていますが, 上の方にある項目と統合してももちろん問題ありません.)
ちなみに, VSCode はファイルツリー右クリックでテンプレートを生成できるようです.
ファイルを編集してみる
.editorconfig を作成したディレクトリに, demo.txt demo.py を作成して編集してみましょう.
Tabキー押下字に挿入されるスペース数などが設定通りになっていることを確認してみてください.
その他に, Ctrl+S や ⌘+S で保存したときに, 最終行に空行が自動挿入されることも目視で確認できると思います.
また, 行末の余分なスペースも自動で削除されます(trim_trailing_whitespace = true).
その他の設定も変更してみて, エディタの挙動を確認してみてください.
EditorConfig を活用しましょう 👍🏻
今すぐ設置しちゃいましょう!
今作りかけのプロジェクトがあればぜひ設置してみましょう.
https://editorconfig.org/#example-file の内容をコピーして貼り付けましょう. こだわりがあれば自分好みにカスタムしましょう. ✍🏻
また, Unix/Linux/WSL を作業環境にしている方は, とりあえずホームディレクトリに .editorconfig を作成してしまうのもありだと思います.
(これに頼って, 新しいプロジェクトを作成したときに設置を忘れないように⚠️)
ホームディレクトリに置いておけば, 作業ディレクトリに .editorconfig が見つからない, または root=true 設定がなければ, 全ての上位ディレクトリまで自動で辿って適用されます.
設定内容に迷ったら公式リポジトリからパクろう
メジャーなOSSでも EditorConfig は多く採用されています.
設定内容に迷ったら, 使用する言語やフレームワークのソースコードがあるリポジトリを探して流用するのも良いでしょう.
フレームワークでサンプルプロジェクトが公開されているものがあれば, それを覗いて見るのも良いでしょう. (フレームワークのソースコードと利用する側では設定も少し異なってきますし.)
Django であれば Django 自体のリポジトリに Python と Django に特化していそうな設定ファイルが見つかりますね!
TypeScript はこんな感じで見つかりました.
こんな感じで, 公式リポジトリなどの設定も参考にしていきましょう!
新規リポジトリには .editorconfig を設置する習慣を!
新しいプロジェクトを作成するときは, .gitignore や README.md を作成するのと同時に .editorconfig も作成する習慣をつけることをおすすめします. 💪🏻
Discussion
寝ぼけながら書いています😪