使用代码编辑器

使用代码编辑器

本课涵盖了使用 VSCode.dev 的基础知识，这是一个基于网络的代码编辑器。通过使用它，你可以在不安装任何软件的情况下对代码进行修改并为项目做贡献。

学习目标

在本课程中，你将学习如何：

• 在代码项目中使用代码编辑器
• 使用版本控制跟踪更改
• 为开发自定义编辑器

先决条件

在开始之前，你需要在 GitHub 上创建一个帐户。导航到 GitHub 并创建一个帐户（如果尚未创建）。

简介

代码编辑器是编写程序和协作现有编码项目的必备工具。一旦你理解了编辑器的基本操作及其功能，你就能在编写代码时应用它们。

开始使用 VSCode.dev

VSCode.dev 是一个基于网络的代码编辑器。你无需安装任何软件即可使用它，就像打开其他任何网站一样。要开始使用编辑器，请打开以下链接：https://vscode.dev。如果你尚未登录到 GitHub，请按照提示登录或创建新帐户并登录。

加载后，它应该看起来类似于此图像：

从最左侧开始，依次有三个主要部分：

1. 活动栏，其中包含一些图标，如放大镜 、齿轮 ⚙️ 和其他几个图标。
2. 扩展的活动栏，默认显示为 资源管理器，称为 侧边栏。
3. 最后，右侧的代码区域。

点击每个图标以显示不同的菜单。完成后，点击 资源管理器 以便回到起点。

当你开始创建代码或修改现有代码时，这些操作将在右侧最大的区域进行。你将在这个区域可视化现有的代码，这将在接下来的操作中完成。

打开 GitHub 仓库

首先，你需要打开一个 GitHub 仓库。有多种方法可以打开仓库。在这一节中，你将看到两种不同的方法来打开仓库，以便你可以开始进行更改。

1. 使用编辑器

使用编辑器本身打开远程仓库。如果你访问 VSCode.dev，你会看到一个 “打开远程仓库” 按钮：

你也可以使用命令面板。命令面板是一个输入框，你可以在其中键入命令或动作中的任何单词来找到正确的命令来执行。使用左上角的菜单，然后选择 查看，然后选择 命令面板，或者使用以下键盘快捷键：Ctrl-Shift-P（在 MacOS 中则是 Command-Shift-P）。

一旦菜单打开，键入 打开远程仓库，然后选择第一个选项。会列出你参与或最近打开的多个仓库。你也可以使用完整的 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 and load the repository directly. The resulting URL would be https://vscode.dev/github/microsoft/Web-Dev-For-Beginners.

Edit files

Once you have opened the repository on the browser/ vscode.dev, the next step would be to make updates or changes to the project.

1. Create a new file

You can either create a file inside an existing folder, or create it in the root directory/folder. To create a new file, open a location/directory to which you want the file to be saved and select the 'New file ...' icon on the activity bar (left), give it a name and hit enter.

2. Edit and save a file on the repository

Using vscode.dev is helpful whenever you want to make quick updates to your project without having to load any software locally.
To update your code, click the 'Explorer' icon, also located on the activity bar to view files & folders in the repository.
Select a file to open it on the code area, make your changes and save.

Once you are done updating your project, select the 源代码控制 icon which contains all the new changes you have made to your repository.

To view the changes you made to your project, select the file(s) in the 更改 folder in the expanded activity bar. This will open a 'Working Tree' for you to visually see the changes you made to the file. Red shows an omission to the project, while green signifies an addition.

If you are satisfied with the changes you made, hover on the 更改 folder and click the + button to stage the changes. Staging simply means preparing your changes to commit them to GitHub.

If however you are not comfortable with some changes and you want to discard them, hover on the 更改 folder and select the 撤销 icon.

Then, type in a 提交信息 (A description of the change you have made to the project), click the 检查图标 to commit and push your changes.

Once done working on your project, select the 汉堡包菜单图标 at the top left to return to the repository on github.com.

Using extensions

Installing extensions on VSCode allows you to add new features and customized development environment options on your editor to improve your development workflow. These extensions also help you add support for multiple programming languages and are often either generic extensions or language-based extensions.

To browse through the list of all available extensions, click the 扩展图标 on the activity bar and start typing the name of the extension on the text field labelled 'Search Extensions in Marketplace'.
You will see a list of extensions, each one containing the extension name, publisher's name, a 1 sentence description, number of downloads and a star rating.

You can also view all previously installed extensions by expanding the 已安装文件夹 , popular extensions used by most developers in the 热门文件夹 and recommended extensions for you either by users in the same workspace or based on your recently opened files in the _推荐文件夹 。

1. 安装扩展

要安装扩展，请在搜索字段中键入扩展名称，并单击以在扩展栏展开后在代码区域中查看有关该扩展的更多信息。

你可以点击扩展栏上的 蓝色安装按钮 或在选择扩展以加载更多详细信息时在代码区域上出现的安装按钮来安装。

2. 自定义扩展

安装扩展后，你可能需要根据你的偏好修改其行为并进行自定义。为此，选择扩展图标，这次，你的扩展将出现在 已安装文件夹 中，点击 齿轮图标 并导航到 扩展设置。

3. 管理扩展

安装并使用扩展后，vscode.dev 提供了多种选项来根据不同的需求管理你的扩展。例如，你可以选择：

• 禁用： （当你不再需要扩展但不想完全卸载它时）

  在扩展栏上选择已安装的扩展 > 点击齿轮图标 > 选择 '禁用' 或 '禁用（工作区）' 或者 在代码区域中打开扩展并点击蓝色的禁用按钮。

• 卸载： 选择扩展栏上的已安装扩展 > 点击齿轮图标 > 选择 '卸载' 或者 在代码区域中打开扩展并点击蓝色的卸载按钮。

作业

使用 vscode.dev 创建简历网站

复习与自学

阅读更多关于 VSCode.dev 及其其他功能。

声明:
本文件灏天文库团队进行了翻译。尽管我们力求准确，但请注意，翻译可能包含错误或不准确之处。原文档以其原始语言为准。我们不对因使用此翻译而产生的任何误解或误译负责。