「VSCode 開発環境」とかで検索するとめちゃくちゃ出てくる内容だとは思うんですが、備忘録として残しておこうと思います。
画像を入れつつ書いたらそれなりなボリュームになってしまったので、準備編と実践編で分けています。

Remote Containerとは？

VSCodeの拡張機能で、Dockerコンテナを開発環境として利用できます。
VSCodeの拡張機能や設定も行うことが出来るため、チーム開発を行う際にとても便利な機能です。
Developing inside a Container

必要なもの

Docker Desktop
WSL(Ubuntu)
Windowsターミナル(任意)
VSCode
Git

※PCに何もインストールされていない状態からの手順を記載しているので、既に完了している部分は適宜読み飛ばしてください。

Docker Desktop

インストーラのダウンロード

Docker Desktop for Mac and Windows | Docker
「Download for Windows」をクリックし、インストーラ(Docker Desktop Installer.exe)をダウンロード。
※2021/11/14時点では4.2.0

インストール

Docker Desktop Installer.exeをダブルクリックするとインストールが開始します。

どちらもチェックをつけたまま「OK」をクリック。

インストールが完了したら「Close」をクリック。
デスクトップのショートカットをクリックしてDocker Desktopを起動。

「I accept the terms」にチェックをつけて「Accept」をクリック。

↑の画面が表示されれば起動成功。

「WSL 2 installation is incomplete.」ダイアログが出た場合

https://aka.ms/wsl2kernelにアクセスして、「x64 マシン用 WSL2 Linux カーネル更新プログラムパッケージ」をクリックしてパッケージをダウンロードし、インストールしてください。
インストール完了後にDockerを再起動すれば、正常に起動できます。

WSL(Ubuntu)

Docker Desktopをインストールする際にdocker-desktopとdocker-desktop-dataというディストリビューションもついてきます。
これがあればRemote Containerを動かすことはできるのですが、dockerを動かすためのものなので、
開発環境用にUbuntuのインストールを行います。

インストール

PowerShellを起動して、以下のコマンドを入力します

PS C:\Users\(ユーザ名)> wsl --install -d Ubuntu
ダウンロード中: Ubuntu
インストール中: Ubuntu
Ubuntu はインストールされました。
Ubuntu を起動しています...

Ubuntuの設定

インストールが完了すると自動でUbuntuが起動します。ユーザ名とパスワードの入力が求められるので入力します。

Installing, this may take a few minutes...
Please create a default UNIX user account. The username does not need to match your Windows username.
For more information visit: https://aka.ms/wslusers
Enter new UNIX username: (ユーザ名)
New password:
Retype new password:
passwd: password updated successfully
Installation successful!
To run a command as administrator (user "root"), use "sudo <command>".
See "man sudo_root" for details.
(省略)

Ubuntuで以下のコマンドを入力してパッケージの更新を行います。
途中ディスクに〇〇MB追加されるよ？と聞かれるので「Y」を入力。

sudo apt update && sudo apt upgrade
Get:1 http://security.ubuntu.com/ubuntu focal-security InRelease [114 kB]
Get:2 http://security.ubuntu.com/ubuntu focal-security/main amd64 Packages [987 kB]
(省略)
After this operation, 209 MB of additional disk space will be used.
Do you want to continue? [Y/n] Y
(省略)
done.

WSLディストリビューションの変更

PowerShellでWSLディストリビューションの変更をします。

PS C:\Users\(ユーザ名)> wsl -s Ubuntu
PS C:\Users\(ユーザ名)> wsl -l -v
  NAME                   STATE           VERSION
* Ubuntu                 Running         2
  docker-desktop         Running         2
  docker-desktop-data    Running         2

Dockerの設定

アイコンメニューからDockerアイコンを右クリックして「Settings」をクリック。

Resources->WSL INTEGRATIONを選択し、UbuntuのトグルをONにした後「Apply＆Restart」をクリック。

Windowsターミナル

Ubuntu起動して操作してもよいのですが、何かと使い勝手が良いのでWindowsターミナルを入れておきます。

インストール

ここからインストールします。
※途中Microsoftアカウントのログインを求められますが、ログインしていなくてもインストールできます。

設定

Windowsターミナルを起動し、設定を開きます。

スタートアップの既定のプロファイルを「Ubuntu」に変更します。

Ubuntuのコマンドラインに「wsl.exe -d Ubuntu bash」開始ディレクトリに「//wsl$/Ubuntu/home/(Ubuntuのユーザ名)」を入力し、「保存」をクリック。

これで次回Windowsターミナルを開いた際はUbuntuのユーザホームで開きます。

ソースファイルをWindowsのCドライブ配下に置くと、WSLから見ると「/mnt/c/」配下となります。
この「/mnt/c/」配下のファイルはWindowsのファイルシステムからWSLのファイルシステムに変換かける処理が発生する為、処理がとても重くなります。
Windowsターミナルを入れなくてもよいですが、ソース管理や実行はUbuntuの「/mnt/c/」以外の場所で行うようにしてください。

VSCode

インストーラのダウンロード

ここからインストーラ(VSCodeUserSetup-x64-(バージョン).exe)をダウンロードします。
※11/14時点で1.62.2

インストール

インストーラをクリックしてインストールします。
特に詰まる部分はないと思うので割愛します。

拡張機能

最低以下の拡張機能は入れておきましょう。

Japanese Language Pack

Remote Development

今回入れたいRemote ContainerとUbuntuから「code (ソースフォルダ)」でVSCodeを起動できるWSL-Remoteが入ってます。

Git

インストーラのダウンロード

ここからインストーラ(Git-(バージョン)-64-bit.exe)をダウンロードします。
※11/14時点で2.33.1

インストール

インストーラをクリックしてインストールします。
特に詰まる部分はないと思うので割愛します。

初期設定

Windowsターミナルを起動して、以下のコマンドを入力します。
(名前)は任意のユーザー名、(メールアドレス)は任意のメールアドレスに置き換えてください。

git config --global user.name "(名前)"
git config --global user.email "(メールアドレス)"
git config --global credential.helper "/mnt/c/Program\ Files/Git/mingw64/libexec/git-core/git-credential-manager-core.exe"

これで準備は完了です。