Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Visual Studio CodeのDev Containersを使って開発環境構築してみよ...

Visual Studio CodeのDev Containersを使って開発環境構築してみよう(2024/09/07版)

Open Developers Conference 2024内のハンズオンコンテンツ「9/7 VS Code Dev Containersで始めるリモート開発環境体験ハンズオン Vol2」で使用した資料です

Ishimoto Tatsuya

September 07, 2024
Tweet

More Decks by Ishimoto Tatsuya

Other Decks in Technology

Transcript

  1. 主な設定項目 15 設定項目 説明 name Dev container上で表示する名前 image 開発環境に使用するコンテナイメージを選択 build

    (省略) features コンテナ内で使用する追加ツールを定義。 VS CodeやGitHubのUI上から選択することも可能。 使用できるツールの一覧: https://containers.dev/features forwardPorts (省略) initializeCommand コンテナを立ち上げる前にホストマシン側で任意のコマンドを実行できる。 postCreateCommand コンテナ作成後にコンテナ内で任意のコマンドを実行できる。 初めて開発を始める際に、お決まりで実行する npm installなどを設定しておくと便利 (似たものにonCreateCommand、updateContentCommandなどがある) customizations (別スライドにて) remoteUser (省略)
  2. customizationsで設定できること • インストールすべき拡張機能の指定やVS Codeの設定が定義できる • settings.jsonでは、インデントサイズや使用する静的解析ツールなどが定義できる ◦ 設定はできるが.vscode/settings.jsonに設定は寄せておいた方がいいかも { "customizations":

    { "vscode": { "extensions": [], "settings": {}, } } } 16 設定項目 説明 extensions Dev Containersでインストールするべき拡張機能の IDを指定できる settings settings.jsonファイルで定義できる内容が指定できる
  3. 17 設定ファイルのスコープ 3パターン • ユーザー(青枠) ◦ すべてのワークスペースで有効 ◦ プロファイル機能で切り替えも可能 ◦

    GitHubを通じて他者と共有されない ▪ プロジェクト外に作成される • ワークスペース (緑枠) ◦ ワークスペース内のみで有効 ◦ GitHubを通じて共有することが可能 ▪ .vscode/settings.json • フォルダ(赤枠) ◦ 特定のフォルダのみに有効 ◦ Multi-root Workspaces使用時のみ ◦ GitHubを通じて共有することが可能 ▪ プロジェクト配下にpjA/.vscode/settings.json