教程：Visual Studio Code 入门

在本教程中，您将了解 Visual Studio Code 的关键功能，以帮助您快速开始编码。您将了解用户界面的不同组件以及如何根据自己的喜好进行自定义。然后，您将编写一些代码并使用内置的代码编辑功能（如 IntelliSense 和代码操作），以及了解如何运行和调试代码。通过安装语言扩展，您可以添加对不同编程语言的支持。

先决条件

在您的计算机上下载并安装 Visual Studio Code

步骤 1：在 VS Code 中打开文件夹

在 VS Code 中，您可以无缝地使用单个文件，例如快速编辑或查看文件。或者，通过打开一个文件夹（也称为工作区），您可以解锁更多功能，例如特定于文件夹的配置设置、恢复该文件夹的 UI 状态、调试配置等。了解有关工作区的更多信息。

让我们从创建一个文件夹并在 VS Code 中打开它开始。您将在整个教程中使用此文件夹。

在您的计算机上创建一个名为 vscode101 的新文件夹。
打开 Visual Studio Code。

首次打开 VS Code 时，您应该看到欢迎页面，其中包含不同的操作以开始使用。
在欢迎页面上，选择打开文件夹...，然后选择您创建的文件夹。

VS Code 窗口将重新加载，您应该在资源管理器视图的顶部看到文件夹名称。您将使用资源管理器视图来查看和管理工作区中的文件和文件夹。

或者，您可以从文件菜单中选择打开文件夹...或按Ctrl+K Ctrl+O打开文件夹。

提示：如果您使用命令行与 VS Code 协作，请将文件夹名称作为参数传递以直接为该文件夹启动 VS Code。例如，输入 code . 以在 VS Code 中打开当前文件夹。

步骤 2：探索用户界面

现在您已经在 VS Code 中打开了一个文件夹，让我们快速浏览一下用户界面。

使用活动栏在视图之间切换

活动栏位于窗口的侧面，可让您快速访问不同的视图，例如资源管理器、搜索、源代码管理和运行和调试视图。

使用活动栏探索不同的视图。

当您将鼠标悬停在活动栏上时，您可以看到每个视图的名称以及打开每个视图的键盘快捷键。您会发现 VS Code 中的许多功能都已经分配了键盘快捷键，您也可以根据自己的喜好自定义这些快捷键。
请注意，当您在活动栏中选择一个视图时，会打开主侧边栏。

主侧边栏显示特定于视图的信息。例如，源代码管理视图显示 Git 存储库中的更改，运行和调试视图允许您配置和启动调试会话。

提示：再次选择活动栏中的当前视图以切换主侧边栏的打开和关闭状态。

使用编辑器查看和编辑文件

编辑器位于窗口的主区域，您可以在其中查看和编辑工作区中的文件。

在活动栏中选择资源管理器视图，然后选择新建文件...按钮以在您的工作区中创建一个新文件。
输入名称 index.html 并按Enter。

文件将添加到您的工作区，并且编辑器将在窗口的主区域打开，您可以在其中开始键入和编辑文件。
将更多文件添加到您的工作区，并注意每个文件都会在新编辑器选项卡中打开。

您可以根据需要打开任意多个编辑器，并以垂直或水平方式并排查看它们。了解有关并排编辑的更多信息。

从面板区域访问终端

面板区域位于编辑器下方，包含不同的视图（例如输出和调试信息），还可以让您访问集成终端。

通过从菜单中选择视图>外观>面板（或按⌘J（Windows、Linux Ctrl+J））

请注意面板区域中的不同视图。当您使用 VS Code 中的不同功能（例如调试代码）时，您将使用这些视图中的信息和功能。

提示：您可以使用视图>外观>面板位置菜单移动面板区域，例如移动到左侧或右侧以获得更多垂直空间。
通过在面板区域中选择终端>新建终端来打开集成终端，并尝试运行一些 shell 命令。

终端允许您直接在 VS Code 中运行 shell 命令，而无需切换到其他终端应用程序。例如，您可以使用终端为您的项目安装依赖项，或运行开发服务器。请注意，终端工作目录是您工作区的根目录。

您可以根据您的操作系统配置在不同的 shell 之间进行选择，例如 PowerShell、命令提示符或 Bash。

使用命令面板访问命令

VS Code 中的许多命令都可以通过命令面板获得。例如，在命令面板中输入创建新文件以在您的工作区中创建文件，或输入Git以查看您可以触发的 Git 操作列表。

选择视图>命令面板或按⇧⌘P（Windows、Linux Ctrl+Shift+P））

