9.0 KiB
使用代码编辑器
本课将介绍如何使用 VSCode.dev，一个基于网页的代码编辑器，让你无需在电脑上安装任何软件即可修改代码并为项目做出贡献。
学习目标
在本课中，你将学习如何：
- 在代码项目中使用代码编辑器
- 使用版本控制跟踪更改
- 自定义编辑器以适应开发需求
前置条件
在开始之前，你需要创建一个 GitHub 账户。如果你还没有账户，请访问 GitHub 并创建一个账户。
简介
代码编辑器是编写程序和协作开发现有代码项目的重要工具。一旦你掌握了编辑器的基础知识并学会如何利用其功能，你就可以在编写代码时应用这些技能。
开始使用 VSCode.dev
VSCode.dev 是一个基于网页的代码编辑器。你无需安装任何软件，就像打开其他网站一样简单。要开始使用编辑器，请打开以下链接：https://vscode.dev。如果你尚未登录 GitHub，请按照提示登录或创建一个新账户并登录。
加载完成后，界面应类似于下图：
界面主要分为三个部分，从左到右依次是：
- 活动栏，包括一些图标，如放大镜 🔎、齿轮 ⚙️ 等。
- 默认展开的活动栏，称为 侧边栏，通常显示为 资源管理器。
- 最右侧是代码区域。
点击每个图标可以显示不同的菜单。完成后，点击 资源管理器 图标返回初始界面。
当你开始创建或修改代码时，操作会发生在右侧最大的区域中。你也可以在这里查看现有代码，接下来我们将进行相关操作。
打开一个 GitHub 仓库
首先，你需要打开一个 GitHub 仓库。有多种方式可以打开仓库，本节将介绍两种方法，帮助你开始修改代码。
1. 使用编辑器
通过编辑器本身打开远程仓库。如果你访问 VSCode.dev，会看到一个 "Open Remote Repository" 按钮：
你也可以使用命令面板。命令面板是一个输入框，你可以在其中输入命令或操作的关键词来找到相应的命令。点击左上角的菜单，选择 View，然后选择 Command Palette，或者使用以下快捷键：Ctrl-Shift-P（MacOS 上为 Command-Shift-P）。
打开菜单后，输入 open remote repository，然后选择第一个选项。你参与的或最近打开的多个仓库会显示出来。你也可以使用完整的 GitHub URL 选择一个仓库。将以下 URL 粘贴到输入框中：
https://github.com/microsoft/Web-Dev-For-Beginners
✅ 如果成功，你将在文本编辑器中看到该仓库的所有文件。
2. 使用 URL
你也可以直接使用 URL 加载仓库。例如，当前仓库的完整 URL 是 https://github.com/microsoft/Web-Dev-For-Beginners，但你可以将 GitHub 域名替换为 VSCode.dev/github，直接加载仓库。结果 URL 为 https://vscode.dev/github/microsoft/Web-Dev-For-Beginners。
编辑文件
在浏览器或 VSCode.dev 中打开仓库后，下一步是更新或修改项目。
1. 创建新文件
你可以在现有文件夹中创建文件，也可以在根目录/文件夹中创建。要创建新文件，打开你希望保存文件的位置/目录，点击活动栏（左侧）的 "新建文件..." 图标，命名文件并按回车。
2. 编辑并保存仓库中的文件
使用 VSCode.dev 可以快速更新项目，而无需在本地加载任何软件。
要更新代码，点击活动栏上的 资源管理器 图标，查看仓库中的文件和文件夹。选择一个文件，在代码区域打开它，进行修改并保存。
完成项目更新后，选择 源代码管理 图标，查看你对仓库所做的所有更改。
要查看项目的更改，选择扩展活动栏中 Changes 文件夹中的文件。这将打开一个 工作树，让你直观地看到文件的更改。红色表示项目中删除的内容，绿色表示新增的内容。
如果你对所做的更改感到满意，将鼠标悬停在 Changes 文件夹上，点击 + 按钮以暂存更改。暂存意味着准备好将更改提交到 GitHub。
如果你对某些更改不满意并希望丢弃它们，将鼠标悬停在 Changes 文件夹上，选择 撤销 图标。
然后，输入一个 提交信息（对项目更改的描述），点击 勾选图标 提交并推送更改。
完成项目工作后，点击左上角的 汉堡菜单图标 返回 github.com 上的仓库。
使用扩展
在 VSCode 中安装扩展可以为编辑器添加新功能并自定义开发环境，从而提升开发工作流。这些扩展还可以帮助你支持多种编程语言，通常分为通用扩展或基于语言的扩展。
要浏览所有可用扩展的列表，点击活动栏上的 扩展图标，然后在标有 "在市场中搜索扩展" 的文本框中输入扩展名称。
你会看到一个扩展列表，每个扩展都包含 扩展名称、发布者名称、一句话描述、下载次数 和 星级评分。
你还可以通过展开 已安装文件夹 查看所有已安装的扩展，通过 热门文件夹 查看大多数开发者使用的热门扩展，以及通过 推荐文件夹 查看基于同一工作区用户或最近打开文件推荐的扩展。
1. 安装扩展
要安装扩展，在搜索框中输入扩展名称，点击它以在扩展活动栏中查看扩展的更多信息。
你可以点击扩展活动栏中的 蓝色安装按钮 安装扩展，或者在选择扩展后，点击代码区域中显示的安装按钮。
2. 自定义扩展
安装扩展后，你可能需要根据自己的偏好修改其行为并进行自定义。为此，选择扩展图标，此时你的扩展会出现在 已安装文件夹 中，点击 齿轮图标 并导航到 扩展设置。
3. 管理扩展
安装并使用扩展后，VSCode.dev 提供了多种选项来根据不同需求管理扩展。例如，你可以选择：
-
禁用： (当你暂时不需要某个扩展但又不想完全卸载时，可以禁用它)
选择扩展活动栏中的已安装扩展 > 点击齿轮图标 > 选择 "禁用" 或 "禁用（工作区）"
或者 打开代码区域中的扩展，点击蓝色禁用按钮。 -
卸载：选择扩展活动栏中的已安装扩展 > 点击齿轮图标 > 选择 "卸载"
或者 打开代码区域中的扩展，点击蓝色卸载按钮。
作业
复习与自学
阅读更多关于 VSCode.dev 及其其他功能的内容。
免责声明：
本文档使用AI翻译服务Co-op Translator进行翻译。尽管我们努力确保准确性，但请注意，自动翻译可能包含错误或不准确之处。应以原始语言的文档作为权威来源。对于关键信息，建议使用专业人工翻译。因使用本翻译而导致的任何误解或误读，我们概不负责。