VSCodeの拡張機能「Dev Container」を使うことで、Dockerコンテナにアタッチした状態でVSCodeを開くことができる。
つまり、あたかもホスト環境かのように作業することが可能。
当記事で使用方法を簡単に紹介。

事前準備

Dev Container拡張機能インストール

Docker環境用意(Docker-Compose使用)

次のような構成のDocker-Compose環境を用意しておく (ただのnode.js環境…)

docker-compose.yml

version: "3.8"

services:
  app:
    build:
      context: ./app
      dockerfile: Dockerfile
    tty: true
    stdin_open: true
    volumes:
      - .:/workspace
      - app_store:/workspace/app/node_modules
    command: >
      sh -c 
        "tail -f /dev/null"

volumes:
  app_store:

app/Dockerfile

FROM node:20-alpine
WORKDIR "/workspace/app"
RUN apk update && apk upgrade

実際にやってみる

devcontainer.jsonの作成

コンテナにアタッチする作業用ディレクトリ(今回の場合だとapp/)に、.devcontainerディレクトリを作成。その中にdevcontainer.json(設定ファイル)を作成する

app/.devcontainer/devcontainer.json

{
  "dockerComposeFile": "../../docker-compose.yml", //docker-compose.ymlの相対パス
  "service": "app", //docker-compose.ymlに指定したサービス名
  "workspaceFolder": "/workspace/app", //コンテナ内の作業ディレクトリ
  "shutdownAction": "none" //未指定だとVSCodeを閉じた際コンテナが停止してしまう。自分は、noneを指定して停止しないようにしている。
}

実行してみる

Docker-Composeを立ち上げる
```
$ docker-compose up
```
コンテナにアタッチする作業用ディレクトリに移動し、VSCodeを開く。そうすると、右下にポップアップが出てくるため「コンテナーで再度開く」をクリック。
すると、コンテナにアタッチした状態のVSCodeが開く。
- 当然、ターミナルはコンテナ内のものを開くことができる
- また、拡張機能をコンテナ内にのみ設定することも可能 (ホスト側の拡張機能を汚さず済む)
  app/.devcontainer/devcontainer.json
```
{
  ︙
  "customizations": {
    "vscode": {
      "extensions": ["Prisma.prisma"]
    }
  }
}
```

参照

公式ドキュメント
https://code.visualstudio.com/docs/devcontainers/containers