WordPress開発のgit管理に適したVS Codeワークスペース

コミットは1回で済ませたい

VS CodeでWordPress開発をしていると、テーマ用・プラグイン用でリポジトリやコミットを分けるのが少し面倒に感じることがあります。この記事では、作業フォルダの視認性を保ちつつ、1回のコミットで管理できるVS CodeワークスペースとGit構成を紹介します。

リンク

これまでのGit構成とワークスペースの構成
実現したいこと
Gitの構成
- 初期化するフォルダの見直し
- .gitignoreファイルの作成
VS Codeワークスペース
- 作業フォルダは個別に登録する
まとめ
- 今回のポイント

これまでのGit構成とワークスペースの構成

これまではテーマフォルダ sample-theme/ とプラグインフォルダ sample-plugin/ をそれぞれVS Codeワークスペースに追加、Git初期化して管理していました。

# ディレクトリ構成

wp-content/
├ themes/
│  └ sample-theme/     # Git初期化
└ plugins/
    └ sample-plugin/    # Git初期化

# VS Code ワークスペース

workspace/
├ sample-theme/
└ sample-plugin/

この構成では、必要最低限のフォルダがワークスペースに表示され、見やすく使い勝手がいいのですが、フォルダ毎にコミットする必要があります。

※ これを1回のコミットで済ませたい。

実現したいこと

コミットは1回で済ませたい

これが主な目的。同じウェブサイトの作業なのでまとめてGit管理したい。
これは wp-content/ をGit初期化することで実現します。

VS CodeのGit機能を使う

編集後に手っ取り早くコミットしてVS Codeで完結させたい。
変更した箇所やファイルが分かりやすいのもメリット。wp-content/ をGit初期化すると配下のファイル・フォルダ全てが対象になってしまうので .gitignore で対象を制限します。

作業しやすいVS Codeワークスペースのフォルダ構成

編集するファイル、フォルダが見にくくなっては本末転倒なので、ワークスペースの使い勝手は損なわないようにします。

Gitの構成

初期化するフォルダの見直し

1回のコミットで済ませるためには共通の上位フォルダとなる wp-content/ で初期化します。テーマフォルダとプラグインフォルダに変更があっても1回のコミットで済ませられます。

# ディレクトリ構成

wp-content/     # Git初期化
├ themes/
│  └ sample-theme/
├ plugins/
│  └ sample-plugin/
└ .gitignore

.gitignoreファイルの作成

追跡するフォルダ以外を除外するため、除外設定を書き込む .gitignore ファイルを作成し、wp-content/ 直下に置きます。

別のテーマやプラグインを追加する度に設定を書き換えるのは現実的でないので、まず全て除外し、Git管理するファイル・フォルダを指定するホワイトリスト方式が管理しやすいと思います。

# ======================
# すべて無視
# ======================
*

# ======================
# Git管理
# ======================
!themes/
!themes/sample-theme/**

!plugins/
!plugins/sample-plugin/**

# ======================
# Git管理内での除外
# ======================
plugins/sample-plugin/node_modules/

9行目：themes/ を除外解除。（これがないと次の階層を追跡できない。）
10行目：sample-theme/ 以下の全てを除外解除。

設定は上から順に有効になります。
18行目に指定しているフォルダは sample-plugin/ 内であっても追跡されなくなります。

ウェブ倉庫

** は「階層に関わらずファイル・フォルダ全て」という意味です。上記の書き方では、sample-theme/ と sample-plugin/ 内の全てが追跡対象になります。

これで目当てのテーマ、プラグインフォルダを1回のコミットでGit管理できるようになりました。

VS Codeワークスペース

作業フォルダは個別に登録する

VS CodeのGit機能を使うため、Git初期化している wp-content/ をワークスペースに追加します。

wp-content/ 以下には編集することのないファイル・フォルダが多数ありますが、これらの非表示設定は行わずツリーを閉じたまま運用します。（理由は後述）

編集作業を行うフォルダをワークスペースに追加します。

# VS Code ワークスペース

workspace/
├ wp-content/     # Git用（閉じたまま運用）
├ sample-theme/   # 作業用
└ sample-plugin/  # 作業用

wp-content/ を閉じたままにする理由

wp-content/ 以下の追跡しないファイル・フォルダを非表示にできればいいのですが、1つづつ手動で非表示にするのは現実的でなく、VS Code設定 “explorer.excludeGitIgnore” も使えないので閉じたままにする方法にしました。

VS Code設定 “explorer.excludeGitIgnore”

この設定は本来、.gitignore の内容をワークスペースに反映させるためのものですが、今回のように “全て除外 > 除外解除” のように指定した場合は使えないようです。

まとめ

今回のポイント

ワークスペースの wp-content/ は閉じておくのでVS Codeの非表示設定は不要。
作業フォルダは別途追加するためすぐに開くことができる。
VS Code搭載のGitを使うことができ、1回のコミットで済む。

この3点により、Git周りの作業環境が快適になりました。しばらくこの方法で作業していますが以前よりも管理のしやすさを感じています。