VS Code 配置 AI Agent Skills 指南

综述由AI生成介绍如何在 VS Code 中配置 AI Agent Skills，为 GitHub Copilot 等助手定制可复用的专业能力包。主要步骤包括：在项目根目录或用户配置文件夹下创建特定目录（如 .github/skills/ 或 ~/.copilot/skills/）。核心是编写 SKILL.md 文件定义元数据和指令，可选包含参考文档、示例脚本和模板。文章提供了 Vue 项目代码审查技能的具体案例，展示了如何定义工具链、审查重点及常用命令。技能激活后，AI 会根据对话内容自动加载匹配的技能包，无需手动开启，可通过询问具体规范问题来验证生效情况。

DataScient发布于 2026/4/5更新于 2026/5/2027 浏览

在 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'），而不是一个泛泛的通用答案。

在这里插入图片描述

VS Code 配置 AI Agent Skills 指南

DataScient发布于 2026/4/5更新于 2026/5/2027 浏览

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

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

VS Code 配置 AI Agent Skills 指南