vue-ts-example-2025/.devcontainer/devcontainer.json

/**
 * 一些参考链接：
 * https://containers.dev/implementors/json_reference/#variables-in-devcontainerjson
 * https://code.claude.com/docs/zh-CN/devcontainer
 */

{
  "name": "SBX",
  "forwardPorts": [4730, 4731], // vscode://settings/remote.localPortHost -> 默认只监听 localhost
  "portsAttributes": {
    "4730": { "label": "开发服务器端口", "onAutoForward": "notify" },
    "4731": { "label": "预览服务器端口", "onAutoForward": "notify" }
  },
  "build": {
    "dockerfile": "Dockerfile",
    "args": {
      //
    }
  },
  "runArgs": [
    // -----
    // "--network=host",
    // "--add-host=myservice.local:127.0.0.1",
    // -----
    // "--env-file",
    // ".devcontainer/.env",
    // -----
    "--cap-add=NET_ADMIN",
    "--cap-add=NET_RAW"
  ],
  "customizations": {
    "vscode": {
      "extensions": [
        // AI
        "anthropic.claude-code",
        "google.gemini-cli-vscode-ide-companion",
        "kilocode.kilo-code",
        "alibaba-cloud.tongyi-lingma",

        // >>>>>
        "vue.volar",
        "lokalise.i18n-ally",
        "eamodio.gitlens",
        "vitest.explorer",
        // <<<<<

        // 代码质量 / 格式化 / Lint
        "editorconfig.editorconfig",
        "dbaeumer.vscode-eslint",
        "stylelint.vscode-stylelint",
        "oxc.oxc-vscode",
        "esbenp.prettier-vscode"
      ],
      "settings": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": "explicit"
        },
        "terminal.integrated.defaultProfile.linux": "zsh",
        "terminal.integrated.profiles.linux": {
          "🐚bash": { "path": "bash", "icon": "terminal-bash" },
          "💲zsh": { "path": "zsh", "icon": "terminal-cmd", "overrideName": true }
        },

        // https://stackoverflow.com/questions/75708866/vscode-dev-container-fails-to-load-ms-vscode-js-debug-extension-correctly
        // https://davidwesst.com/blog/missing-bootloader-in-vscode-devcontainer/
        /**
         * autoAttachFilter 存在问题：会在 NODE_OPTIONS 中注入 bootloader.js 的 --require 参数，
         * 并错误地重复拼接 --max-old-space-size，形成类似：
         *   NODE_OPTIONS= --require /home/.../bootloader.js  --max-old-space-size=4096--max-old-space-size=4096
         * 导致启动时报错：
         *   Error: illegal value for flag --max-old-space-size=4096--max-old-space-size=4096 of type size_t
         * 将其设置为 "disabled" 以规避该问题。
         */
        "debug.javascript.autoAttachFilter": "disabled"
      }
    }
  },
  "containerEnv": {
    // "CLAUDE_CONFIG_DIR": "/home/usr_vscode/.claude",
    "ANTHROPIC_AUTH_TOKEN": "${localEnv:ANTHROPIC_AUTH_TOKEN}",
    "ANTHROPIC_BASE_URL": "${localEnv:ANTHROPIC_BASE_URL}",
    "GEMINI_API_KEY": "${localEnv:GEMINI_API_KEY}",
    "GOOGLE_GEMINI_BASE_URL": "${localEnv:GOOGLE_GEMINI_BASE_URL}",
    "NODE_OPTIONS": "--max-old-space-size=4096",
    "CLAUDE_CONFIG_DIR": "/home/usr_vscode/.claude",
    "DEVCONTAINER": "true", // https://github.com/anthropics/claude-code/blob/1fe9e369a7c30805189cbbb72eb69c15ed4ec96b/.devcontainer/Dockerfile#L42
    "SANDBOX": "sandbox-devcontainer", // gemini 显示这个。
    "TZ": "${localEnv:TZ:Asia/Shanghai}"
  },
  "remoteUser": "usr_vscode",
  "mounts": [
    "source=${localWorkspaceFolderBasename}---bashhistory,target=/commandhistory,type=volume",
    "source=${localWorkspaceFolderBasename}---gemini,target=/home/usr_vscode/.gemini,type=volume",
    "source=${localWorkspaceFolderBasename}---claude-code-router,target=/home/usr_vscode/.claude-code-router,type=volume",
    "source=${localWorkspaceFolderBasename}---claude-code,target=/home/usr_vscode/.claude,type=volume",
    "source=${localWorkspaceFolderBasename}---pnpm-store,target=/home/usr_vscode/.pnpm-store,type=volume",
    "source=${localWorkspaceFolderBasename}---node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume"
  ],

  /**
   * 执行顺序总结
    1. initializeCommand (本地主机)
    2. 容器创建
    3. onCreateCommand (容器内，仅首次)
    4. updateContentCommand (容器内)
    5. postCreateCommand (容器内)
    6. 容器启动
    7. postStartCommand (容器内，每次启动)
    8. VS Code 附加到容器
    9. postAttachCommand (容器内，每次附加)
  */
  "initializeCommand": /* 本地执行（容器创建前） */ "echo '准备创建容器...'",
  "onCreateCommand": /* 容器内执行（仅首次创建） */ {
    "setup-node": "pnpm env use lts --global",
    "fix-claude-code-router": "sudo chown -R usr_vscode /home/usr_vscode/.claude-code-router",
    "fix-claude": "sudo chown -R usr_vscode /home/usr_vscode/.claude",
    "fix-gemini": "sudo chown -R usr_vscode /home/usr_vscode/.gemini",
    "fix-node_modules": "sudo chown usr_vscode node_modules"
  },
  "updateContentCommand": /* 容器内执行（创建后或内容更新） */ "pnpm install",
  "postCreateCommand": /* 容器内执行（创建完成后） */ {
    "install-global-cli": "pnpm install -g @google/gemini-cli@latest @anthropic-ai/claude-code@latest @musistudio/claude-code-router@latest"
  },
  "postStartCommand": /* 容器内执行（每次启动） */ "echo '容器已启动！'",
  "postAttachCommand": /* 容器内执行（每次附加） */ "echo '开发环境已就绪！${containerWorkspaceFolder}'",
  // "updateRemoteUserUID": true,
  "waitFor": "updateContentCommand",
  "workspaceMount": "source=${localWorkspaceFolder},target=/wrkspc,type=bind,consistency=delegated",
  "workspaceFolder": "/wrkspc"
}