【Trae教程#4】插件与技能详解

什么是插件

在说 Skill 之前，先聊一个和 Trae（基于 VS Code）日常开发强相关的概念——VS Code 插件。

插件是用于增强 IDE 本身功能的工具，安装之后影响的是编辑器本身的能力，比如代码检查、格式化、实时预览等。

类比：插件就是给 IDE 装的”工具箱”，Skill 是给 AI 装的”专家技能卡”。

前端开发必装插件清单

以下每款都是前端开发中使用频率极高的插件，安装后在 VS Code/Trae 扩展面板搜索名称即可：

插件名称	一句话介绍
Auto Rename Tag	修改 HTML/XML 开始标签时，自动同步修改配对的结束标签
ESLint	JavaScript / JSX 代码静态检查，实时发现语法错误和代码规范问题
HTML CSS Support	在 HTML 文件中为 class 属性提供 CSS 类名智能补全
HTMLHint	HTML 语法检查，帮助发现标签遗漏、属性错误等不规范写法
indent-rainbow	用彩虹色显示代码缩进层级，结构层次一目了然
Live Server	启动本地开发服务器，文件保存后浏览器自动刷新预览
Prettier – Code formatter	统一代码格式（支持 JS/TS/HTML/CSS 等），保存即格式化
vscode-icons	为不同文件类型显示对应图标，大幅提升文件浏览效率

Tip：Trae 基于 VS Code，以上插件直接在 Trae 的扩展商店搜索安装即可，功能与 VS Code 完全一致。

如下两张图所示，先点击左边工具栏的扩展按钮。

然后在弹出扩展商店的搜索框中输入要安装的插件名称，找到后，直接点击安装即可。

简单类比：

玩王者荣耀，英雄有基础技能，但还能带召唤师技能（闪现、治疗、惩戒等）。

Trae 的 AI 助手就是”英雄”，Skill 就是可以额外安装的”召唤师技能”。

Skill 本质上是一个提示词模板 + 使用流程的打包文件，装上之后，AI 就多了一种”专项能力”。

比如你装了一个”小红书文案专家” Skill：

你对 AI 说：”帮我写一篇关于咖啡的笔记”

AI 不会按普通编程助手的方式回复

而是调用了”小红书专家”的提示词，自动切换到：

同样的 AI 模型，装不装 Skill，效果完全不一样。

因在这儿抓图看不太清楚，请大家参考官方说明：

https://forum.trae.cn/t/topic/157

Q: Skill 和插件有什么区别？

Q: Skill 装多了会影响速度吗？

不会，Skill 本质上是提示词模板，不影响 AI 推理速度。

Q: 从哪里找 Skill？

推荐从 GitHub 社区和 agency-agents-zh 这样的开源角色库中获取，格式为 .skill 文件，下载后导入 Trae 即可使用。

预告：《Trae的模型切换与挂接自定义模型》