VSCodeとDockerでリモート開発する

前提

Dockerの環境構築が済んでいる

手順

1. VSCodeの拡張機能「Remote Development」をインストール

3つ拡張機能がインストールされますが、今回使うものは「Remote - Containers」です。
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

2. VSCodeの拡張機能をインストール

1. 左下のアイコンをクリック

2. Add Development Container Configuration Filesを選択

3. From 'docker-compose.yml'を選択

4. コンテナを選択

※接続したいコンテナを指定する。

5. devcontainer.jsonの修正

以下は一例です。

.devcontainer\devcontainer.json

"dockerComposeFile": [
		"../docker-compose.yml",
		"docker-compose.yml"
	],

	"workspaceFolder": "/workspace",

を

.devcontainer\devcontainer.json

"dockerComposeFile": [
		"../docker-compose.yml"
	],

	"workspaceFolder": "/var",

に変更

※dockerComposeFileはプロジェクトで使用しているdocker-compose.ymlのパスです。
※workspaceFolderはコンテナのディレクトリ構成を見て、ワークスペースのルートにしたいパスを設定します。

6. コンテナに接続

左下のアイコンをクリックしてから
Reopen in Containerでコンテナを開くことができ、直接編集できるようになります。

参考