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