EditorConfigのすゝめ
こんにちは。i-VinciのMiuraです。
IT系の技術記事において、その内容が役に立つかは人それぞれだと思います。
フレームワークに関する記事はそのフレームワークを使っていない人には役に立たない可能性が高いですし。
そこで、今回はIT技術者全員に役に立つ内容であるEditorConfigを紹介しようと思います。
EditorConfigとは
公式ページの紹介文をChatGPTで日本語に訳してみました。
EditorConfig は、さまざまなエディタや IDE を使って同じプロジェクトに取り組む複数の開発者の間で、コーディングスタイルの一貫性を保つのに役立ちます。
EditorConfig プロジェクトは、コーディングスタイルを定義するためのファイル形式と、そのファイルを読み取り定義されたスタイルに従うことを可能にするテキストエディタ用のプラグインのコレクションで構成されています。
EditorConfig ファイルは可読性が高く、バージョン管理システムとも相性良く動作します。
なんとなく理解できますが、実際に使ってみた方がわかりやすいと思います。
EditorConfig設定方法
ここからは実際の設定方法を説明します。
エディタの設定
EditorConfigを使用する場合、設定が不要なエディタと設定が必要なエディタがあります。
公式ページを確認してもらいたいのですが、「No Plugin Necessary」の中に書かれているエディタは設定不要で、「Download a Plugin」に書かれているエディタは設定が必要になります。
今回は設定が必要なエディタの中で使用者が多いであろう「VisualStudioCode」を例に設定します。
といってもプラグインをインストールするだけなので、拡張機能のインストールで「@editorconfig.editorconfig」で検索してインストールすれば設定完了です。
.editorconfigファイル作成
次にGitHubなどで管理しているプロジェクトのルートフォルダに「.editorconfig」というファイル作成します。
あとはそのファイルに設定を記載します。設定内容は以下の通りです。
| 設定名 | 説明 | 設定値 |
|---|---|---|
| indent_style | インデント設定 | tab, space |
| indent_size | インデント幅設定 | 整数値 |
| end_of_line | 改行コード設定 | lf, cr, crlf |
| charset | 文字コード設定 | latin1, utf-8, utf-8-bom, utf-16be or utf-16le |
| trim_trailing_whitespace | スペースを削除 | true, false |
| insert_final_newline | ファイル最終行に改行を追加 | true, false |
| root | ルートフォルダかどうか | true, false |
JavaScript/Typescriptのプロジェクトの場合、以下のような設定になると思います。
root = true
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
[*.{js,jsx,ts,tsx,json,json5,jsonc}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
[*.{md,yaml,yml}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = falseファイルフォーマット実行
あとはファイルフォーマットを実行するだけです。
.editorconfigファイルで設定した内容が反映されると思います。
まとめ
EditorConfigはプロジェクト開始時には必ず設定を行った方がよいです。
プロジェクトによってはEditorConfigで設定できる部分を、エディタ設定を変更して対応していると思います。
もし使用エディタが変更された場合、手順作成をやり直す必要があります。
また、使用PCが交換になった場合、エディタ設定しなおす必要があります。
そういった手間は可能な限り減らしましょう。