在 VS Code 中开始使用 GitHub Copilot

GitHub Copilot 改变了您在 Visual Studio Code 中编写代码的方式。在本实践教程中，您将构建一个完整的任务管理 Web 应用程序，同时探索 VS Code 的 AI 功能：智能行内建议、使用代理进行自主功能开发、使用行内聊天进行精确编辑、集成的智能操作以及强大的自定义选项。

完成本教程后，您将拥有一个可运行的 Web 应用程序和一个适应您开发风格的个性化 AI 编码设置。

创建示例应用

使用 VS Code 中的聊天一键生成示例应用程序。

先决条件

您的计算机上安装了 VS Code。请从 Visual Studio Code 网站下载。
有权访问 GitHub Copilot。请按照以下步骤在 VS Code 中设置 GitHub Copilot。

提示
如果您没有 Copilot 订阅，您可以直接从 VS Code 内部注册以免费使用 Copilot，并获得每月的行内建议和聊天交互限制。

步骤 1：体验行内建议

当您输入时，由 AI 驱动的行内建议就会出现，帮助您更快、更少错误地编写代码。让我们开始构建任务管理器的基础。

为您的项目创建一个新文件夹并在 VS Code 中将其打开。
创建一个名为 index.html 的新文件。
开始键入以下内容，在您键入时，VS Code 会提供行内建议（幽灵文本）
```
<!DOCTYPE html>
```
您可能会看到不同的建议，因为大型语言模型是非确定性的。
按 Tab 接受建议。

