VS Codeのエージェントモードを拡張するには、を試してください!

開発コンテナーを作成する

Visual Studio Code Dev Containers 拡張機能を使用すると、Docker コンテナーをフル機能の開発環境として利用できます。これにより、任意のフォルダーまたはリポジトリをコンテナー内で開き、Visual Studio Code のすべての機能セットを活用できます。プロジェクト内の devcontainer.json ファイルは、VS Code が明確に定義されたツールとランタイムスタックを持つ**開発コンテナー**にアクセス (または作成) する方法を指示します。このコンテナーは、アプリケーションを実行したり、コードベースでの作業に必要な個別のツール、ライブラリ、またはランタイムを提供したりするために使用できます。

開発コンテナー作成へのパス

このドキュメントでは、VS Code で開発 (dev) コンテナーを作成する手順について説明します。

  1. VS Code がコンテナーを起動する方法と、接続後に何をすべきかを記述する devcontainer.json を作成します。
  2. 新しいソフトウェアのインストールなど、開発コンテナーへの変更を Dockerfile を使用して行い、永続化します。
  3. Docker Compose を介して複数のコンテナーを構成します。
  4. 変更を加えたら、開発コンテナーをビルドして変更が有効になるようにします。

上記のいずれかの手順の後、完全に機能する開発コンテナーが作成されます。このチュートリアルの次のステップに進んで機能を追加することも、作業を中止して現在の開発環境で作業を開始することもできます。

注: Dev Containers 拡張機能には、事前に定義されたコンテナー構成をリストから選択できる **Dev Containers: Dev Container 構成ファイルを追加...** コマンドがあります。devcontainer.json と Dockerfile を段階的に構築するのではなく、すぐに完全な開発コンテナーを用意したい場合は、開発コンテナー作成の自動化 にスキップできます。

`devcontainer.json` ファイルを作成する

VS Code のコンテナー構成は、devcontainer.json ファイルに保存されます。このファイルは、デバッグ構成用の launch.json ファイルに似ていますが、代わりに開発コンテナーを起動 (またはアタッチ) するために使用されます。開発コンテナー構成は、.devcontainer/devcontainer.json の下に配置されるか、プロジェクトのルートに .devcontainer.json ファイル (ドットプレフィックスに注意) として保存されます。

devcontainer.json の開始点としてイメージを使用できます。イメージは、さまざまなツールとオペレーティングシステムがプリインストールされたミニディスクドライブのようなものです。イメージを格納するリポジトリのコレクションであるコンテナーレジストリからイメージをプルできます。以下は、プリビルドされた TypeScript および Node.js VS Code 開発コンテナーの イメージ を使用するシンプルな devcontainer.json の例です。

{
  "image": "mcr.microsoft.com/devcontainers/typescript-node:0-18"
}

構成を次のように変更できます。

  • コンテナーに Git などの追加ツールをインストールします。
  • 拡張機能を自動的にインストールします。
  • 追加のポートを転送または公開します。
  • ランタイム引数を設定します。
  • 既存の Docker Compose 設定を再利用または拡張します。
  • さらに高度なコンテナー構成を追加します。

この例では、Code Spell Checker 拡張機能をコンテナーにインストールし、ポート 3000 を自動的に転送したい場合、devcontainer.json は次のようになります。

{
  "image": "mcr.microsoft.com/devcontainers/typescript-node",

  "customizations": {
    "vscode": {
      "extensions": ["streetsidesoftware.code-spell-checker"]
    }
  },
  "forwardPorts": [3000]
}

注: ベースイメージの内容に基づいて、追加の構成が既にコンテナーに追加されます。たとえば、上記の streetsidesoftware.code-spell-checker 拡張機能を追加すると、コンテナーには "dbaeumer.vscode-eslint" も含まれます。これはmcr.microsoft.com/devcontainers/typescript-node の一部だからです。これは、devcontainer.json を使用して事前ビルドする際に自動的に行われます。詳細については、事前ビルドのセクションを参照してください。

