GitHub Copilot 教程

文章来源:https://vscode.it-docs.cn/docs/copilot/overview.html

GitHub Copilot 为 Visual Studio Code 增加了多代理开发功能。规划好你的方法,然后让AI代理在项目中实现并验证代码变更。并行运行多个代理会话:本地、后台或云端。从一个中心视角管理所有角色。内联建议、内联聊天和智能行为会帮助你完成整个编码流程。

代理与代理会话

代理端到端地处理完整的编码任务。给代理一个高级任务,它会将工作拆分成步骤,编辑文件,运行终端命令,调用工具,并在遇到错误或测试失败时自我纠正。每个任务都运行在一个代理会话中,这是一个持续存在的对话,你可以跟踪、暂停、继续或交接给另一个代理。

重要

你们组织可能在VS Code中禁用了代理。请联系你的管理员以启用此功能。

从中央视图管理会话

并行运行多个代理会话,每个会话专注于不同的任务。聊天面板中的会话视图为你提供了一个统一的地方来监控所有活跃会话,无论是本地运行、后台还是云端运行。查看每次会话的状态,切换,查看文件变更,然后从中断处继续。

了解更多关于管理Agents课程的信息。

随时执行代理

代理可以在本地的VS Code中运行进行交互式工作,在机器后台运行以实现自主任务,或者在云端通过拉取请求实现团队协作。你也可以使用像Anthropic和OpenAI这样的第三方代理。任何时候,将任务从一个坐席类型交给另一个,完整的对话记录都会继续。

聊天视图中会话类型选择器的截图,包含本地、后台、云端和第三方代理选项。

了解更多关于代理类型和委托的信息,或遵循代理教程

构建前先做好规划

在编写任何代码之前,使用内置的Plan代理将任务拆分成结构化的实施计划。计划代理会分析你的代码库,提出澄清问题,并制定逐步计划。当计划看起来合适时,交给实现代理执行,无论是本地、后台还是云端。

了解更多关于与Agent一起规划的信息。

你能做什么

  • 端到端构建一个功能。用自然语言描述一个特征,代理搭建项目架构,跨多个文件实现逻辑,并运行测试以验证结果。
  • 调试并修复失败的测试。把一个失败的测试指向一个代理,它会读取错误,追踪代码库的根本原因,应用修复,然后重新运行测试以确认。了解更多关于用AI调试的信息。
  • 构或迁移代码库。比如让代理规划从一个框架迁移到另一个框架,它会在文件间协调地应用变更,同时验证构建。
  • 通过拉取请求进行协作。将任务委托给云代理,由其创建分支,实施变更,并向团队提交拉取请求。了解更多关于云代理的信息

入门

步骤1:设置Copilot

  1. 将鼠标悬停在状态栏中的Copilot图标上,选择“设置Copilot”。
  2. 选择一种登录方式并按照提示作。如果您还没有Copilot订阅,您已注册Copilot免费套餐

步骤2:开始你的第一次Agent会话

  1. 打开聊天视图(Ctrl+Alt+I)。
  2. 检查生成的代码。代理创建文件、安装依赖,并根据需要执行命令。
  3. 进来/init为你的项目配置 AI 配置。这会创建自定义指令,帮助代理理解你的代码库并生成更好的代码。

输入一个提示,描述你想构建的内容,例如:Prompt (Agent) Open in VS Code

Create a basic Node.js web app for sharing recipes. Make it look modern and responsive.

关于涵盖内联建议、代理、内联聊天和自定义的完整实践教程,请参见“在VS Code中开始使用GitHub Copilot”。

更多用AI编程的方法

内联建议

Copilot 在你输入时提供代码建议,从单行补全到完整函数实现。下一步编辑建议可以根据你当前的编辑情况预测下一个逻辑上的更改。

了解更多关于VS Code中的内联建议

在线聊天

按Ctrl+I可直接在编辑器中打开聊天提示。描述一个变动,Copilot会建议原地编辑,这样你就能保持编码流程。用于针对性的重构、解释或快速修复,无需切换上下文。