恭喜！您刚刚接受了您的第一个由 AI 驱动的行内建议。
继续构建您的 HTML 结构。在 <body> 标签内，开始键入
```
<div class="container">
    <h1>My Task Manager</h1>
    <form id="task-form">
```
注意 VS Code 如何在您构建应用程序结构时继续建议相关的 HTML 元素。
如果您看到多个建议，请将鼠标悬停在幽灵文本上以查看导航控件，或者使用 ⌥] (Windows, Linux Alt+]) 和 ⌥[ (Windows, Linux Alt+[) 在选项之间循环。

行内建议在您键入时自动工作，学习您的模式和项目上下文。它们对于编写样板代码、HTML 结构和重复模式特别有用。

步骤 2：使用代理构建完整功能

AI 代理是 VS Code 最强大的 AI 功能。给定一个自然语言提示，它们可以自主地跨多个文件规划和实现复杂功能。让我们使用它们来创建任务管理应用程序的核心功能。

按 ⌃⌘I (Windows, Linux Ctrl+Alt+I) 或选择 VS Code 标题栏中的聊天图标来打开“聊天”视图。

“聊天”视图是您通过自然语言提示与 AI 交互的地方。您可以进行持续的对话，并迭代地完善您的请求以获得更好的结果。
在代理下拉菜单中选择 Agent，让 AI 独立地端到端实现您的请求。
重要
如果您没有看到代理选项，请确保在 VS Code 设置中启用了代理（
chat.agent.enabled
- 在 VS Code 中打开
- 在 VS Code Insiders 中打开
ORG）。您的组织也可能禁用了代理 - 请联系您的管理员以启用此功能。
输入以下提示并按 Enter。代理会分析您的请求并开始实现解决方案。
```
Create a complete task manager web application with the ability to add, delete, and mark tasks as completed. Include modern CSS styling and make it responsive. Use semantic HTML and ensure it's accessible. Separate markup, styles, and scripts into their own files.
```
观察代理如何生成实现您的请求所需的必要文件和代码。您应该会看到它更新 index.html 文件，创建一个用于样式设计的 styles.css 文件，以及一个用于功能的 script.js 文件。

提示
不同的语言模型可能具有不同的优势。使用“聊天”视图中的模型下拉菜单在不同的语言模型之间切换。
审查生成的文件并选择 Keep（保留）以接受所有更改。
通过右键单击文件并选择 Show Preview（显示预览）在 VS Code 的集成浏览器中打开 index.html 文件。您可以添加任务、将其标记为完成以及删除它们。
现在，让我们添加一个额外的功能。在聊天输入框中输入以下提示
```
Add a filter system with buttons to show all tasks, only completed tasks, or only pending tasks. Update the styling to match the existing design.
```
注意代理如何协调多个文件中的更改以完全实现此功能。

代理擅长理解高层次的需求并将其转化为可工作的代码。它们非常适合实现新功能、重构大段代码或从头开始构建整个应用程序。

步骤 3：使用行内聊天进行精确调整

虽然代理处理大型功能，但编辑器行内聊天非常适合对文件内特定代码部分进行有针对性的改进。让我们用它来增强任务管理应用程序。

打开您的 JavaScript 文件并找到添加新任务的代码。
选择代码块，然后按 ⌘I (Windows, Linux Ctrl+I) 打开编辑器行内聊天。

注意
由于大型语言模型是非确定性的，确切的代码可能会有所不同。
输入以下提示
```
Add input validation to prevent adding empty tasks and trim whitespace from task text.
```
注意行内聊天如何专门关注所选代码并进行有针对性的改进。
审查更改并选择 Keep（保留）以应用它们。

编辑器行内聊天非常适合进行小的、集中的更改，而不会影响更广泛的代码库，例如添加错误处理、重构单个函数或修复错误。

步骤 4：个性化您的 AI 体验

自定义聊天可以使其更好地适应您的特定需求和编码风格。您可以设置自定义指令并构建专门的自定义代理。让我们为您的项目创建一个完整的个性化设置。

创建自定义指令

自定义指令会告诉 AI 您的编码偏好和标准。这些会自动应用于所有聊天交互。

在项目根目录中创建一个名为 .github 的新文件夹。
在 .github 文件夹中，创建一个名为 copilot-instructions.md 的文件。

添加以下内容

# Project general coding guidelines

## Code Style
- Use semantic HTML5 elements (header, main, section, article, etc.)
- Prefer modern JavaScript (ES6+) features like const/let, arrow functions, and template literals

## Naming Conventions
- Use PascalCase for component names, interfaces, and type aliases
- Use camelCase for variables, functions, and methods
- Prefix private class members with underscore (_)
- Use ALL_CAPS for constants

## Code Quality
- Use meaningful variable and function names that clearly describe their purpose
- Include helpful comments for complex logic
- Add error handling for user inputs and API calls

保存文件。这些指令现在适用于您在此项目中的所有聊天交互。
通过要求代理添加一个新功能来测试自定义指令
```
Add a dark mode toggle button to the task manager.
```
注意生成的代码如何遵循您指定的指南。VS Code 支持更高级的自定义指令，例如为特定文件类型应用指令。

提示

使用聊天中的 /init 斜杠命令根据您项目的结构和编码模式自动生成自定义指令。如果您有一个现有的代码库并希望为其准备 AI 辅助，这很有用。

创建用于代码审查的自定义代理

自定义代理为特定任务创建专业的 AI 角色。让我们创建一个专注于分析和提供代码反馈的“代码审查者”代理。在自定义代理定义中，您可以定义 AI 的角色、特定准则以及它可以使用哪些工具。

打开命令面板并运行 Chat: New Custom Agent（聊天：新建自定义代理）命令。
选择 .github/agents 作为位置。

此选项会将自定义代理添加到您的工作区，使其他团队成员在打开项目时可以使用它。
将自定义代理命名为“Reviewer”。这会在 .github/agents 文件夹中创建一个名为 Reviewer.agent.md 的新文件。

用以下内容替换文件内容。请注意，此自定义代理不允许代码更改。

---
name: 'Reviewer'
description: 'Review code for quality and adherence to best practices.'
tools: ['vscode/askQuestions', 'vscode/vscodeAPI', 'read', 'agent', 'search', 'web']
---
# Code Reviewer agent

You are an experienced senior developer conducting a thorough code review. Your role is to review the code for quality, best practices, and adherence to [project standards](../copilot-instructions.md) without making direct code changes.

When reviewing code, structure your feedback with clear headings and specific examples from the code being reviewed.

## Analysis Focus
- Analyze code quality, structure, and best practices
- Identify potential bugs, security issues, or performance problems
- Evaluate accessibility and user experience considerations

## Important Guidelines
- Ask clarifying questions about design decisions when appropriate
- Focus on explaining what should be changed and why
- DO NOT write or suggest specific code changes directly

保存文件。在“聊天”视图中，您现在可以从代理选择器中选择此自定义代理。
通过从代理选择器中选择 Reviewer 并输入以下提示来测试您的自定义代理
```
Review my full project
```
注意 AI 现在如何表现得像一个代码审查者，提供分析和改进建议。

步骤 5：使用智能操作获取预构建的 AI 辅助

智能操作将 AI 功能直接集成到 VS Code 界面中，无缝地插入到您的开发工作流程中。与聊天交互不同，智能操作会根据您最需要它们的地方出现上下文。让我们以提交消息生成为例进行探索。

按 ⌃⇧G (Windows, Linux Ctrl+Shift+G) 或选择“活动栏”中的“源代码管理”图标来打开源代码管理视图。
如果您尚未为项目初始化 Git 存储库，请在“源代码管理”视图中选择 Initialize Repository（初始化存储库）进行操作。
通过选择要提交的文件旁边的 + 按钮来暂存您的更改。
选择闪烁图标，根据您的暂存更改生成提交消息。

AI 会分析您的暂存更改，并生成遵循“约定式提交”标准的描述性提交消息。AI 会考虑
- 更改了哪些文件
- 更改的性质（添加的功能、错误修复、重构）
- 修改的范围和影响
审查生成的消息。如果您对它满意，请继续提交。如果您想要不同的风格或重点，请再次选择闪烁图标以生成替代消息。

像提交消息生成这样的智能操作展示了 AI 如何自然地集成到您现有的工作流程中，而无需您切换到聊天界面。VS Code 还有许多其他智能操作可以帮助您进行调试、测试等。

后续步骤

恭喜！您已经构建了一个完整的任务管理应用程序，并学会了如何在 VS Code 的核心功能中有效地使用 AI 进行工作。

您可以通过探索其他自定义选项进一步增强 AI 的能力

为不同的任务（如规划、调试或文档编制）添加更多专业的代理。
为特定的编程语言或框架创建自定义指令。
通过 MCP（模型上下文协议）服务器或 VS Code 扩展中的额外工具来扩展 AI 的功能。