1分で始めるdevContainer

devContainerの仕組みはわかったけど始める方法が知りたいという方向けに
1分でdevContainerを構築し、その設定をリポジトリに保存する方法をまとめました

前提

Dockerがインストールされていること
VSCodeがインストールされていること
Remote Developmentがインストールされていること

STEP1 リポジトリを作る

Githubで空のリポジトリを作ります
ローカルに作業フォルダを作るのではありません

STEP2 クローンする

VSCodeでコマンドパレットを開き
Clone Repository in Container Volumeを実行します

STEP3 質問に答える

GUIでいくつか質問されるので答えていきます

リポジトリの選択

Githubを選択し

作成したリポジトリを選択しましょう

ブランチはないので何も選択せずESCで次へ

コンテナイメージの選択

好きなイメージと

タグを選択しましょう

ツールの選択

CLIツールなどは物によって一緒にセットアップできたりします

STEP4 拡張機能をインストールする

拡張機能もdevContainerに設定しておくと他の環境でcloneしたときに合わせてセットアップされて便利です
devContainer.jsonに追加をクリックすると設定を保存できます

devContainer.jsonに追加したらrebuildコマンドでdevContainerを再構築しましょう

※リビルドしてもファイルはそのままなのでいつでも気軽にリビルドして大丈夫です

他の環境でもこのdevContainerを使う時は？

STEP2だけ実行すればあとは勝手に構築してくれます

解説

VSCodeはdevContainerの設定がないリポジトリをコンテナでクローンすると設定を聞いてくれるのでJSONのフォーマットを気にする必要がなく便利ですね
コンテナ内でクローンするためホストマシンのファイルシステムにはリポジトリが存在しません
とはいえファイルはドラッグ&ドロップでダウンロードもアップロードもできるので特に不便なことはないかと思います
その代わりnode_modulesフォルダなども全部コンテナ内で構築されるため、ファイルシステムの変換によるパフォーマンス低下の問題も気にせずに済みます