VSCode配置 AI agent skills 详细步骤
在VS Code中配置“Agent Skills”，是为你的AI编程助手（如GitHub Copilot）定制可复用的专业能力包。你可以把它理解为教你助手如何执行特定任务的标准说明书
它主要由一个 SKILL.md 文件以及相关的脚本、示例组成。当你的需求与某个技能描述匹配时，Copilot会自动加载这个“技能包”来更精准地帮你完成任务，比如创建测试、调试工作流等
启用功能
技能创建位置
在项目根目录或个人配置文件夹中，创建一个特定的文件夹来存放你的技能包
- 项目技能：在项目根目录创建 .github/skills/ 目录。就会作用于项目
- 个人技能：在你电脑用户目录下创建 ~/.copilot/skills/（推荐）或 ~/.claude/skills/。作用于你电脑里所有的项目
技能编写规范
my-skill/ (技能文件夹) ├── SKILL.md # 必需：核心入口文件，包含元数据和主要指令 ‼️‼️‼️ ├── references/ 或 resources/ # 可选：参考文档（如API说明、详细政策） │ ├── advanced-guide.md │ └── api-reference.md ├── examples/ # 可选：使用示例 │ └── common-use-cases.md ├── scripts/ # 可选：可执行脚本（Python、Bash、node等） │ └── process_data.py └── templates/ 或 assets/ # 可选：输出模板、品牌资源等 └── report-template.md 哪怕你这个技能包里啥也不放，SKILL.md必须有‼️
创建技能案例
比如用来检查vue项目代码规范的项目技能
存放目录：.github/skills/code-review/
SKILL.md:
--- name: code-review description: | Guides the review and enforcement of code style and quality standards in Vue 3 projects using ESLint, Prettier, and Vue-specific rules. Use when asked about code style, linting errors, or how to write compliant Vue code. --- # Vue 3 项目代码规范审查指南 ## 🎯 何时使用此技能 当用户的问题涉及以下方面时，应激活此技能： - 检查代码风格或规范问题 - 解释或修复ESLint/Prettier报错 - 询问Vue组件的最佳实践写法（如组件命名、Props定义、脚本顺序） - 需要自动生成符合项目规范的代码片段 ## 🔧 核心工具与配置 本项目使用以下工具链强制执行代码规范。在提供建议前，请先确认项目根目录是否存在对应配置文件。 | 工具 | 配置文件 | 主要职责 | | :--- | :--- | :--- | | **ESLint** | `.eslintrc.js` | JavaScript/TypeScript代码质量检查，识别潜在错误 | | **Prettier** | `.prettierrc` | 代码风格格式化，保持样式统一 | | **eslint-plugin-vue** | (继承自ESLint配置) | 专用于Vue 3的官方规则集 | ## 📝 重点审查内容 在审查或生成Vue代码时，请优先检查以下方面。 ### 1. 组件命名与结构 - **单文件组件命名**：使用**PascalCase**，例如 `UserProfile.vue`。 - **组件引用命名**：在模板和脚本中引用时保持PascalCase，例如 `<UserProfile />`。 - **脚本结构顺序**：建议遵循 `<script setup>`、`import`、`Props/Emits`定义、响应式数据、计算属性、生命周期钩子、方法的逻辑顺序。 ### 2. 语法与风格 - **优先使用 `<script setup>`** 语法以提高简洁性。 - **Props定义**：使用 `defineProps` 并尽可能提供详细类型定义。 - **响应式数据**：优先使用 `ref` 处理基本类型，使用 `reactive` 处理对象；在模板中正确使用 `.value`。 - **代码格式化**：确保代码遵循Prettier规则（通常是尾随逗号、单引号、2空格缩进）。 ### 3. Vue特定规则检查 确保代码遵守 `eslint-plugin-vue` 的核心规则： - **`vue/component-name-in-template-casing`**: 模板中组件名必须为PascalCase。 - **`vue/attribute-hyphenation`**: 模板中的属性名必须使用kebab-case（例如 `:user-name`）。 - **`vue/html-self-closing`**: 没有内容的标签应自闭合。 - **`vue/mustache-interpolation-spacing`**: 插值表达式 `{{ }}` 内应有空格。 ## 🛠️ 常用命令与修复建议 当用户遇到规范问题时，提供可执行的解决方案。 ### 运行检查与修复 ```bash # 检查整个项目并输出错误报告 npm run lint # 检查并自动修复可修复的问题 npm run lint:fix # 检查特定文件 npx eslint ./src/components/UserProfile.vue --ext .vue # 使用Prettier格式化所有文件 npm run format 
使用技能
有了技能包后，它的使用是智能且自动化的。你无需手动“打开”技能，而是通过与AI助手（如Copilot Chat）进行自然对话来触发的。整个过程就像一位熟悉你项目规范的新队友在帮你。
从触发到生效的完整过程：
说白了就是在VS Code中打开Copilot Chat面板直接对话：
怎么验证技能是否生效？
一个简单的验证方法是，问一个非常具体、且答案明确写在 SKILL.md 中的问题。
比如 ：“我们项目对于Vue单文件组件的文件名，要求使用什么命名法？”
如果技能被正确加载，AI的回答会直接引用 SKILL.md 中的原文（如“使用PascalCase，例如 UserProfile.vue”），而不是一个泛泛的通用答案。