上記の devcontainer.json があれば、開発コンテナーは機能しており、接続してその中で開発を開始できます。**Dev Containers: コンテナーで再度開く** コマンドで試してみてください。

Quick pick with list of Dev Containers commands

このコマンドを実行すると、VS Code が再起動し、ポート 3000 が転送され、ESLint 拡張機能がインストールされた Node.js および TypeScript 開発コンテナー内にいることになります。接続されると、ステータスバーの左側にある緑色のリモートインジケーターが、開発コンテナーに接続されていることを示します。

VS Code instance connected to dev container

追加の開発コンテナーシナリオ

devcontainer.json ファイルを介して、次のことができます。

  • スタンドアロンコンテナーを起動して、ツールチェーンを分離したり、セットアップを高速化したりできます。
  • イメージ、Dockerfile、またはDocker Compose で定義されたコンテナーデプロイ済みアプリケーションを使用できます。
  • 開発コンテナー内からDocker または Kubernetes を使用して、アプリをビルドおよびデプロイできます。

devcontainer.json でサポートされているワークフローがニーズに合わない場合は、既に実行中のコンテナーにアタッチすることもできます

ヒント: リモートの Docker ホストを使用したいですか? セットアップの詳細については、リモート Docker ホストで開発する の記事を参照してください。

追加ソフトウェアのインストール

開発コンテナーに追加のソフトウェアをインストールしたい場合があります。VS Code がコンテナーに接続されると、VS Code ターミナルを開き、コンテナー内の OS に対して任意のコマンドを実行できます。これにより、新しいコマンドラインユーティリティをインストールしたり、Linux コンテナー内からデータベースやアプリケーションサービスを起動したりできます。

ほとんどのコンテナーイメージは Debian または Ubuntu をベースにしており、apt または apt-get コマンドを使用して新しいパッケージをインストールします。このコマンドの詳細については、Ubuntu のドキュメント を参照してください。Alpine イメージには同様の apk コマンドが含まれており、CentOS / RHEL / Oracle SE / Fedora イメージはyum を使用するか、最近では dnf を使用します。

インストールしたいソフトウェアのドキュメントには通常、具体的な手順が記載されていますが、コンテナー内でルートとして実行している場合は、コマンドに sudo を付ける必要がない場合があります。

# If running as root
apt-get update
apt-get install <package>

ルートとして実行している場合、コンテナーで sudo が構成されている限り、ソフトウェアをインストールできます。すべての定義済みコンテナーには sudo が設定されていますが、コンテナーに非ルートユーザーを追加する の記事は、独自のコンテナーでこれを設定するのに役立ちます。いずれにしても、sudo をインストールして構成すれば、ルートを含む任意のユーザーとして実行するときにそれを使用できます。

# If sudo is installed and configured
sudo apt-get update
sudo apt-get install <package>

Git をインストールしたいとしましょう。VS Code の統合ターミナルで次のコマンドを実行できます。

# If sudo is installed and configured
sudo apt-get update
# Install Git
sudo apt-get install git

また、devcontainer.json"features" プロパティを使用して、事前に定義された Features セット、または独自のツールや言語をインストールすることもできます。

たとえば、次のように Azure CLI の最新バージョンをインストールできます。

"features": {
    "ghcr.io/devcontainers/features/azure-cli:1": {
        "version": "latest"
    }
  }

詳細については、Dev Container Features 仕様 を参照してください。

再構築

.devcontainer フォルダーの内容を編集する場合、変更を有効にするには再構築する必要があります。コンテナーを更新するには、**Dev Containers: コンテナーを再構築** コマンドを使用します。

ただし、コンテナーを**再構築**すると、手動でインストールしたものはすべて**再インストール**する必要があります。この問題を回避するには、devcontainer.jsonpostCreateCommand プロパティまたはカスタム Dockerfile を使用できます。

