使用VS Code和GitHub

相关源文件

• 8-code-editor/1-using-a-code-editor/README.md
• 8-code-editor/images/create-new-file.png
• 8-code-editor/images/edit-a-file.png
• 8-code-editor/images/edit-vscode.dev.gif
• 8-code-editor/images/extension-details.png
• 8-code-editor/images/extension-settings.png
• 8-code-editor/images/extensions.png
• 8-code-editor/images/install-extension.gif
• 8-code-editor/images/working-tree.png

本文档提供了一份关于使用 VSCode.dev（一个基于 Web 的代码编辑器）处理 GitHub 仓库的全面指南。它涵盖了如何在不安装任何软件的情况下打开、编辑和贡献项目。有关使用本地 VS Code 安装的信息，请参阅相关文档。

介绍

VSCode.dev 是 Visual Studio Code 的轻量级、基于浏览器的版本，允许您直接在 Web 浏览器中执行代码编辑和源代码管理操作。本指南将向您展示如何利用此工具处理 GitHub 仓库、进行更改并为项目做出贡献。

来源： 8-code-editor/1-using-a-code-editor/README.md1-31'

VSCode.dev 界面概览

VSCode.dev 界面主要由三个部分组成

1. 活动栏 (Activity Bar)：位于最左侧，包含不同视图和功能的图标（资源管理器、源代码管理、扩展等）
2. 侧边栏 (Side Bar)：显示所选活动的展开视图（文件资源管理器、源代码管理、扩展）
3. 代码区域 (Code Area)：用于查看和修改代码的主要编辑空间

您可以通过单击活动栏中的相应图标在不同视图之间切换。

来源： 8-code-editor/1-using-a-code-editor/README.md32-48'

打开 GitHub 仓库

在 VSCode.dev 中打开 GitHub 仓库主要有两种方法

方法一：使用编辑器界面

1. 导航至 VSCode.dev
2. 单击“打开远程仓库”按钮
3. 或者，使用命令面板（Ctrl+Shift+P 或 Mac 上的 Cmd+Shift+P）
4. 输入“打开远程仓库”并选择该选项
5. 输入您要打开的 GitHub 仓库 URL

方法二：使用 URL 模式

您可以通过将 GitHub 域名替换为 vscode.dev/github 来直接在 VSCode.dev 中访问 GitHub 仓库

Original: https://github.com/microsoft/Web-Dev-For-Beginners
Modified: https://vscode.dev/github/microsoft/Web-Dev-For-Beginners

来源： 8-code-editor/1-using-a-code-editor/README.md51-78'

使用 VSCode.dev 处理仓库的工作流程

此图说明了使用 VSCode.dev 修改 GitHub 仓库的典型工作流程，从打开仓库到将更改推送到 GitHub。

来源： 8-code-editor/1-using-a-code-editor/README.md79-110'

编辑文件

创建新文件

要创建新文件

1. 在资源管理器中，导航到要创建文件的文件夹
2. 单击“新建文件...”图标
3. 输入文件名并按 Enter

编辑现有文件

1. 单击资源管理器中的文件以在代码区域中打开它
2. 在编辑器中进行更改
3. 保存文件（在 VSCode.dev 中自动完成）

源代码管理操作

进行更改后

1. 单击活动栏中的源代码管理图标
2. 在“更改”文件夹中查看您的更改
3. 将鼠标悬停在“更改”上，然后单击“+”按钮来暂存所有更改，或暂存单个文件
4. 在文本字段中输入提交消息
5. 单击复选标记图标提交并推送您的更改

工作树视图提供了您所做更改的可视化差异，便于您在提交前审查修改。

来源： 8-code-editor/1-using-a-code-editor/README.md79-110 来源： 8-code-editor/images/edit-a-file.png 来源： 8-code-editor/images/create-new-file.png

VSCode.dev 中的扩展

查找和安装扩展

1. 单击活动栏中的扩展图标
2. 在搜索字段中搜索扩展
3. 扩展显示信息包括
   • 扩展名称
   • 发布者名称
   • 简要描述
   • 下载量
   • 星级评分
