VS Code 配置 AI Agent Skills 实战指南
在 VS Code 中配置'Agent Skills'，本质上是为你的 AI 编程助手（如 GitHub Copilot）定制一套可复用的专业能力包。你可以把它理解为一份标准说明书，专门教助手如何执行特定任务。
当你的需求与某个技能描述匹配时，Copilot 会自动加载这个'技能包'，从而更精准地帮你完成任务，比如生成测试用例、调试工作流等。它主要由一个 SKILL.md 文件以及相关的脚本、示例组成。
启用功能
首先确保在设置中启用了相关功能。通常可以在扩展设置或全局配置中找到开关。
技能存放位置
建议在项目根目录或个人配置文件夹中创建特定文件夹来存放技能包。
- 项目级技能：在项目根目录下创建
.github/skills/目录。这会让技能仅作用于当前项目。 - 个人级技能：在用户目录下创建
~/.copilot/skills/（推荐）或~/.claude/skills/。这类技能会对你电脑里所有的项目生效。
技能编写规范
一个标准的技能文件夹结构如下，核心是必须包含 SKILL.md：
my-skill/
├── SKILL.md # 必需：核心入口文件，包含元数据和主要指令
├── references/ # 可选：参考文档（如 API 说明、详细政策）
│ ├── advanced-guide.md
│ └── api-reference.md
├── examples/ # 可选：使用示例
│ └── common-use-cases.md
├── scripts/ # 可选：可执行脚本（Python、Bash、Node 等）
│ └── process_data.py
└── templates/ # 可选：输出模板、品牌资源等
└── 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'），而不是一个泛泛的通用答案。