カスタム Dockerfile は Docker のビルドキャッシュの恩恵を受け、postCreateCommand よりも高速な再構築をもたらします。ただし、Dockerfile は開発コンテナーが作成され、ワークスペースフォルダーがマウントされる前に実行されるため、ワークスペースフォルダー内のファイルにアクセスできません。Dockerfile は、ワークスペースファイルとは独立してパッケージやツールをインストールするのに最も適しています。

postCreateCommand アクションはコンテナーが作成された後に一度実行されるため、このプロパティを使用して npm install のようなコマンドを実行したり、ソースツリー (マウントしている場合) でシェルスクリプトを実行したりすることもできます。

"postCreateCommand": "bash scripts/install-dependencies.sh"

インタラクティブな bash シェルを使用すると、.bashrc が読み込まれ、環境に合わせてシェルが自動的にカスタマイズされます。

"postCreateCommand": "bash -i scripts/install-dependencies.sh"

NVM などのツールは、シェルをインタラクティブモードにするために -i を使用しないと動作しません。

"postCreateCommand": "bash -i -c 'nvm install --lts'"

コマンドは終了する必要があります。終了しない場合、コンテナーは起動しません。たとえば、アプリケーションの起動を postCreateCommand に追加した場合、そのコマンドは終了しません。

コンテナーが起動するたびに実行される postStartCommand もあります。パラメーターは postCreateCommand とまったく同じように動作しますが、コマンドは作成時ではなく起動時に実行されます。

devcontainer.json でイメージを直接参照したり、postCreateCommand または postStartCommand を介してソフトウェアをインストールしたりするよりも、Dockerfile を使用する方がさらに効率的です。

Dockerfile

Dockerfile も .devcontainer フォルダーに配置されます。devcontainer.jsonimage プロパティを dockerfile に置き換えることができます。

{
  "build": { "dockerfile": "Dockerfile" },

  "customizations": {
    "vscode": {
      "extensions": ["dbaeumer.vscode-eslint"]
    }
  },

  "forwardPorts": [3000]
}

新しいソフトウェアのインストールなどの変更を行うと、Dockerfile で行われた変更は、開発コンテナーを再構築しても維持されます。

Dockerfile で FROM を使用してイメージを指定し、RUN 命令を使用してソフトウェアをインストールします。&& を使用して複数のコマンドを連結できます。

FROM mcr.microsoft.com/devcontainers/javascript-node:0-18
RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
    && apt-get -y install git

注: DEBIAN_FRONTEND エクスポートは、コンテナーでの作業に進む際に警告が表示されるのを回避します。

開発コンテナー作成の自動化

.devcontainer を手動で作成する代わりに、コマンドパレット (F1) から **Dev Containers: Dev Container 構成ファイルを追加...** コマンドを選択すると、必要なファイルが開始点としてプロジェクトに追加され、ニーズに合わせてさらにカスタマイズできます。

このコマンドを使用すると、フォルダーの内容に基づいて、事前に定義されたコンテナー構成をリストから選択できます。

Add a dev container config

選択できる事前定義されたコンテナー構成は、Dev Container Specification の一部である当社の ファーストパーティおよびコミュニティインデックス から提供されています。当社は、devcontainers/templates リポジトリ 内の仕様の一部として一連のテンプレートをホストしています。そのリポジトリの src フォルダーを参照して、各テンプレートの内容を確認できます。

**Dev Containers: Dev Container 構成ファイルを追加...** の使用後、利用可能な機能のリストが表示されます。これらは、開発コンテナーに簡単に導入できるツールと言語です。**Dev Containers: コンテナー機能を構成** を使用すると、既存の構成を更新できます。

Dev container features in Command Palette

既存の Dockerfile を再利用することもできます。

Select Dockerfile

devcontainer.json と Dockerfile を用意したので、コンテナー構成ファイルを編集する一般的なプロセスを見てみましょう。

完全な構成編集ループ

コンテナー構成の編集は簡単です。コンテナーを再構築すると、コンテナーが初期の内容に「リセット」されるため (ローカルのソースコードを除く)、コンテナー構成ファイル (devcontainer.jsonDockerfile、および docker-compose.yml) を編集しても、VS Code は自動的に再構築しません。代わりに、構成の編集を簡単にするために使用できるいくつかのコマンドがあります。

