🏰

RPG Maker Unite のプロジェクトにJSONのオートフォーマット機能を導入し、gitで差分を確認できるようにする

2023/05/13に公開・約3,300字

Git

1. 要旨

RPG Maker Unite（以下「Unite」と記載します。）で設定を変更すると、該当するJSONファイルが変更されます。しかし、Unite上で変更すると、変更後のJSONファイルが一行で出力され、差分の確認が非常に困難となります。また、チームで開発を進める場合、コンフリクトが頻発する原因になるでしょう。これらの問題をPrettier等のツールで解消する方法をご紹介します。

2. 開発環境

Windows 11 Pro 22H2
RPG Maker Unite 1.0.0
Unity 2021.3.25f1
Visual Studio Code 1.78.2

3. .gitignoreファイルの準備

GitHub公式リポジトリから、こちらのUnity用の.gitignoreを使用します。
今回はNodeモジュールを使用するので、.gitignoreに以下の内容を追記します。

.gitignore

# Node Modules directory
node_modules/

4. コードフォーマッターのインストール

4-1. Node.jsのインストール

まず、Node.jsをインストールしていない場合は、こちらからインストールしてください。
Node.jsはJavaScriptをブラウザの外側で実行するための環境で、Prettier等のツールを利用するために必要です。

4-2. Prettierのインストール

コードフォーマッター（コード整形ツール）であるPrettierをインストールします。
Uniteで作成したプロジェクトのルートディレクトリで以下のコマンドを実行してください。

npm install --save-dev prettier

続いて、Uniteプロジェクトのルートディレクトリに、.prettierrcファイル（Prettierの設定ファイル）を新規作成してください。

.prettierrc

{
  "printWidth": 1
}

printWidthは自動で折り返す文字数を設定するオプションです。
パラメータ１つごとに改行させたいので、数値を１に設定します。
他のオプションの設定については、Prettierの公式ドキュメントを参照してください。

4-3. JSONファイルのフォーマット

npx prettier --write [ファイル名]のコマンドで、該当ファイルのフォーマットを実行できます。
まずは、以下のコマンドで、Uniteプロジェクト全体のJSONファイルをフォーマットします。
コマンドはUniteプロジェクトのルートディレクトリで実行してください。

npx prettier --write "Assets/RPGMaker/**/*.json"

フォーマットが完了したら、ここで一度、gitコマンドでコミットしてください。

4-4. lint-stagedのインストール

変更のあったJSONファイルごとにnpx prettier --writeを実行するのは面倒ですし、プロジェクト全体にnpx prettier --writeを実行するのも無駄があります。
そこで、lint-staged（特定のGitステージングファイルに対してLintツールを実行するツール）をインストールし、Gitのステージに存在するJSONファイルだけにPrettierをまとめて適用できるようにします。
まずは、以下のコマンドをUniteプロジェクトのルートディレクトリで実行してください。

npm install --save-dev lint-staged

続いて、package.jsonに以下の設定を追加してください。

"lint-staged": {
  "*.json": "prettier --write"
}

この段階で、package.jsonの内容は以下のとおりになっています。
なお、各モジュールのバージョンは、2023年5月13日時点のものです。
読者の皆様がインストールするタイミングによっては、バージョンが以下の数字より大きいものになっている場合もあります。

package.json

{
  "devDependencies": {
    "lint-staged": "^13.2.2",
    "prettier": "^2.8.8"
  },
  "lint-staged": {
    "*.json": "prettier --write"
  }
}

フォーマッターの設定はこれで完了です。
試しに、Unite上で適当な設定を変更してみてください。
git add . コマンドでステージにJSONファイルを追加した後、以下のコマンドを実行してください。

npx lint-staged

一行で出力されていたJSONファイルがフォーマットされ、差分を確認できるようになっているはずです。

5. コミット時に自動でフォーマットするように設定

JSONファイルのフォーマットを行わずにコミットしてしまうことを防ぐために、Husky（Gitのhooks（コミットをする前に自動的に何かを行うための仕組み）を簡単に設定できるツール）を導入します。

5-1. Huskyのインストール

Uniteプロジェクトのルートディレクトリで、以下のコマンドを実行してください。

npm install --save-dev husky

続いて、package.jsonに以下の設定を追加してください。

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

この段階で、package.jsonの内容は以下のとおりになっています。

package.json

{
  "devDependencies": {
    "husky": "^8.0.3",
    "lint-staged": "^13.2.2",
    "prettier": "^2.8.8"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.json": "prettier --write"
  }
}

5-2. Huskyの初期設定

Uniteプロジェクトのルートディレクトリで、以下のコマンドを実行し、Huskyを初期化します。

npx husky install

続いて、以下のコマンドを実行してください。
このコマンドにより、.husky/pre-commitファイルが作成されます。

npx husky add .husky/pre-commit "npx lint-staged"

以上でHuskyの設定は完了です。これにより、コミットを行う前にnpx lint-stagedコマンドが実行され、lint-stagedで設定したフォーマッターが自動的に適用されます。

Discussion

ログインするとコメントできます