教程：Visual Studio Code 入门

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

先决条件

• 下载并在你的计算机上安装 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 代码。

   输入时，你应该会看到弹出建议，帮助你完成代码（智能感知）。你可以使用 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');
   

   输入时，你应该会看到弹出建议，帮助你完成代码（智能感知）。你可以使用 Up 和 Down 键导航建议，并使用 Tab 插入选定的建议。

   还要注意代码的格式（语法高亮），帮助你区分代码的不同部分。

   

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

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

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

   

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

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

使用源代码管理

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 代码的建议和智能感知。

   

运行和调试代码

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 Free 计划免费使用 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 的基础知识，可以进一步了解如何：

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

• 使用集成终端

• 设置远程开发环境