これらのコマンドを使用した典型的な編集ループは次のとおりです。

Container edit loop illustration

  1. コマンドパレット (F1) で **Dev Containers: Dev Container 構成ファイルを追加...** から開始します。
  2. 必要に応じて .devcontainer フォルダーの内容を編集します。
  3. **Dev Containers: コンテナーで再度開く** で試します。
  4. エラーが表示された場合は、表示されるダイアログで **フォルダーをローカルで開く** を選択します。
  5. ウィンドウが再読み込みされると、**ビルドログ** のコピーがコンソールに表示されるため、問題を調査できます。必要に応じて .devcontainer フォルダーの内容を編集します。(ログを閉じた場合でも、**Dev Containers: コンテナーログを表示** コマンドを使用してログを再度表示できます。)
  6. **Dev Containers: コンテナーを再構築して再度開く** を実行し、必要に応じて手順 4 にスキップします。

既にビルドが成功している場合でも、コンテナーに接続中に必要に応じて .devcontainer フォルダーの内容を編集し、コマンドパレット (F1) で **Dev Containers: コンテナーを再構築** を選択して、変更を有効にすることができます。

**Dev Containers: コンテナーボリュームにリポジトリをクローン** コマンドを使用している場合でも、コンテナーで反復作業を行うことができます。

  1. コマンドパレット (F1) で **Dev Containers: コンテナーボリュームにリポジリトをクローン** から開始します。入力したリポジトリに devcontainer.json がない場合、開始点を選択するように求められます。
  2. 必要に応じて .devcontainer フォルダーの内容を編集します。
  3. **Dev Containers: コンテナーを再構築** で試します。
  4. エラーが表示された場合は、表示されるダイアログで **リカバリーコンテナーで開く** を選択します。
  5. この「リカバリーコンテナー」で、必要に応じて .devcontainer フォルダーの内容を編集します。
  6. まだ問題が発生する場合は、**Dev Containers: コンテナーで再度開く** を使用して手順 4 にスキップします。

Docker Compose を使用する

場合によっては、単一のコンテナー環境では不十分なことがあります。データベースのような別の複雑なコンポーネントを構成に追加したいとしましょう。それを Dockerfile に直接追加しようとすることも、追加のコンテナーを介して追加することもできます。幸いにも、Dev Containers は Docker Compose で管理されるマルチコンテナー構成をサポートしています。

次のいずれかのことができます。

  1. 既存の変更されていない docker-compose.yml で定義されたサービスを使用します。
  2. サービスを開発するために使用する新しい docker-compose.yml を作成します (または既存のものをコピーします)。
  3. サービスを開発するために、既存の Docker Compose 構成を拡張します。
  4. 別々の VS Code ウィンドウを使用して、複数の Docker Compose 定義サービスを一度に操作します。

注: Alpine Linuxコンテナーを使用する場合、拡張機能内のネイティブコードにあるglibcの依存関係により、一部の拡張機能が動作しない場合があります。

VS Code は、Docker Compose ファイル内の特定のサービスに必要なコンテナーを自動的に起動するように構成できます。コマンドラインを使用して構成済みコンテナーを既に起動している場合、VS Code は代わりに指定した実行中のサービスにアタッチします。これにより、マルチコンテナーワークフローは、上記の Docker イメージおよび Dockerfile ワークフローで説明されているのと同じ迅速なセットアップの利点を得られ、必要に応じてコマンドラインを使用することもできます。

すぐに始めるには、VS Code で作業したいフォルダーを開き、コマンドパレット (F1) で **Dev Containers: Dev Container 構成ファイルを追加...** コマンドを実行します。

