VS Code Copilot 深度调教:两种 Skills 配置全攻略 (含隐藏高级模式)

VS Code Copilot 深度调教:两种 Skills 配置全攻略 (含隐藏高级模式)

在使用 GitHub Copilot 编写代码时,你是否遇到过这些烦恼:

  • 每次都要重复提示:“请用 Vue3 语法”、“请使用中文回答”、“代码要符合谷歌 SEO 标准”?

  • AI 有时候“记性不好”,经常忘记你项目的特殊规范?

其实,VS Code 早就为 Copilot 准备了“大脑外挂”功能——Skills (技能)。通过简单的配置,我们可以把项目规范、代码风格甚至安全审计标准“植入”给 AI,让它瞬间变成懂你的资深专家。

本文将手把手教你 两种 配置方法:一种是官方推荐的全局指令模式,另一种是社区博主(参考 CSDN)推荐的Agent 技能模式


方式一:Agent Skills 模块化模式 (CSDN 推荐的高级玩法)

核心特点:按需触发、模块化管理、适合复杂任务适用场景:你需要定义多个不同的“分身”(如:专门写测试的、专门查 Bug 的、专门写文档的)。

这种方法稍微复杂一点,默认可能是隐藏的,我们需要先开启一个“开关”。

🛠️ 配置步骤

第一步:开启 Agent Skills 开关 (关键!)

根据 CSDN 博主的分享,VS Code 的某些版本默认关闭了此功能,需要手动开启。

  1. 在 VS Code 中按下 Ctrl + Shift + P (Mac: Cmd + Shift + P)。

  2. 输入 Open Settings (JSON) 并回车。

  3. 在配置文件中添加(或确认)以下一行代码:

"chat.useAgentSkills": true
  1. 注意:配置完后,建议重启 VS Code 以确保生效。

第二步:创建标准的目录结构

Copilot 对这个模式的目录层级要求非常严格,必须是 “三层套娃” 结构,少一层都不行!

在你的项目根目录下,依次创建:.github 文件夹 ➡️ skills 文件夹 ➡️ my-expert (你的技能名) 文件夹 ➡️ SKILL.md 文件

完整路径示例你的项目/.github/skills/code-audit/SKILL.md

第三步:编写技能文件 (SKILL.md)

我们在 code-audit 文件夹下创建 SKILL.md,内容如下(这是一个代码安全审计的例子):

---name: code-auditdescription: 代码安全审计专家,用于检查 BUG、XSS 漏洞和性能隐患。version: 1.0.0---# Role: 资深安全架构师你现在的身份是拥有 10 年经验的安全专家。当用户调用此技能时,请执行以下操作:1.  **输入检查**:审查代码中所有用户输入(URL参数、表单),确认是否防范了 SQL 注入和 XSS 攻击。2.  **逻辑漏洞**:检查空指针异常、未定义的变量引用。3.  **输出报告**:请以 Markdown 表格形式列出发现的问题,分为“高危、中等、建议”三个等级。

第四步:如何使用?

配置完成后,在 Copilot Chat 聊天框中,你可以通过输入 @workspace 来唤醒它,或者直接询问:

“@workspace /code-audit 请帮我检查一下当前登录页面的代码安全性。”


方式二:全局指令模式 (官方推荐,最稳健)

核心特点:全局自动生效、配置简单、无需触发词适用场景:统一项目代码风格、语言偏好、SEO 规范。

如果你不需要切换不同的“分身”,只是希望 Copilot 在这个项目里一直保持某种风格(比如永远写移动端优先的 CSS),这种方法最完美。

🛠️ 配置步骤

第一步:直接创建文件

在项目根目录的 .github 文件夹下,直接创建一个名为 copilot-instructions.md 的文件。

路径你的项目/.github/copilot-instructions.md

第二步:编写项目“红宝书”

把你的所有要求都写进去。这是一个前端 CMS 开发的配置模板:

# Role: 资深前端开发 (CMS 专家)在本项目中,请始终遵守以下开发规范:1.  **移动优先 (Mobile First)**:    - CSS 必须优先编写移动端样式。    - PC 端适配必须使用 `@media (min-width)`。2.  **SEO 极致优化**:    - HTML 结构必须语义化 (使用 header, main, nav, article 而不是 div)。    - 图片标签 `<img>` 必须包含 `alt` 属性和预设宽高。3.  **代码风格**:    - 使用 ES6+ 语法。    - 所有颜色和间距使用 CSS 变量 (如 `var(--theme-color)`)。4.  **交互语言**:    - 除非特殊说明,请始终使用**中文**解释代码。

第三步:验证生效

保存文件后,刷新 VS Code 窗口 (Reload Window)。此时你再让 Copilot 写一段代码,你会发现它自动加上了 SEO 标签和移动端适配,完全不需要你再费口舌!


2026-02-15_223806

⚡️ 总结:我该选哪种?

  • 如果你想要“一把梭”,让 AI 只要在这个项目里说话就遵守规矩 👉 选 方式二 (copilot-instructions.md)

  • 如果你想要“工具箱”,比如定义一个“写测试工具”、一个“查 Bug 工具”,按需调用 👉 选 方式一 (Agent Skills),记得按 CSDN 教程开启 chat.useAgentSkills 开关。

🔥 建议:对于大多数独立开发者或中小项目,方式二通常已经足够强大且稳定;而方式一更适合需要精细化分工的大型项目。

快去试试吧,把你的 Copilot 调教成最懂你的编程助手!


*参考来源:CSDN博客 - 如何在VS code中为GitHub Copilot 添加SKill*