什么是 GitHub Codespaces
GitHub Codespaces 是 GitHub 提供的云端开发环境，基于 VS Code，可用于在浏览器中编写、运行和调试代码。
关键特性
- 云端开发：无需本地安装环境
- 快速启动：预配置环境，秒速加载
- 环境一致：团队成员环境完全一致
- 持久化存储：代码和配置自动保存
- 端口转发：自动转发本地端口到互联网
适用场景
- 跨平台开发：ARM/x86 架构兼容
- 团队协作：统一开发环境
- 临时环境：快速测试和验证
- 教学演示：分享可复现的环境
环境配置
基础配置结构
项目根目录/
├── .devcontainer/ # Codespaces 配置目录
│ ├── devcontainer.json # 主配置文件
│ └── Dockerfile # 自定义环境
├── .vscode/ # VS Code 配置
│ ├── settings.json # 编辑器设置
│ └── tasks.json # 任务配置
└── .github/ # GitHub 相关配置创建 .devcontainer/devcontainer.json
{
"name": "VuePress 开发环境",
"image": "mcr.microsoft.com/devcontainers/javascript-node:1-20-bullseye",
"features": {
"ghcr.io/devcontainers/features/github-cli:1": {},
"ghcr.io/devcontainers/features/node:1": {
"version": "20",
"nodeGypDependencies": true
}
},
"customizations": {
"vscode": {
"extensions": [
"vue.volar",
"vue.vscode-typescript-vue-plugin",
"bradlc.vscode-tailwindcss",
"sdras.vue-vscode-snippets",
"mhutchie.git-graph",
"eamodio.gitlens",
"esbenp.prettier-vscode",
"dbaeumer.vscode-eslint"
],
"settings": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"terminal.integrated.defaultProfile.linux": "bash",
"files.autoSave": "afterDelay"
}
}
},
"forwardPorts": [8080],
"portsAttributes": {
"8080": {
"label": "VuePress Dev Server",
"onAutoForward": "openPreview"
}
},
"postCreateCommand": "npm install -g pnpm && pnpm install",
"postAttachCommand": "pnpm docs:dev",
"containerEnv": {
"VUE_PRESS_SASS_IMPL": "sass-embedded",
"NODE_OPTIONS": "--max-old-space-size=4096"
},
"remoteUser": "node"
}使用流程
启动 Codespaces
方法一：网页版
- 访问 GitHub 仓库页面
- 按
.（点）键直接打开 - 或点击 Code → Codespaces → Create codespace
方法二：VS Code 桌面版
- 安装 GitHub Codespaces 扩展
- 按 F1 → "Codespaces: Create New Codespace"
- 选择仓库和分支
首次启动流程
- 环境构建：拉取镜像，创建容器
- 依赖安装：执行
postCreateCommand - 服务启动：执行
postAttachCommand - 端口转发：自动转发配置的端口
- 浏览器打开：显示预览链接
日常使用命令
# 终端操作
pwd # /workspaces/仓库名
node --version # 检查 Node.js
pnpm --version # 检查 pnpm
# 项目操作
pnpm install # 安装依赖
pnpm docs:dev # 启动开发服务器
pnpm docs:build # 构建项目
# Git 操作
git status
git add .
git commit -m "更新"
git push