フォルダーの内容に基づいて並べ替えられたフィルター可能なリストから、当社の ファーストパーティおよびコミュニティインデックス の事前定義されたコンテナー構成を選択するように求められます。VS Code UI から、Docker Compose の開始点として次のテンプレートのいずれかを選択できます。

  • 既存の Docker Compose - 既存のプロジェクトにドロップできる一連のファイルが含まれており、プロジェクトのルートにある docker-compose.yml ファイルを再利用します。
  • Node.js & MongoDB - 別のコンテナー内の MongoDB データベースに接続する Node.js コンテナー。
  • Python & PostgreSQL - 別のコンテナー内の PostgreSQL に接続する Python コンテナー。
  • Docker-Outside-of-Docker Compose - Docker CLI が含まれており、Docker Unix ソケットをボリュームマウントすることで、開発コンテナー内からローカルの Docker インストールにアクセスする方法を示しています。

選択後、VS Code は適切な .devcontainer/devcontainer.json (または .devcontainer.json) ファイルをフォルダーに追加します。

構成を手動で作成することもできます。Docker Compose ファイルを未変更で再利用するには、.devcontainer/devcontainer.json 内の dockerComposeFile および service プロパティを使用できます。

{
  "name": "[Optional] Your project name here",
  "dockerComposeFile": "../docker-compose.yml",
  "service": "the-name-of-the-service-you-want-to-work-with-in-vscode",
  "workspaceFolder": "/default/workspace/path/in/container/to/open",
  "shutdownAction": "stopCompose"
}

workspaceFoldershutdownAction など、その他の利用可能なプロパティについては、devcontainer.json リファレンス を参照してください。

フォルダーに .devcontainer/devcontainer.json ファイルを追加したら、コマンドパレット (F1) から **Dev Containers: コンテナーで再度開く** コマンド (まだコンテナー内にいない場合は **Dev Containers: フォルダーをコンテナーで開く...**) を実行します。

コンテナーがまだ実行されていない場合、この例では VS Code が docker-compose -f ../docker-compose.yml up を呼び出します。service プロパティは、VS Code が接続すべき Docker Compose ファイル内のサービスを示し、どのサービスを開始すべきかを示しません。手動で開始した場合、VS Code は指定したサービスにアタッチします。

Docker Compose ファイルの開発用コピーを作成することもできます。たとえば、.devcontainer/docker-compose.devcontainer.yml がある場合、devcontainer.json の次の行を変更するだけです。

"dockerComposeFile": "docker-compose.devcontainer.yml"

しかし、より良いアプローチは、別のファイルで拡張することで Docker Compose ファイルのコピー作成を避けることです。次のセクションでDocker Compose ファイルを拡張するについて説明します。

デフォルトのコンテナーコマンドが失敗または終了した場合にコンテナーがシャットダウンするのを避けるために、devcontainer.json で指定したサービスについて、Docker Compose ファイルを次のように変更できます。

# Overrides default command so things don't shut down after the process ends.
command: /bin/sh -c "while sleep 1000; do :; done"

まだ行っていない場合は、Docker Compose ファイルのボリュームリスト を使用して、ローカルのソースコードをコンテナーに「バインド」マウントできます。

volumes:
  # Mounts the project folder to '/workspace'. The target path inside the container
  # should match what your application expects. In this case, the compose file is
  # in a sub-folder, so you will mount '..'. You would then reference this path as the
  # 'workspaceFolder' in '.devcontainer/devcontainer.json' so VS Code starts here.
  - ..:/workspace:cached

ただし、Linux では、バインドマウントを使用する場合、非ルートユーザーを設定して指定する必要がある場合があります。そうしないと、作成するすべてのファイルがルートになります。詳細については、開発コンテナーに非ルートユーザーを追加する を参照してください。VS Code を別のユーザーとして実行するには、これを devcontainer.json に追加します。

"remoteUser": "your-user-name-here"

すべてのプロセスを別のユーザーとして実行したい場合は、これを Docker Compose ファイル内の適切なサービスに追加します。

user: your-user-name-here