提示：请注意，命令面板显示具有键盘快捷键的命令的默认键盘快捷键。您可以使用键盘快捷键直接运行命令。
按 ⌘P (Windows, Linux Ctrl+P) 使用命令面板导航到工作区中的文件。开始键入以筛选列表。

快速打开功能使您能够快速在工作区中打开文件，或搜索文件中的符号。在 VS Code 文档中获取有关命令面板的更多信息。

使用状态栏查看状态信息

状态栏位于窗口底部，显示有关您正在编辑的文件和已打开的工作区的信息。例如，如果您打开的文件夹是 Git 仓库，状态栏将显示 Git 状态和当前分支。

通过在资源管理器视图中选择文件来打开文件。

状态栏显示当前编辑器的语言模式、缩进和行尾。
选择状态栏中的缩进字段（在屏幕截图中显示为 Spaces: 4）以修改当前文件的缩进。例如，使用制表符而不是空格。

如果您打开了 Git 仓库，则可以选择状态栏中的分支名称来创建新分支。

步骤 3：自定义用户界面

每个开发人员都有自己对编码环境的外观的偏好。VS Code 使您能够通过各种设置更改布局、颜色、键盘快捷键和几乎所有其他编辑器方面。

让我们首先使用颜色主题来自定义 VS Code 中的颜色。颜色主题会影响 VS Code 用户界面元素和编辑器突出显示颜色。

要选择不同的颜色主题

选择活动栏中的管理按钮（齿轮图标），然后选择主题>颜色主题以显示颜色主题选择器。

或者，您可以在命令面板中输入颜色主题或按 ⌘K ⌘T (Windows, Linux Ctrl+K Ctrl+T).
使用上和下键在列表中导航并预览主题的颜色。

VS Code 附带了一系列内置主题供您选择。当您在列表中移动时，将在 VS Code 中预览活动主题。

提示：您也可以直接从 VS Code 市场选择颜色主题，方法是从颜色主题选择器中选择浏览其他颜色主题...。

除了更改用户界面的颜色主题之外，您还可以通过使用设置来自定义 VS Code 的几乎所有部分。也许您更喜欢编辑器使用不同的字体，更改自动换行，或启用浮动编辑器窗口。

让我们使用设置编辑器修改编辑器中的字体大小

选择文件>首选项 > 设置（或按 ⌘, (Windows, Linux Ctrl+,)）打开设置编辑器。
将编辑器：字体大小设置的值修改为36。

当您切换到index.html编辑器选项卡时，请注意字体大小更改如何在编辑器中立即应用。您可以选择设置旁边的齿轮图标并选择重置设置以将值重置为其默认值。

默认情况下，当您更改设置时，它将应用于所有 VS Code 工作区（用户设置）。切换到工作区选项卡以更改仅适用于当前工作区的设置。

提示：使用设置编辑器中的搜索框快速查找设置。

还有更多方法可以自定义您的 VS Code 体验，例如更改默认键盘快捷键、添加代码片段，或者通过添加来自 Visual Studio Marketplace 的扩展。

步骤 4：编写一些代码

VS Code 首先是一个代码编辑器，因此让我们从编写一些代码开始！VS Code 内置支持 JavaScript、TypeScript、HTML、CSS 等。在本教程中，您将创建一个示例 JavaScript 文件并使用 VS Code 提供的一些代码编辑功能。

VS Code 支持多种编程语言，下一步，您将安装一个语言扩展以添加对另一种语言（即 Python）的支持。

在资源管理器视图中，创建一个名为app.js的新文件，并开始键入以下 JavaScript 代码
```
function sayHello(name) {
  console.log('Hello, ' + name);
}

sayHello('VS Code');
```
在您键入时，您应该会看到弹出提示，帮助您完成代码（IntelliSense）。您可以使用上和下键在建议中导航，并使用 Tab 插入所选建议。

还要注意代码的格式（语法高亮），以帮助您区分代码的不同部分。
将光标放在Hello,字符串上，选择灯泡图标，然后选择转换为模板字符串。

灯泡表示存在可用的代码操作，它们是帮助您对代码应用快速修复的建议。您也可以使用 ⌃Space (Windows, Linux Ctrl+Space) 键盘快捷键打开灯泡菜单。

在本例中，代码操作将""Hello, " + name转换为模板字符串 `Hello, ${name}`，这是一个特殊的 JavaScript 结构，用于在字符串中嵌入表达式。

您可以在工作区中的不同文件中进一步尝试 IntelliSense。例如，在index.html文件中，开始键入<以查看 HTML 标签的建议。

提示：切换文件>自动保存菜单项以在每次进行更改时自动保存文件。

步骤 5：使用源代码管理

