Windowsでdevcontainerを快適に使う小ネタ

はじめに

devcontainerで開発コンテナを開くのが面倒に感じることはありませんか。
本記事では、そんな小さなストレスを解消する2つの簡単な設定をご紹介します。

1. ステップを踏まずに一発でdevcontainer環境にアクセス

「最近使用したフォルダーとワークスペース」の一覧を使う

VSCodeはタスクバーアイコンの右クリックから「最近使用したフォルダーとワークスペース」一覧にアクセスできます。

「なんだ、そんなことか」と思うかもしれませんが、実はここからdevcontainer環境（[開発コンテナー]ってついてるやつ）を選択すると通常のフォルダを開く手順を飛ばして、直接devcontainer環境を開始することができる便利なショートカットになっています。

よく使う環境のピン留め

よく使う環境はピン留めしておくことで、常に上部に固定表示され素早くアクセスできるようになります。
ピン留めはカーソルをあてて右側に出てくるピンアイコン📌をクリックでできます。

こんな感じ（環境名は表示できなくてゴメンなさい）

2. name設定で環境名の表示を改善

1.の使い方をしていると、環境名の表示が気になってきます。

「最近使用したフォルダーとワークスペース」の表示について

通常はコンテナ内のフォルダ名がそのまま表示されます。

例えば、以下のようなディレクトリ構造で環境を作成し、各プロジェクトでdevcontainer.jsonのworkspaceFolderがすべて/workspaceに設定されているとコンテナ内では同じパスになります。

本記事ではWSL環境内のディレクトリにプロジェクトを配置する前提で書いていますが、Windowsのドライブに置いたプロジェクトでも同じ設定で使えます

# WSLディレクトリ構造
/home/username/projects/
├── project-a/　（プロジェクトA環境）
├── project-b-dev/　（プロジェクトB開発環境）
└── project-b-review/　（プロジェクトBレビュー環境）

# 各プロジェクトのdevcontainer.json設定
project-a/.devcontainer/devcontainer.json      → "workspaceFolder": "/workspace"
project-b-dev/.devcontainer/devcontainer.json  → "workspaceFolder": "/workspace"
project-b-review/.devcontainer/devcontainer.json→ "workspaceFolder": "/workspace"

すると、「最近使用したフォルダーとワークスペース」に下記のような表示になってしまい、どれがどのプロジェクト・用途のコンテナかが全くわからなくなってしまいます。

最近使用したフォルダーとワークスペース
├─ workspace [開発コンテナー]
├─ workspace [開発コンテナー]
└─ workspace [開発コンテナー]

解決策：nameフィールドの設定

devcontainer.jsonにnameフィールドを設定すると、表示名に情報を追加することができます。これにより、ピン止めしたワークスペースがある程度識別できるようになります。

設定例

{
  "name": "project-a",
  // その他の設定...
}

しかし、各プロジェクトで固定値のnameを設定するとプロジェクトBのように、複数の環境（project-b-dev、project-b-review）構築した場合に同じ設定を使用することになるため識別できません

最近使用したフォルダーとワークスペース
├─ workspace [開発コンテナー: project-a]
├─ workspace [開発コンテナー: project-b]
└─ workspace [開発コンテナー: project-b]

オススメの解決策：動的な表示名設定

設定例

{
  "name": "${localWorkspaceFolderBasename}",
  // その他の設定...
}

nameに${localWorkspaceFolderBasename}変数を設定することでローカルフォルダ名がそのまま表示名となり、利用者が表示名をコントロールできる 取り回しやすいdevcontainer環境になります。

最近使用したフォルダーとワークスペース
├─ workspace [開発コンテナー: project-a]
├─ workspace [開発コンテナー: project-b-dev]
└─ workspace [開発コンテナー: project-b-review]

まとめ

2つの設定でWindows環境でのdevcontainerがグッと使いやすくなります。

1. タスクバーのピン留めでよく使う環境のショートカットを用意する
2. devcontainer.jsonのnameに${localWorkspaceFolderBasename}を設定して環境表示を識別可能にする

知らなかった人は試してみてね！