教程：开始使用Visual Studio Code

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

先决条件

• 下载并安装Visual Studio Code在您的电脑上

在 VS Code 中打开文件夹

你可以使用 VS Code 来编辑单个文件，或者你可以打开一个文件夹，也称为 工作区。

让我们首先创建一个文件夹，并在 VS Code 中打开它。在整个教程中，你将使用这个文件夹。

1. 打开Visual Studio Code并选择文件 > 打开文件夹... 从菜单中打开一个文件夹。

2. 选择 新建文件夹 并创建一个名为 vscode101然后选择选择文件夹 (打开在macOS上) 在VS Code中打开文件夹。

   VS Code 现在将您打开的文件夹视为工作区。

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

   

   重要

   Workspace Trust 让你决定项目文件夹中的代码是否可以由 VS Code 执行。当你从互联网下载代码时，你应该先审查它，以确保可以安全运行。获取有关 Workspace Trust 的更多信息。

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

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

   

探索用户界面

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

通过活动栏在视图之间切换

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

   

   小贴士

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

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

   例如，Run 和 Debug 视图使您可以配置和启动调试会话。

   

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

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

   

2. 输入姓名index.html 并按 回车键。

   文件被添加到你的工作区，并且编辑器在Windows的主要区域打开。

   

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

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

4. 将更多文件添加到你的工作区，并注意到每个文件都会打开一个新的编辑器标签页。

   您可以打开任意多个编辑器，并垂直或水平并排查看。了解更多关于并排编辑的信息。

   

从面板区域访问终端

1. VS Code 集成了终端。按 ⌃` (Windows, Linux Ctrl+`) 打开它。你也可以使用 视图 > 终端 菜单项。

   您可以根据操作系统配置选择不同的外壳，例如 PowerShell、命令提示符或 Bash。

   

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

   回显 "你好，VS Code" > 问候.txt
   

   默认的工作文件夹是你的工作区根目录。注意，资源管理器视图会自动检测并显示新文件。

   

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

   

使用命令面板访问命令

1. 打开命令面板，按⇧⌘P（Windows, Linux Ctrl+Shift+P）。你也可以使用视图 > 命令面板 菜单项。

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

   

   小贴士

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

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

   1. 命令模式 (>)之后>符号，开始输入以过滤命令列表。例如，输入移动终端找到命令将终端移动到新Windows。

      

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

      

   3. 符号搜索模式 (#)：替换 >角色 #在你的代码中搜索变量或函数等符号。

配置 VS Code 设置

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

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

   

   小贴士

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

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

   

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

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

   

   小贴士

   您可以通过输入快速找到所有已修改的设置@修改在搜索框中或选择“已修改”过滤器。

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

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

写一些代码

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

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

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

   函数 sayHello(name) {
     console.log('Hello, ' + name);
   }
   
   说你好('VS Code');
   

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

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

   

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

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

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

   

   代码行动是建议对您的代码应用快速修复。在这种情况下，代码行动转换"你好，" + name 进入一个 模板字符串 你好，${name}，这是一个特殊的JavaScript构造，用于在字符串中嵌入表达式。

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

使用源代码管理

Visual Studio Code 已经集成了源代码控制管理（SCM）并包括Git支持。

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

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

   

2. 确保你已经在电脑上安装了Git。如果你还没有安装Git，你将在源代码控制视图中看到一个按钮来在你的机器上安装它。

3. 选择初始化仓库以在您的工作区创建一个新的Git仓库。

   

   在你初始化一个仓库后，源代码控制视图会显示你在工作区中所做的更改。

4. 您可以通过悬停在文件上并选择来暂存单个更改输入：+在文件旁边。

   

   小贴士

   要提交所有更改，请悬停在更改上并选择提交所有更改按钮。

5. 输入提交信息，例如添加问候函数，然后选择提交以将更改提交到您的Git存储库。

   

   小贴士

   选择图表在源代码控制视图中显示您的Git存储库的提交历史的可视化表示。

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

安装语言扩展

VS Code 有一个丰富的扩展生态系统，可以让你在安装中添加语言、调试器和工具，以支持你的特定开发工作流程。在 Visual Studio 市场 中有成千上万的扩展可供选择。

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

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

   扩展视图使您能够在 VS Code 内浏览和安装扩展。

   

2. 输入 Python 在扩展视图搜索框中以查找与Python相关的扩展。选择 Python 扩展由微软发布，然后选择 安装 按钮。

   

3. 现在，创建一个新的Python文件你好.py在你的工作区，并开始输入以下Python代码：

   定义 说你好(名字):
       打印("你好, " + 名字)
   
   说你好("VS Code")
   

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

   

运行和调试你的代码

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

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

1. 确保Python 3已安装在您的计算机上。

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

2. 在你好.py文件，将光标放在打印 单击并按 F9 以设置断点。

   编辑器的左边缘出现一个红色圆点，表示已设置断点。有了断点，您可以在特定的代码行暂停程序的执行。

   

3. 按 F5 以开始调试会话。

   1. 选择Python调试器：

      

   2. 选择运行当前的Python文件：

      

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

   

   小贴士

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

5. 按继续按钮在调试工具栏中，或按F5继续执行。

   

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

使用AI加速您的编码

VS Code 内置支持 GitHub Copilot，这是一款由 AI 提供支持的助手，能够帮助完成各种任务，例如代码补全、代码重构、实现新功能等。

让我们使用基于聊天的与AI的互动来实现一个新的功能你好.py文件。

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

   小贴士

   如果你还没有 Copilot 订阅，你可以通过注册 Copilot 免费计划 来免费使用 Copilot，并获得每月有限的内联建议和聊天互动。

2. 通过选择 VS Code 标题栏中的 聊天 > 打开聊天 来打开聊天视图。

   聊天视图是与AI进行对话的地方。您可以询问有关您的代码的问题，计划新功能，或请求实现新功能。

   

3. 在聊天输入框中，输入以下提示以实现一个交互式日历：

   创建一个基于终端的交互式日历，用Python显示当前月份，并允许用户导航到上个月和下个月。
   

4. 按 回车键 将提示发送给AI。

   人工智能在聊天对话中回应并开始生成代码。您可以查看更改的文件列表，编辑器显示更改的差异。

   

5. 运行生成的代码以查看交互式日历的运行效果。

   

6. 审查生成的代码并选择保留以接受更改。

7. 通过向AI提出后续问题，进一步实验，以添加更多功能到日历中。

要更深入地了解在 VS Code 中使用 AI，请尝试我们的Copilot Quickstart教程，您可以在其中跟随一个实践教程，在 VS Code 中使用 AI 创建您的第一个应用程序。

下一步

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

• 使用AI加速您的编码

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

• 使用集成终端

• 设置远程开发环境