开始使用 GitHub Copilot 的 VS Code 版本

GitHub Copilot 改变了你在 Visual Studio Code 中编写代码的方式。在这份实践教程中，你将构建完整的任务管理网页应用，同时探索VS Code的AI能力：智能内嵌建议、与代理的自主功能开发、内联聊天的精准编辑、集成的智能作以及强大的自定义选项。

完成本教程后，你将拥有一个可用的网页应用和一个根据你的开发风格调整的个性化AI编码配置。

创建示例应用

用 VS Code 聊天一次性生成示例应用。

前提条件

VS Code安装在你的机器上。从Visual Studio Code官网下载。
访问GitHub Copilot。按照以下步骤在VS Code中设置GitHub Copilot。

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

第一步：体验内联建议

AI驱动的内联建议在你输入时弹出，帮助你更快、更少地写代码。让我们开始打好任务管理器的基础。

为你的项目创建一个新文件夹，然后用 VS Code 打开它。
创建一个名为index.html.
开始输入以下内容，随着你输入，VS Code 会提供内联建议（幽灵文本）：
```
<!DOCTYPE html>
```
你可能会看到不同的建议，因为大型语言模型是非确定性的。
点击Tab键接受该建议。

恭喜你！你刚刚接受了第一个AI驱动的内联建议。
继续构建你的HTML结构。在<身体>标签，开始输入：
```
<div class="container">
    <h1>My Task Manager</h1>
    <form id="task-form">
```
注意 VS Code 在构建应用结构时不断推荐相关 HTML 元素。
如果看到多个建议，将鼠标悬停在幽灵文本上查看导航控件，或者使用 ⌥]（Windows，Linux Alt+]）和 ⌥[（Windows，Linux Alt+[）来循环选项。

内联建议会在你敲击时自动运作，从你的模式和项目背景中学习。它们尤其适合编写模板代码、HTML结构和重复模式。

第二步：与代理一起构建完整的功能

AI代理是VS Code最强大的AI能力。在给定自然语言提示时，他们会自主规划并实现多个文件中的复杂功能。让我们用它们来创建任务管理器应用的核心功能。

通过按⌃⌘I（Windows，Linux Ctrl+Alt+I）或选择VS Code标题栏中的聊天图标打开聊天视图。

聊天视图是你通过自然语言提示与AI互动的地方。你可以持续对话，反复优化你的请求，以获得更好的结果。
在代理下拉菜单中选择“代理”，让AI独立端到端执行你的请求。
重要
如果你没看到代理选项，请确保在你的VS代码设置中启用代理（
chat.agent.enabled
- 在VS代码中打开
- 在VS Code Insiders中开放
ORG）。你的组织可能也有禁用代理——联系你的管理员来启用这个功能。
输入以下提示并按回车。客服会分析你的请求并开始实施解决方案。
```
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功能性。

提示
不同的语言模型可能有不同的优势。在聊天视图中使用模型下拉菜单切换不同语言模型。
查看生成的文件，选择保留以接受所有更改。
打开你的index.html通过右键点击文件并选择“显示预览”，即可在集成浏览器中的 VS Code 中完成文件。你可以添加任务，标记为已完成，也可以删除。
现在，我们再加一个额外功能。请在聊天输入框中输入以下提示：
```
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.
```
注意内联聊天如何专注于选定的代码并进行针对性改进。
查看更改后选择保留以应用。

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

第四步：个性化你的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的角色、具体指南以及它可以使用哪些工具。

打开命令面板，运行“聊天：新定制代理”命令。
精选.github/agents作为地点。

这个选项会把自定义代理添加到你的工作区，让其他团队成员在打开项目时也能使用。
将定制代理命名为“审查员”。这会创建一个名为Reviewer.agent.md在.github/agents文件夹。

将文件内容替换为以下内容。请注意，这个自定义代理不允许修改代码。

---
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

保存文件。在聊天视图中，你现在可以从代理选择器中选择这个定制代理。
通过在代理选择器中选择“审核员”并输入以下提示来测试您的定制代理：
```
Review my full project
```
注意AI现在作为代码审查者的行为，提供分析和改进建议。

步骤5：使用智能动作进行预建AI辅助

智能动作直接集成在VS Code界面中，实现AI功能无缝衔接您的开发流程。与聊天互动不同，智能作会在你最需要的地方出现在上下文中。让我们以提交信息生成为例。

通过按 ⌃⇧G（Windows，Linux Ctrl+Shift+G）或在活动栏中选择源控制器图标，打开源代码控制视图。
如果你还没有为你的项目初始化 Git 仓库，请在源代码控制视图中选择“初始化仓库”来作。
通过选择你想提交的文件旁边的+键来分阶段你的更改。
选择闪烁图标，根据你的分阶段更改生成提交信息。

AI会分析你的分阶段更改，生成符合传统提交标准的描述性提交信息。人工智能考虑：
- 更改的文件
- 更改的性质（新增功能、修复漏洞、重构）
- 修改的范围与影响
请查看生成的消息。如果你满意，就继续提交。如果你想要不同的风格或重点，请再次选择闪光图标以生成替代信息。

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

下一步

恭喜你！你已经构建了一个完整的任务管理应用，并学会了如何有效地利用 VS Code 的核心功能与 AI 合作。

你还可以通过探索其他自定义选项进一步提升AI的能力：

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