如何在 VSCode 中使用 GitHub Codespaces 在浏览器中运行代码

云磊酱_8652

云磊酱_8652

2026-06-11

481人浏览

原创

vscode 桌面版无法启动 codespaces,必须从 github 仓库页面触发并在浏览器中加载远程容器;“在 vscode 中打开”实为使用 vscode for web(github.dev)连接 github 托管的 linux 容器,需通过 open with codespaces 进入真环境,且依赖 devcontainer.json 配置运行时。

如何在 vscode 中使用 github codespaces 在浏览器中运行代码

不能在 VSCode 桌面版里“运行代码”来启动 Codespaces —— 它必须从 GitHub 仓库页面触发,然后在浏览器中加载完整容器环境。

为什么“在 VSCode 中打开 Codespaces”这个说法本身就有误导

VSCode 桌面端没有内置 Codespaces 运行时。所谓“使用 VSCode”,实际是用 VSCode 的前端界面(即 VSCode for Web)连接到 GitHub 托管的 Linux 容器。这个界面只在两个地方真正生效:github.com/codespaces(列表页,不干活)和从仓库点 Open with Codespaces 后跳转的 github.dev 地址(带终端、Ports、调试面板的真环境)。

常见错误现象包括:

  • 在桌面 VSCode 命令面板搜 Codespaces: Connect to Codespace 报错 “command not found” —— 因为该命令仅在 VSCode for Web(浏览器版)中注册
  • 手动访问 vscode.dev 然后粘贴仓库链接 —— 这只是静态浏览,没容器、没终端、npm 和 python3 都不可用
  • 以为装了 GitHub Codespaces 扩展就能本地“启动”一个 Codespace —— 扩展只负责创建/连接,底层容器始终由 GitHub 调度

在浏览器中真正跑起代码的最小可行路径

不是配置,不是安装,是三步点击流:

  • 用 Safari 或 Chrome 打开任意 GitHub 仓库(比如 github.com/microsoft/vscode)
  • 点绿色 Code 按钮 → 选 Open with Codespaces → 点 Create codespace on main
  • 等待 20–60 秒,自动跳转到带完整侧边栏的 github.dev 页面,此时终端可用、Ports 面板可见、Run and Debug 图标亮起

验证是否成功:打开集成终端,执行 which python3 或 node -v。有输出才说明容器已就绪;如果返回空,说明你还在 vscode.dev 静态模式,没进 Codespaces。

devcontainer.json 不写,代码很可能根本 run 不起来

Codespaces 默认镜像(如 ubuntu-22.04)只预装 git、wget、curl,不带 python3、node、dotnet 等运行时 —— 这和本地 macOS/Windows 完全不同。

GitHub Repo Teardown
GitHub Repo Teardown

深入拆解任意GitHub开源项目,生成一份美观且产品经理和工程师均可理解的HTML报告,覆盖...

下载

必须靠 .devcontainer/devcontainer.json 声明依赖,否则:

  • npm run dev 报 command not found
  • dotnet hello-world.cs 提示 dotnet: command not found
  • 即使你手动 sudo apt install python3,下次重建 codespace 又得重来

正确做法:在仓库根目录建 .devcontainer/devcontainer.json,内容至少包含 image 或 features 字段。例如 Python 项目可直接用官方 feature:

{
  "image": "mcr.microsoft.com/devcontainers/python:3",
  "features": {
    "ghcr.io/devcontainers/features/python:1": {}
  }
}

改完后必须执行 Codespaces: Rebuild Container(命令面板里搜),否则配置不生效。

终端里敲的每一行命令,其实都在远程 Ubuntu 容器里执行

你在浏览器中看到的终端,不是本机 shell,也不是 Docker Desktop 里的容器,而是 GitHub 分配给你的专属 ubuntu-22.04(或你指定的镜像)实例。这意味着:

  • git commit 提交的是远程容器里的代码,不是你 iPad 本地文件系统
  • pip install requests 装到的是容器的 /usr/local/lib/python3.x/site-packages,重启 codespace 后若没写进 devcontainer.json 就会丢失
  • 转发的端口(如 3000)显示为 https://your-name-3000.githubpreview.dev,这是 GitHub 的反向代理,不是你本机 localhost:3000

最容易被忽略的一点:Codespaces 的“重启”不是刷新网页,而是重建整个容器 —— 它会丢掉所有未提交的改动、未保存的终端历史、未持久化的 node_modules。别指望它像本地开发一样随手改随手试。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

vscode github

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
自建git服务器
自建git服务器

git服务器是目前流行的分布式版本控制系统之一,可以让多人协同开发同一个项目。本专题为大家提供自建git服务器相关的各种文章、以及下载和课程。

2023.07.05

5099

9

git和svn的区别
git和svn的区别

git和svn的区别:1、定义不同;2、模型类型不同;3、存储单元不同;4、是否拥有全局版本号;5、内容完整性不同;6、版本库不同;7、克隆目录速度不同;8、分支不同。php中文网为大家带来了git和svn的相关知识、以及相关文章等内容。

2023.07.06

1580

6

git撤销提交的commit
git撤销提交的commit

Git是一个强大的版本控制系统,它提供了很多功能帮助开发人员有效地管理和控制代码的变更,本专题为大家提供git 撤销提交的commit相关的各种文章内容,供大家免费下载体验。

2023.07.24

914

5

git提交错误怎么撤回
git提交错误怎么撤回

git提交错误撤回的方法:git reset head^:撤回最后一次提交,恢复到提交前状态。git revert head:创建新提交,内容与之前提交相反。git reset :使用提交的 sha-1 哈希撤回指定提交。交互式舞台区:标记要撤回的特定更改,然后提交,排除已撤回更改。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.04.09

3317

7

git怎么对比两个版本的文件内容
git怎么对比两个版本的文件内容

要对比两个版本的 git 文件,请使用 git diff 命令:git diff 比较工作树和暂存区之间的差异。git diff 比较两个提交或标签之间的差异。git diff 输出显示差异块,其中 + 表示添加的行,- 表示删除的行, 表示修改的行。可使用 gitkraken、meld、beyond compare 等可视化工具更直观地查看差异。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.04.09

2981

6

vscode是什么_vscode怎么安装配置
vscode是什么_vscode怎么安装配置

VS Code(Visual Studio Code)是一款免费、开源的跨平台代码编辑器,由微软开发和维护。它被广泛用于软件开发和编程,支持多种编程语言和框架。VS Code 同时提供了丰富的功能和扩展性,使开发者可以高效地编写、编辑和调试代码。

2023.06.30

1175

18

vscode怎么运行代码
vscode怎么运行代码

vscode是一个运行于MacOS X、Windows和Linux之上的,针对于编写现代Web和云应用的跨平台源代码编辑器;vscode免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2023.07.21

2332

3

vscode使用的框架介绍
vscode使用的框架介绍

VSCode是一款跨平台代码编辑器,它基于Electron框架和Monaco Editor构建。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.14

1809

12

vscode一般用来写什么语言
vscode一般用来写什么语言

VSCode是一款功能强大的代码编辑器,支持多种编程语言和文件格式。它内置对 JavaScript、Python、Java、C++、TypeScript、HTML/CSS、Go 等语言的支持。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.14

1627

8

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程