教程：Visual Studio Code 入门

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

先决条件

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

在 VS Code 中打开文件夹

你可以使用 VS Code 来处理单个文件进行快速编辑，也可以打开一个文件夹，也称为工作区。

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

1. 打开 Visual Studio Code。

   首次打开 VS Code 时，你应该看到带有不同入门操作的欢迎页面。

2. 从菜单中选择文件 > 打开文件夹...以打开文件夹。

   

3. 选择新建文件夹，创建一个名为 vscode101 的新文件夹，然后选择选择文件夹（在 macOS 上为打开）。

   你创建的文件夹是工作区的根目录。

4. 在“工作区信任”对话框中，选择是，我信任作者以启用工作区中的所有功能。

   

   由于你在计算机上创建了文件夹，因此你可以信任该文件夹中的代码。

   重要提示

   “工作区信任”允许你决定是否可以由 VS Code 执行项目文件夹中的代码。从 Internet 下载代码时，应先查看该代码以确保其可以安全运行。获取有关工作区信任的更多信息。

5. 现在，你应该在左侧看到资源管理器视图，其中显示了文件夹的名称。

   你将使用资源管理器视图来查看和管理工作区中的文件和文件夹。

浏览用户界面

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

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

1. 使用活动栏在不同的视图之间切换。

   

   提示

   将鼠标悬停在活动栏上以查看每个视图的名称和相应的键盘快捷键。你可以通过再次选择视图或按键盘快捷键来切换视图的打开和关闭状态。

2. 在活动栏中选择视图时，将打开主侧边栏以显示特定于视图的信息。

   例如，“运行和调试”视图使你可以配置和启动调试会话。

   

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

1. 在活动栏中选择“资源管理器”视图，然后选择新建文件...按钮以在工作区中创建新文件。

   

2. 输入名称 index.html 并按 Enter。

   一个文件将被添加到你的工作区，并且一个编辑器将在窗口的主区域中打开。

   

3. 在 index.html 文件中开始键入一些 HTML 代码。

   在键入时，你应该会看到弹出建议，帮助你完成代码 (IntelliSense)。你可以使用 向上 和 向下 键来导航建议，并使用 Tab 键插入选定的建议。

4. 向工作区添加更多文件，并注意每个文件都会打开一个新的编辑器选项卡。

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

   

从“面板”区域访问终端

1. VS Code 有一个集成的终端。按 ⌃` (Windows、Linux Ctrl+`) 打开它。

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

   

2. 在终端中，输入以下命令以在工作区中创建新文件。

   echo "Hello, VS Code" > greetings.txt
   

   默认的工作文件夹是工作区的根目录。请注意，“资源管理器”视图会自动拾取并显示新文件。

   

3. 你可以同时打开多个终端。选择启动配置文件下拉列表以查看可用的 shell 并选择一个。

   

使用命令面板访问命令

1. 按 ⇧⌘P (Windows、Linux Ctrl+Shift+P) 打开命令面板。你还可以使用视图 > 命令面板...菜单项。

   VS Code 中的许多命令都可以通过命令面板访问。当您安装扩展时，它们也可以向命令面板添加命令。

   

   提示

   请注意，命令面板会显示具有默认键盘快捷键的命令的快捷方式。您可以使用键盘快捷键直接运行命令。

2. 命令面板支持不同的操作模式

   1. 在 > 符号之后，开始键入以筛选命令列表。例如，键入 move terminal 可查找将终端移动到新窗口的命令。

      

   2. 删除 > 字符并开始键入以搜索工作区中的文件。您可以使用 ⌘P (Windows, Linux Ctrl+P) 键盘快捷键打开命令面板并直接开始搜索文件。

      

配置 VS Code 设置

您可以通过配置设置来自定义 VS Code 的几乎每个部分。您可以使用 设置编辑器 修改 VS Code 中的设置，也可以直接修改 settings.json 文件。

1. 按 ⌘, (Windows, Linux Ctrl+,) 打开设置编辑器（或选择 文件 > 首选项 > 设置 菜单项）。

   

   提示

   使用搜索框来筛选显示的设置列表。

2. 默认情况下，VS Code 不会自动保存修改后的文件。从“自动保存”下拉列表中选择一个值以更改此行为。

   

   VS Code 会自动将更改应用到设置。当您修改工作区中的文件时，它现在应该会自动保存。

3. 要将设置恢复为其默认值，请选择设置旁边的齿轮图标，然后选择 重置设置。

   

   提示

   您可以通过在搜索框中键入 @modified 或选择 已修改 筛选器来快速查找所有已修改的设置。

4. 您可以使用“设置编辑器”中的选项卡在 用户 设置和 工作区 设置之间切换。

   用户设置应用于您的所有工作区。工作区设置仅应用于当前工作区。工作区设置会覆盖用户设置。获取有关 VS Code 中的设置的更多信息。

