教程：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 执行。当您从互联网下载代码时，应首先审查它以确保运行安全。获取更多关于工作区信任的信息。

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

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

探索用户界面

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

使用活动栏切换视图

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

   

   提示

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

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

   例如，“运行和调试”视图使您能够配置和启动调试会话。

   

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

1. 在活动栏中选择资源管理器视图，然后选择**新建文件...**按钮在您的工作区中创建一个新文件。

   

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

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

   

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

   在您输入时，您应该会看到弹出建议，帮助您完成代码（IntelliSense）。您可以使用 Up 和 Down 键在建议之间导航，使用 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）。您可以使用 Up 和 Down 键在建议之间导航，使用 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 是一款由 AI 驱动的助手，可帮助您更快地编写代码，并能帮助您完成各种任务，例如代码补全、代码重构和修复错误。

让我们从获取 Copilot 的代码建议开始。

1. 确保您已在 VS Code 中设置好 Copilot。请按照我们Copilot 设置指南中的步骤操作。

   提示

   如果您还没有 Copilot 订阅，您可以通过注册Copilot 免费计划来免费使用 Copilot，并获得每月的代码补全和聊天互动限额。

2. 在 `hello.py` 文件中，将光标放在文件末尾并输入此函数头。

   def say_day_of_week(date)
   

   GitHub Copilot 将自动建议函数的其余部分。按 Tab 接受代码建议。

3. 接下来，让我们调用我们的新函数。

   say_day_of_week(date.today())
   

   请注意，`date` 关键字上有一个波浪线，表示存在错误。

4. 将光标放在 `date` 关键字上，选择*灯泡*图标，然后选择**使用 Copilot 修复**。

   

   GitHub Copilot 将为错误建议一个修复方案。如果您对建议满意，请选择**接受**。

   提示

   您也可以使用 ⌘. (Windows, Linux Ctrl+.) 键盘快捷键手动触发快速修复。

您可以使用 VS Code 中的 Copilot 做更多的事情。通过我们的Copilot 快速入门了解更多关于 VS Code 中的 GitHub Copilot 的信息。

后续步骤

恭喜！您已完成本教程，并探索了 Visual Studio Code 的一些关键功能。既然您已经学习了 Visual Studio Code 的基础知识，请获取更多关于如何

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

• 使用集成终端

• 设置远程开发环境