在编写代码时，您需要将工作保存在源代码控制系统中以跟踪更改或与他人协作。Visual Studio Code 具有集成的源代码控制管理 (SCM) 并包含 Git 支持，开箱即用。

让我们使用内置的 Git 支持来提交您之前所做的更改。

确保您已在计算机上安装 Git。您可以通过打开终端并输入git --version来检查是否安装了 Git。
选择活动栏中的源代码管理视图，然后选择初始化存储库以创建工作区的新 Git 存储库。

您也可以选择通过选择发布到 GitHub将更改直接发布到 GitHub 存储库。
在您初始化存储库后，源代码管理视图将显示您在工作区中所做的更改。

请注意，每个文件旁边都有一个字母指示更改的类型。例如，U 表示未跟踪/新文件。

当您将鼠标悬停在更改上时，可以选择丢弃或暂存更改。暂存更改意味着您已将其标记为准备提交。
选择更改旁边的+以一次性暂存所有更改。
输入提交消息，例如Add hello function，然后选择提交以将更改提交到您的 Git 存储库。
源代码管理图表显示了 Git 存储库提交历史记录的直观表示。您可以使用图表来浏览提交历史记录、比较更改等。

关于 VS Code 中的源代码控制还有很多东西需要发现。获取有关 VS Code 中的源代码控制的更多信息。

步骤 6：安装语言扩展

VS Code 内置的功能只是开始。VS Code 拥有丰富的扩展生态系统，可以让您向您的安装中添加语言、调试器和工具以支持您的特定开发工作流程。在 Visual Studio Marketplace 中有数千个扩展可用。

让我们安装一个语言扩展以添加对 Python 或您感兴趣的任何其他编程语言的支持。

选择活动栏中的扩展视图。

扩展视图使您能够在 VS Code 中浏览和安装扩展。
在扩展视图搜索框中输入Python以浏览与 Python 相关的扩展。选择由 Microsoft 发布的Python扩展，然后选择安装按钮。
现在，在工作区中创建一个名为hello.py的新 Python 文件，并开始键入以下 Python 代码
```
def say_hello(name):
    print("Hello, " + name)

say_hello("VS Code")
```
请注意，您现在还将获得对 Python 代码的建议和 IntelliSense。

详细了解 VS Code 中的代码编辑功能、IntelliSense、代码导航和重构。

步骤 7：运行和调试您的代码

VS Code 的一项关键功能是对运行和调试代码的大力支持。VS Code 内置支持运行和调试 Node.js 应用程序。在本教程中，您将使用之前安装的 Python 扩展来调试 Python 程序。

让我们调试您在上一步中创建的hello.py程序。

确保您的计算机上安装了 Python 3。

要在 VS Code 中运行和调试程序，您需要在计算机上安装必要的运行时。例如，要运行和调试 Node.js 程序，您需要安装 Node.js 运行时。
在hello.py文件中，将光标放在print行上，然后按 F9 设置断点。

编辑器的左边缘将出现一个红点，表示已设置断点。使用断点，您可以在代码的特定行暂停程序执行。
按 F5 启动调试会话。在快速选择菜单中选择Python 调试器，然后选择Python 文件以调试当前 Python 文件。

选择 Python 调试器

选择运行当前 Python 文件
请注意，程序启动并且执行在您设置的断点处停止。

VS Code 使用您通过扩展安装的 Python 调试器来运行和调试程序。

提示：在执行暂停时，将鼠标悬停在编辑器中的name变量上以检查其值。您可以在运行和调试视图中的变量视图中随时查看变量的值。
按调试工具栏中的继续按钮或按 F5 继续执行。

VS Code 中还有更多调试功能，例如监视变量、条件断点和启动配置。深入了解VS Code 中的调试。

使用 AI 和 GitHub Copilot 增强您的编码

使用GitHub Copilot，您可以进一步增强您在 VS Code 中的编码体验，甚至发现您不知道的 VS Code 功能和设置。

VS Code 中的 GitHub Copilot 可以帮助您完成各种任务，例如

代码补全：获得代码行或整个函数的建议。
解释代码：获得代码片段的解释，帮助您理解它们的含义。
代码重构和生成：重构您的代码并生成与代码相关的工件，例如测试或文档。
修复错误：获得帮助完成常见的编码任务，例如查找和修复错误，或与 shell 命令相关的错误。
了解 VS Code：询问有关 VS Code 功能、设置或命令的问题。

安装 GitHub Copilot 扩展

后续步骤

恭喜！您已完成本教程并探索了 Visual Studio Code 的一些关键功能。现在您已了解 Visual Studio Code 的基础知识，请获取有关如何执行以下操作的更多信息

10/29/2024