開発用のカスタム Dockerfile を作成しない場合でも、サービスのコンテナー内に curl などの追加の開発者ツールをインストールしたい場合があります。これらのツールをコンテナーイメージに追加するよりも効率は劣りますが、この目的のために postCreateCommand プロパティを使用することもできます。

ソフトウェアのインストールに関する詳細については追加ソフトウェアのインストール を、postCreateCommand プロパティに関する詳細についてはdevcontainer.json リファレンス を参照してください。

アプリケーションが C++、Go、Rust、または ptrace ベースのデバッガーを使用する他の言語でビルドされている場合、Docker Compose ファイルに次の設定も追加する必要があります。

# Required for ptrace-based debuggers like C++, Go, and Rust
cap_add:
- SYS_PTRACE
security_opt:
- seccomp:unconfined

コンテナーを初めて作成した後、devcontainer.json、Docker Compose ファイル、または関連する Dockerfile の更新を有効にするには、**Dev Containers: コンテナーを再構築** コマンドを実行する必要があります。

Docker Compose で localhost を使用する

Docker のドキュメントに記載されているように、他のサービスを docker-compose.yml ファイルに追加できます。ただし、このサービスで実行されているものをコンテナーの localhost で利用可能にしたい場合、またはサービスをローカルに転送したい場合は、必ずこの行をサービス構成に追加してください。

# Runs the service on the same network as the database container, allows "forwardPorts" in devcontainer.json function.
network_mode: service:db

Node.js と MongoDB の開発コンテナーの例で、network_mode: service:db の例を見ることができます。

開発用に Docker Compose ファイルを拡張する

既存のデプロイメント/開発に焦点を当てていない docker-compose.yml を参照することには、いくつかの潜在的な欠点があります。

  • Docker Compose は、エントリポイントがシャットダウンするとコンテナーをシャットダウンします。これは、デバッグ中にアプリを繰り返し再起動する必要がある状況では問題となります。
  • また、ローカルファイルシステムをコンテナーにマッピングしたり、アクセスしたいデータベースのような他のリソースにポートを公開していない可能性もあります。
  • ローカルの .ssh フォルダーの内容をコンテナーにコピーしたり、上記の Docker Compose の使用で説明されている ptrace オプションを設定したりすることが望ましい場合があります。

これらの問題やそれに類似する他の問題は、プライマリの docker-compose.yml を上書きまたは補足する複数の docker-compose.yml ファイルで Docker Compose 構成全体を拡張することで解決できます。

たとえば、この追加の .devcontainer/docker-compose.extend.yml ファイルを検討してください。

version: '3'
services:
  your-service-name-here:
    volumes:
      # Mounts the project folder to '/workspace'. While this file is in .devcontainer,
      # mounts are relative to the first file in the list, which is a level up.
      - .:/workspace:cached

    # [Optional] Required for ptrace-based debuggers like C++, Go, and Rust
    cap_add:
      - SYS_PTRACE
    security_opt:
      - seccomp:unconfined

    # Overrides default command so things don't shut down after the process ends.
    command: /bin/sh -c "while sleep 1000; do :; done"

この同じファイルは、必要に応じてポートマッピングなどの追加設定を提供できます。それを使用するには、特定の順序で元の docker-compose.yml ファイルに加えて .devcontainer/docker-compose.extend.yml を参照します。

{
  "name": "[Optional] Your project name here",

  // The order of the files is important since later files override previous ones
  "dockerComposeFile": ["../docker-compose.yml", "docker-compose.extend.yml"],

  "service": "your-service-name-here",
  "workspaceFolder": "/workspace",
  "shutdownAction": "stopCompose"
}

VS Code は、コンテナーを起動する際に両方のファイルを自動的に使用します。次のようにコマンドラインから自分で起動することもできます。

docker-compose -f docker-compose.yml -f .devcontainer/docker-compose.extend.yml up

postCreateCommand プロパティはコンテナー内に追加のツールをインストールできますが、場合によっては開発用に特定の Dockerfile を用意したい場合があります。既存の Docker Compose ファイルを変更せずに、開発専用のカスタム Dockerfile を参照するために、この同じアプローチを使用することもできます。たとえば、.devcontainer/docker-compose.extend.yml を次のように更新できます。