了解更多关于VS Code中的内联聊天

智能行动

VS Code 包含预定义的 AI 驱动作,用于常见任务:生成提交信息、重命名符号、修复错误以及在项目中运行语义搜索。

VS Code 中智能行为菜单的截图,显示修复测试失败的选项。

了解更多关于VS Code中的智能动作

根据你的工作流程定制AI。

当代理了解你项目的惯例、拥有合适的工具并使用适合该任务的模型时,他们能发挥最佳作用。VS Code 提供了多种方法来定制 AI,使其从一开始就生成适合你代码库的代码,而不是事后手动修改。

  • 自定义说明:定义项目范围的编码规范,让AI生成符合你风格的代码。
  • 代理技能:教授跨 VS Code、GitHub Copilot CLI 和 GitHub Copilot 编码代理的专业能力。
  • 自定义代理:创建承担特定角色的代理,如代码审查员或文档编写者,配备自己的工具和指令。
  • MCP 服务器:通过 MCP 服务器或 Marketplace 扩展工具扩展代理。
  • 钩子:在特定事件执行自定义命令,实现自动化和策略执行。

支持

GitHub Copilot 聊天由 GitHub 提供支持,联系方式为 https://support.github.com

想了解更多关于Copilot的安全性、隐私、合规性和透明度的信息,请参阅GitHub Copilot信任中心常见问题解答。

定价

你可以免费开始使用 GitHub Copilot,但每月对内嵌建议和聊天互动有限制。如果需要更长时间的使用,可以选择多种付费套餐。

查看详细的GitHub Copilot定价

下一步

Read more

前端防范 XSS(跨站脚本攻击)

目录 一、防范措施 1.layui util  核心转义的特殊字符 示例 2.js-xss.js库 安装 1. Node.js 环境(npm/yarn) 2. 浏览器环境 核心 API 基础使用 1. 基础过滤(默认规则) 2. 自定义过滤规则 (1)允许特定标签 (2)允许特定属性 (3)自定义标签处理 (4)自定义属性处理 (5)转义特定字符 常见场景示例 1. 过滤用户输入的评论内容 2. 允许特定富文本标签(如富文本编辑器内容) 注意事项 更多配置 XSS(跨站脚本攻击)是一种常见的网络攻击手段,它允许攻击者将恶意脚本注入到其他用户的浏览器中。

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

目录 1. 打开浏览器开发者工具 2. 使用 Network 面板 3. 查看具体的API请求 a. Headers b. Payload c. Response d. Preview e. Timing 4. 实际操作步骤 5. 常见问题及解决方法 a. 无法看到API请求 b. 请求失败 c. 跨域问题(CORS) 作为一名后端工程师,理解前端如何调用接口、传递参数以及接收返回值是非常重要的。下面将详细介绍如何通过浏览器开发者工具(F12)查看和分析这些信息,并附带图片案例帮助你更好地理解。 1. 打开浏览器开发者工具 按下 F12 或右键点击页面选择“检查”可以打开浏览器的开发者工具。常用的浏览器如Chrome、Firefox等都内置了开发者工具。下面是我选择我的一篇文章,打开开发者工具进行演示。 2. 使用

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例)

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例) 前端开发中最令人头疼的莫过于那些难以定位的UI问题——元素错位、样式冲突、响应式失效...传统调试方式往往需要反复修改代码、刷新页面、检查元素。现在,通过Cursor编辑器集成的Codex功能,你可以直接用截图交互快速定位和修复这些问题。本文将带你从零开始,掌握这套革命性的调试工作流。 1. 环境准备与基础配置 在开始之前,确保你已经具备以下环境: * Cursor编辑器最新版(v2.5+) * Node.js 18.x及以上版本 * React 18项目(本文以Chakra UI 2.x为例) 首先在Cursor中安装Codex插件: 1. 点击左侧扩展图标 2. 搜索"Codex"并安装 3. 登录你的OpenAI账户(需要ChatGPT Plus订阅) 关键配置项: // 在项目根目录创建.