编写一些代码

VS Code 内置了对 JavaScript、TypeScript、HTML、CSS 等的支持。在本教程中，您将创建一个示例 JavaScript 文件，并使用 VS Code 提供的一些代码编辑功能。

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

1. 在资源管理器视图中，创建一个新文件 app.js，然后开始键入以下 JavaScript 代码

   function sayHello(name) {
     console.log('Hello, ' + name);
   }
   
   sayHello('VS Code');
   

   在键入时，你应该会看到弹出建议，帮助你完成代码 (IntelliSense)。你可以使用 向上 和 向下 键来导航建议，并使用 Tab 键插入选定的建议。

   另请注意代码的格式设置（语法高亮显示），以帮助您区分代码的不同部分。

   

2. 当您将光标放在字符串 Hello, 上时，您应该会看到一个灯泡图标出现，表示有代码操作。

   您还可以使用 ⌃Space (Windows, Linux Ctrl+Space) 键盘快捷键打开灯泡菜单。

3. 选择灯泡图标，然后选择 转换为模板字符串。

   

   代码操作是用于将快速修复应用于您的代码的建议。在这种情况下，代码操作会将 ""Hello, " + name 转换为 模板字符串 `Hello, ${name}`，这是一种特殊的 JavaScript 构造，用于在字符串中嵌入表达式。

了解有关 VS Code 中代码编辑功能、IntelliSense、代码导航和重构的更多信息。

使用源代码管理

Visual Studio Code 具有集成的源代码管理 (SCM)，并且开箱即用地包含 Git 支持。

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

1. 在活动栏中选择 源代码管理 视图以打开源代码管理视图。

   

2. 请确保您的计算机上已安装 Git。如果您没有安装 Git，您将在源代码管理视图中看到一个按钮，用于将其安装在您的计算机上。

3. 选择 初始化存储库 以在您的工作区中创建新的 Git 存储库。

   

   初始化存储库后，“源代码管理”视图将显示您在工作区中所做的更改。

4. 您可以通过将鼠标悬停在文件上并选择文件旁边的 + 来暂存单个更改。

   

   提示

   要暂存所有更改，请将鼠标悬停在 更改 上，然后选择 暂存所有更改 按钮。

5. 输入提交消息，例如 Add hello function，然后选择 提交 以将更改提交到您的 Git 存储库。

   

   提示

   您可以使用 源代码管理图 来显示 Git 存储库的提交历史记录的直观表示。

关于 VS Code 中的源代码管理，还有很多内容需要探索。获取有关 VS Code 中的源代码管理的更多信息。

安装语言扩展

VS Code 拥有丰富的扩展生态系统，可让您向安装中添加语言、调试器和工具，以支持您的特定开发工作流。Visual Studio Marketplace 中提供了数千个扩展。

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

1. 在活动栏中选择 扩展 视图。

   通过“扩展”视图，您可以浏览和安装 VS Code 中的扩展。

   

2. 在“扩展”视图搜索框中输入 Python 以浏览与 Python 相关的扩展。选择 Microsoft 发布的 Python 扩展，然后选择 安装 按钮。

   

3. 现在，在您的工作区中创建一个新的 Python 文件 hello.py，然后开始键入以下 Python 代码

   def say_hello(name):
       print("Hello, " + name)
   
   say_hello("VS Code")
   

   请注意，您现在还可以获得 Python 代码的建议和 IntelliSense。

   

运行并调试代码

VS Code 内置了对运行和调试 Node.js 应用程序的支持。在本教程中，您将使用在上一步中安装的 Python 扩展来调试 Python 程序。

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

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

   如果您的计算机上没有安装 Python 解释器，您将在窗口的右下角看到一条通知。选择 选择解释器 以打开 命令面板，然后选择要使用的 Python 解释器或安装一个。

2. 在 hello.py 文件中，将光标放在 print 行上，然后按 F9 以设置断点。

   编辑器的左边距会显示一个红点，表示已设置断点。使用断点，您可以将程序的执行暂停在代码的特定行。

   

3. 按 F5 开始调试会话。

   1. 选择 Python 调试器

      

   2. 选择运行当前 Python 文件

      

4. 请注意，程序启动并且执行停止在您设置的断点处。

   

   提示

   在执行暂停时，将鼠标悬停在编辑器中的 name 变量上，以检查其值。您可以在 运行和调试 视图的 变量 视图中随时查看变量的值。

5. 在调试工具栏中按 继续 按钮或按 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 的基础知识，请获取有关如何执行以下操作的更多信息

• 发现并运行代码的单元测试

• 使用集成的终端

• 设置远程开发环境