【EditorConfigの使い方】チームでエディターの設定を統一する方法

Web制作では、複数の開発者やがデザイナーが共同で作業を行うことが一般的です。
しかし、作業者によって異なるエディターを使用していたり、同じエディターでも設定が違う場合があります。

そのような場合、コーディングスタイルの不一致による問題が発生することがあります。
こうした問題を解決し、コードの一貫性を維持するためにEditorConfigというツールを使用することで、プロジェクトを通して統一感のコーディングが可能になります。

この記事ではEditorConfigを導入する方法や、設定の仕方について紹介します。

EditorConfigを活用することで、プロジェクト全体でコーディングスタイルを統一し、開発プロセスをスムーズにすることができます。

EditorConfigとは？

EditorConfigとは、プロジェクト内の複数のコーダーやデザイナーが共同で作業する際に、コーディングスタイルの一貫性を維持するためのツールです。

異なるエディターを使用している場合や、エディターの設定を変更したりしていても、EditorConfigを利用することで、プロジェクト全体で一貫したコーディング規則を定義することができます。

EditorConfigは設定ファイルである.editorconfigファイルをプロジェクトのルートディレクトリに配置し、インデントスタイル、タブやスペースの使用、改行コード、ファイルのエンコーディングなどを設定します。

エディターはこのファイルを読み込み、指定された設定に従ってファイルを自動的に整形します。

Web制作者がEditorConfigを利用することで、手動でのコード整形作業が不要となり、プロジェクト全体で一貫性のあるコーディングスタイルを維持できます。

EditorConfigを使う準備を整える

それではEditorConfigの設定を行う前に、エディターにEditorConfigのサポートを追加するための拡張機能をインストールします。

ほとんどの主要なエディターにはEditorConfigのサポートが提供されていますので、各エディターに応じて対応する拡張機能をインストールしてください。

EditorConfig – Download a Plugin

今回は私が使用しているVS Codeを例に、プラグインのインストールの解説を行います。

エディターにEditorConfigプラグインをインストール

VS CodeでEditorConfigのサポートを有効にするため、「EditorConfig for VS Code」というプラグインのインストールを行います。

それでは以下の手順に沿ってプラグインをインストールしてください。

① VS Codeの「拡張機能（⌘ + ⇧ + X）」をクリックします。

② 「EditorConfig for VS Code」と入力し、該当のプラグインをクリックします。

③ 「EditorConfig for VS Code」の「有効にする」ボタンをクリックし、プラグインを有効にします。

EditorConfigファイルを作成

プラグインをインストールできたら、プロジェクトのルートディレクトリに.editorconfigという名前のファイルを作成します。
このファイルは、プロジェクト内のすべてのファイルに適用されるコーディングスタイルのルールを定義します。

.editorconfigファイルは手動でも作成可能ですが、EditorConfig for VS Codeプラグインをインストールした状態の場合、さらに簡単に作成することができます。

VS Codeのエクプローラーを開いた状態で、マウスを右クリックします。
そうすると以下のようにGenerate .editorconfigの項目が追加されていますのでクリックします。

ルートディレクトリに.editorconfigファイルが作成されていたら成功です。

このように「EditorConfig for VS Code」プラグイン経由で作成を行うと、以下のように設定項目のコードが入った状態で.editorconfigファイルが作成されます。

手動で作成するよりもこちらの方法の方が効率が良いため、「EditorConfig for VS Code」プラグイン経由で作成する方がおすすめです。

それでは設定項目について解説してきます。

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

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

.editorconfigファイルにルールを定義

EditorConfigのキーと値

.editorconfigの設定項目の、キーに対する値は以下のようになります。
それぞれ、ご自身の好みに合わせて設定を行ってください。

完成サンプルデータ

以下は私が使用した設定ファイルの内容です。
わかりやすいようにコメントアウトで設定内容も記載していますので、参考にしてください。

root = true
# 全てのファイルを対象
[*]
# インデントスタイル：タブ
indent_style = tab
# インデントサイズ：2
indent_size = 2
# 改行コード：lf
end_of_line = lf
# 文字コード：utf-8
charset = utf-8
# 余分なスペースやタブなどの空白文字を自動的に削除しない
trim_trailing_whitespace = false
# ファイルの末尾に最終行の改行を自動的に挿入する
insert_final_newline = true

おわり

以上でEditorConfigの導入と、設定方法の解説でした。

EditorConfigを使うことでプロジェクト内のコーディングスタイルを一貫させ、チーム全体での作業効率を向上させることができます。
ぜひEditorConfigを活用して、より効率的で整ったコーディング作業を行いましょう。