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

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

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

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

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

INDEX

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`	EditorConfigを適用させるディレクトリを指定します。・`true`：`.editorconfig`ファイルが存在するディレクトリをルートディレクトリとして、そのディレクトリ以下のすべてのファイルに対して`.editorconfig`ファイルの設定を適用する。・`false`：`.editorconfig`ファイルが存在するディレクトリから上位のディレクトリにも`.editorconfig`ファイルの設定が適用される。設定が混乱する可能性があるため、基本的には`true`を設定するのが一般的です。
`[ ]`	EditorConfigを適用させる対象のファイルを指定します。特定のファイルタイプや、拡張子に対する設定を指定することができます。 `*`はすべてのファイルという意味で、共通の設定を一度に定義することができます。
`indent_style`	テキストのインデントスタイルを指定します。`tab`またはに`space`を設定します。・`tab`: インデントにタブ文字を使用します。・`space`: インデントにスペースを使用します。
`indent_size`	インデントの幅を指定します。 `indent_size = 2`と設定されている場合、1つのインデントに2つのスペースが使用されます。
`end_of_line`	改行コードの種類を指定します。 `lf`、`cr`、`crlf`の3種類の改行コードが選択できます。 Web制作の場合は`lf`が一般的です。
`charset`	テキストファイルの文字エンコーディングを指定します。 `latin1`、`utf-8`、`utf-8-bom`、`utf-16be`、`utf-16le`などが選べます。 Web制作の場合は`utf-8`が一般的です。
`trim_trailing_whitespace`	行末の余分なスペースやタブなどの空白文字を自動的に削除するかどうかを指定します。・`true`：自動的に削除する。・`false`：自動的に削除しない。
`insert_final_newline`	ファイルの末尾に最終行の改行を自動的に挿入するかどうかを指定します。・`true`：末尾に最終行の改行を自動的に挿入する。・`false` ：最終行の改行を挿入しない。

完成サンプルデータ

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

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を活用して、より効率的で整ったコーディング作業を行いましょう。