教程：开始使用 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. 在工作区信任对话框中，选择是，我信任作者以启用工作区中的所有功能。

   

   因为您在计算机上创建了文件夹，所以您可以信任文件夹中的代码。

   Important

   工作区信任允许您决定项目文件夹中的代码是否可以被VS Code执行。当您从互联网下载代码时，应首先审查它以确保运行安全。获取更多关于工作区信任的信息。

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

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

探索用户界面

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

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

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

   

   Tip

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

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 中的许多命令都可以通过命令面板使用。当你安装扩展时，它们也可以向命令面板添加命令。

   

   Tip

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

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

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

      

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

      

配置 VS Code 设置

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

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

   

   Tip

   使用搜索框过滤显示的设置列表。

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

   

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

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

   

   Tip

   您可以通过在搜索框中输入@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. 您可以通过将鼠标悬停在文件上并选择文件旁边的+来暂存个别更改。

   

   Tip

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

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

   

   Tip

   您可以使用源代码控制图来显示您的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. 请注意，程序开始执行并在您设置的断点处停止。

   

   Tip

   在暂停执行时，通过在编辑器中悬停在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的基础知识，请获取更多关于如何操作的信息：

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

• 使用集成终端

• 设置远程开发环境