コードのフォーマットをまとめて統一する

2 min read読了の目安(約2100字

はじめに

コードを書く上で地味にめんどくさいのがファイルのフォーマットの設定です。

例えば、複数のエディタを利用する際に各エディタ間で共通のフォーマットを利用したい場合、それぞれのエディタで各拡張子に対するフォーマットの設定をしないといけません。

基本的にはエディタの初期設定時に行うだけなので、そこまで頻度の多い作業ではないです。
しかし、複数マシン、環境を扱ったりする際に毎回設定作業を行う作業は意外と精神にくるのではないでしょうか。

というわけで精神への負荷を下げる、フォーマットの設定をなるべく簡単に完結できる方法をこれから紹介します。

コードのフォーマットをまとめて統一する

その方法とは

ホームディレクトリ以下の全てのファイルに対し、EditorConfigの設定を反映されることで、フォーマットの設定をまとめて完了させてしまう

というものです。

導入手順は以下になります。

  1. EditorConfigの設定ファイルをホームディレクトリに配置
  2. 利用するエディタにEditorConfigプラグインを入れる

EditorConfigの導入

まずフォーマット設定用のEditorConfigのファイル.editorconfigを作成します。
各設定の意味は、公式サイトを参照してください。

実装例

# このファイルの階層以下の全ファイルに対して、フォーマットの設定を有効に
root = true

[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 4
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

この.editorconfigファイルをホームディレクトリ直下に配置します。

── choimake(ホームディレクトリ)
    ├── .editorconfig 
    ├── .....

各エディタにEditorConfigのプラグインを導入

使用するエディタにEditorConfigプラグインを入れます。

以下の記事を参考に、自分の使いたいエディタにプラグインをインストールしてください。
どんなエディタでもEditorConfigを使ってコードの統一性を高める#エディタ別プラグインのインストール方法

プラグインを有効にすることで、ホームディレクトリ以下のどのファイルに対しても、EditorConfigの設定が反映されるようになります。

これにて設定完了です。

メリット

この方法のメリットは以下になります。

  • 導入が簡単
  • 設定変更が容易
  • 移植性が高い

導入が簡単

設定ファイルを作成し、各エディタにプラグインをインストールするだけで導入が可能です。
各エディタのそれぞれの設定を変更するより、はるかに簡単に設定が完了できます。

設定変更が容易

.editorconfigの設定はとてもシンプルです。
設定変更の方法を短い時間でキャッチアップすることができます。

移植性が高い

.editorconfigはテキストファイルなのでバージョン管理が可能です。
例えば、自分用のリポジトリに.editorconfigを保存しておき、別のマシンに設定を導入したいときには、リポジトリからcloneすることで簡単に設定の移植ができます。

デメリット

デメリットは以下の通りです。

  • 細かい設定ができない

細かい設定ができない。

EditorConfigはインデント、文字コード、改行コードなどのフォーマットは実行してくれますが、細かいフォーマット(記号の後に半角スペースを入れるなど)の修正を行う機能はありません。
より細かいフォーマットを実行したい場合には、別のフォーマッターを導入する必要があります。

おわりに

コードのフォーマットをまとめて統一する方法とは、EditorConfigを使ってホームディレクトリ以下の全ファイルに反映させるというというものでした。

デメリットもあるものの、導入がとても簡単で個人的には重宝しています。
気になった方、もしいらっしゃったら、是非一度試してみてください。