version: '3'
services:
  your-service-name-here:
      # Note that the path of the Dockerfile and context is relative to the *primary*
      # docker-compose.yml file (the first in the devcontainer.json "dockerComposeFile"
      # array). The sample below assumes your primary file is in the root of your project.
      build:
        context: .
        dockerfile: .devcontainer/Dockerfile
      volumes:
        - .:/workspace:cached
      command: /bin/sh -c "while sleep 1000; do :; done"

おめでとうございます!Visual Studio Code で開発コンテナーを構成しました。引き続き読み進めて、チームメイトやさまざまなプロジェクト間でコンテナー構成を共有する方法を学びましょう。

構成ファイルをリポジトリに追加する

devcontainer.json ファイルをソース管理に追加することで、プロジェクト用のカスタマイズされた開発コンテナーテンプレートを簡単に共有できます。これらのファイルをリポジトリに含めることで、Dev Containers 拡張機能がインストールされていれば、VS Code でリポジトリのローカルコピーを開いたすべてのユーザーは、フォルダーをコンテナーで再度開くように自動的に促されます。

Dev container configuration file reopen notification

チームが一貫した環境とツールチェーンを使用できるという利点に加えて、これにより新しい貢献者やチームメンバーが迅速に生産的になることが容易になります。初めての貢献者は、環境設定に関連するガイダンスの必要性が少なくなり、問題に遭遇する回数も減るでしょう。

開発コンテナーで開くバッジを追加する

リポジトリにバッジやリンクを追加して、ユーザーが Dev Containers でプロジェクトを簡単に開けるようにすることもできます。必要に応じて Dev Containers 拡張機能をインストールし、リポジトリをコンテナーのボリュームにクローンし、開発コンテナーを起動します。

例として、https://github.com/microsoft/vscode-remote-try-java を開くバッジは次のようになります。

[![Open in Dev Containers](https://img.shields.io/static/v1?label=Dev%20Containers&message=Open&color=blue)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/microsoft/vscode-remote-try-java)

open in dev container リンクを直接含めることもできます。

If you already have VS Code and Docker installed, you can click the badge above or [here](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/microsoft/vscode-remote-try-java) to get started. Clicking these links will cause VS Code to automatically install the Dev Containers extension if needed, clone the source code into a container volume, and spin up a dev container for use.

代替案: リポジトリ構成フォルダー

場合によっては、自身が管理していないリポジリ、またはリポジリ自体に構成を含めない方がよいと考えるリポジリの構成を作成したい場合があります。この状況に対処するには、リポジリに基づいて自動的に検出される構成ファイルを保存するために、ローカルファイルシステム上の場所を構成できます。

まず、**Dev > Containers: リポジトリ構成パス** の ユーザー設定 を、リポジトリコンテナー構成ファイルを保存するために使用したいローカルフォルダーで更新します。

設定エディターで「dev containers repo」を検索すると、設定が見つかります。

Repository container folders setting

次に、.devcontainer/devcontainer.json (および関連ファイル) を、リポジトリのリモート場所をミラーリングするサブフォルダーに配置します。たとえば、github.com/devcontainers/templates の構成を作成したい場合、次のフォルダー構造を作成します。

📁 github.com
    📁 devcontainers
        📁 templates
           📁 .devcontainer

一度配置されると、Dev Containers コマンドのいずれかを使用する際に構成が自動的に検出されます。コンテナー内では、コマンドパレット (F1) から **Dev Containers: コンテナー構成ファイルを開く** を選択して、関連する devcontainer.json ファイルを開き、さらに編集することもできます。

構成を検索するために使用されるパスは、git remote -v の出力から派生します。コンテナーでフォルダーを再度開こうとしたときに構成が見つからない場合は、コマンドパレット (F1) の **Dev Containers: コンテナーログを表示** で、チェックされたパスのリストを確認してください。

次のステップ