在 VS Code 中开始使用 GitHub Copilot
GitHub Copilot 改变了您在 Visual Studio Code 中编写代码的方式。在这个实践教程中，您将构建一个完整的任务管理 Web 应用程序，同时探索 Copilot 的核心功能：智能代码补全、使用代理模式进行自主功能开发、使用内联聊天进行精确编辑、集成的智能操作以及强大的自定义选项。
完成本教程后，您将拥有一个可运行的 Web 应用程序和一个能适应您开发风格的个性化 AI 编码环境。
先决条件
-
您的计算机上已安装 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 步：使用代理模式构建完整功能
代理模式是 VS Code 最强大的 AI 功能。给定一个自然语言提示，它可以跨多个文件自主地规划和实现复杂的功能。让我们用它来创建任务管理器的核心功能。
-
按下 ⌃⌘I (Windows、Linux Ctrl+Alt+I) 或选择 VS Code 标题栏中的聊天图标来打开聊天视图。
聊天视图使您能与 AI 进行持续对话，从而更容易优化您的请求并获得更好的结果。
-
在聊天视图顶部的聊天模式下拉菜单中，选择代理 (Agent) 以切换到自主编码的代理模式。
-
输入以下提示并按 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) 以接受所有更改。
-
在浏览器中打开您的
index.html文件，查看您的任务管理器运行情况。您可以添加任务、将其标记为完成以及删除它们。提示使用 Live Preview 扩展，可以在开发过程中实时在 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.请注意内联聊天如何专门针对所选代码进行有针对性的改进。
-
检查更改并选择接受 (Accept) 来应用它们。
编辑器内联聊天非常适合进行小范围、集中的更改，而不会影响更广泛的代码库，例如添加错误处理、重构单个函数或修复错误。
第 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 支持更高级的自定义指令，例如为特定文件类型应用指令。
为代码审查创建一个自定义聊天模式
自定义聊天模式为特定任务创建专门的 AI 角色。让我们创建一个“代码审查员”模式，专注于分析代码并提供反馈。在聊天模式中，您可以定义 AI 的角色、准则以及它可以使用的工具。
-
打开命令面板并运行 Chat: New Mode File 命令。
-
选择
.github/chatmodes作为新模式文件的位置。此选项将聊天模式添加到您的工作区，使其他团队成员也能使用它。
-
将聊天模式命名为“Code Reviewer”。这将在
.github/chatmodes文件夹中创建一个名为Code Reviewer.md的新文件。 -
用以下内容替换文件内容。请注意，此聊天模式不允许更改代码。
--- description: 'Review code for quality and adherence to best practices.' tools: ['codebase', 'usages', 'vscodeAPI', 'problems', 'fetch', 'githubRepo', 'search'] --- # Code Reviewer Mode 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. ## Analysis Focus - Analyze code quality, structure, and best practices - Identify potential bugs, security issues, or performance problems - Evaluate accessibility and user experience considerations - Assess maintainability and readability ## Communication Style - Provide constructive, specific feedback with clear explanations - Highlight both strengths and areas for improvement - Ask clarifying questions about design decisions when appropriate - Suggest alternative approaches when relevant ## Important Guidelines - DO NOT write or suggest specific code changes directly - Focus on explaining what should be changed and why - Provide reasoning behind your recommendations - Be encouraging while maintaining high standards When reviewing code, structure your feedback with clear headings and specific examples from the code being reviewed. -
保存文件。在聊天视图中，您现在可以从聊天模式下拉菜单中选择此自定义模式。
-
测试您的自定义审查员模式
- 从模式下拉菜单中选择代码审查员 (Code Reviewer)。
- 输入以下提示：“Review my full project” (审查我的整个项目)
请注意 AI 现在如何像代码审查员一样行事，提供分析和建议，而不会直接编写代码。
您的个性化 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 的能力。