4. 单击扩展以查看更多信息
5. 单击蓝色的“安装”按钮添加扩展

管理扩展

扩展视图提供了多个文件夹来导航扩展

• 已安装：显示您当前已安装的扩展
• 热门：显示常用扩展
• 推荐：显示推荐给您的工作区或基于最近打开文件的扩展

安装扩展后，您可以

• 修改设置：单击齿轮图标并选择“扩展设置”
• 禁用：在不卸载的情况下临时禁用扩展
• 卸载：完全移除扩展

来源： 8-code-editor/1-using-a-code-editor/README.md112-146 来源： 8-code-editor/images/extension-details.png 来源： 8-code-editor/images/extensions.png 来源： 8-code-editor/images/extension-settings.png 来源： 8-code-editor/images/install-extension.gif

VSCode.dev 与 GitHub 的集成

此图说明了 VSCode.dev 如何与 GitHub 的系统集成，以进行身份验证、仓库访问和源代码管理操作。

关键集成点

1. 身份验证：VSCode.dev 使用 GitHub 的身份验证来访问仓库
2. 仓库访问：编辑器直接从 GitHub 仓库获取文件
3. 源代码管理：在 VSCode.dev 中所做的更改可以直接提交回 GitHub
4. 扩展：支持来自市场的 Web 兼容扩展

这种集成使得可以直接从浏览器无缝地在浏览、编辑和提交 GitHub 仓库更改之间切换。

来源： 8-code-editor/1-using-a-code-editor/README.md32-110'

比较：基于 Web 的 VS Code 与桌面版 VS Code

功能	VSCode.dev（Web 版）	VS Code（桌面版）
安装	无需安装	需要本地安装
GitHub 集成	通过浏览器直接集成	需要额外设置
性能	依赖于浏览器资源	利用本地系统资源
扩展	仅限于 Web 兼容扩展	完全支持扩展
离线访问	需要互联网连接	可离线工作
终端访问	终端功能有限	完整的集成终端
文件系统访问	仅限于浏览器功能	完全访问本地文件系统
调试	基本调试功能	高级调试功能

VSCode.dev 提供了一种便捷的方式，无需安装即可快速处理 GitHub 仓库，而桌面版本为常规开发工作提供了更高级的功能和更好的性能。

来源： 8-code-editor/1-using-a-code-editor/README.md1-31

最佳实践

提高仓库管理效率

1. 组织更改：在提交之前，在源代码管理视图中审查更改
2. 提交消息：撰写清晰、描述性的提交消息
3. 定期提交：进行少量、集中的提交，而不是一次性提交大量更改
4. 使用扩展：安装可增强工作流程的扩展（例如代码格式化工具）
5. 命令面板：使用命令面板（Ctrl+Shift+P）快速访问命令
6. 保存工作：在暂存和提交之前确保更改已保存

何时使用 VSCode.dev 对比桌面版 VS Code

• 使用 VSCode.dev 进行

  • 快速编辑 GitHub 仓库
  • 在无法安装软件的计算机上为项目做出贡献
  • 审查拉取请求
  • 需要最少设置的教学/演示

• 考虑使用桌面版 VS Code 进行

  • 长时间的开发会话
  • 需要大量调试的项目
  • 处理本地环境/服务器时
  • 使用 Web 版本中没有的扩展时

来源： 8-code-editor/1-using-a-code-editor/README.md79-110 来源： 8-code-editor/1-using-a-code-editor/README.md158-162

结论

VSCode.dev 提供了一个便捷的基于浏览器的替代桌面版 VS Code 的方案。虽然它可能不提供桌面应用程序的所有功能，但它允许您无需任何安装即可快速访问、编辑和贡献 GitHub 仓库。这使其对于进行快速修改、从公共或受限制的计算机上做出贡献以及降低新贡献者进入 GitHub 项目的门槛尤其有价值。

有关 VSCode.dev 及其功能的更多信息，请参阅官方文档。

来源： 8-code-editor/1-using-a-code-editor/README.md158-162