VSCodeでコンテナ内を操作したいのでRemote Developmentを使う

今、こんな感じ

問題点

一部の拡張機能がMacにRubyとかを入れていないと動作しない
そのせいでリモートデバッグとか静的解析ツールを逐次実行してチェックし、生産性が少し落ちてる

コンテナの環境に入って拡張機能を使いたい

リモートエクスプロラーにあるリモートコンテナの機能などでコンテナ内に入ったり、拡張機能をインストールできるとのこと

やること

拡張機能

Remote Developmentインストール

Dockerインストール

確認

dockerが動作することを確認

コマンドを実施して、正常に動作することを確認

docker-compose up

dockerの拡張機能でdocker-compose.ymlのあるディレクトリ毎開く

↓ ↓ ↓

設定ファイルを確認

拡張機能を移植

コンテナ内で利用したい拡張機能がある場合は追加して、リビルド

.devcontainer/devcontainer.json

 "customizations": {
        "vscode": {
            "extensions": [
                "PKief.material-icon-theme",
                "dbaeumer.vscode-eslint",
                "ecmel.vscode-html-css",
                "idered.npm",
                "christian-kohler.path-intellisense",
                "esbenp.prettier-vscode",
                "Prisma.prisma",
                "wayou.vscode-todo-highlight",
                "fabiospampinato.vscode-todo-plus",
                "shardulm94.trailing-spaces",
                "mhutchie.git-graph",
                "ms-azuretools.vscode-docker",
                "MS-CEINTL.vscode-language-pack-ja",
                "naumovs.color-highlight",
                "ms-vscode.vscode-typescript-next"
            ]
        }
    }