使用说明

插件管理

Trae 兼容绝大多数 VS Code 插件，拥有丰富的生态系统。

安装插件

点击左侧活动栏的 🧩 图标打开插件面板
在搜索框输入插件名称
点击 "Install" 按钮安装
部分插件需要重启 Trae 才能生效

命令行安装插件

# 通过命令面板安装
# Cmd/Ctrl + Shift + P → "Extensions: Install Extensions"

# 通过 CLI 安装（如果支持）
trae --install-extension esbenp.prettier-vscode

推荐插件列表

通用开发

插件名	用途	推荐指数
Prettier	代码格式化，支持多种语言	⭐⭐⭐⭐⭐
ESLint	JavaScript/TypeScript 代码检查	⭐⭐⭐⭐⭐
GitLens	增强 Git 功能，查看代码历史	⭐⭐⭐⭐⭐
Error Lens	内联显示错误和警告信息	⭐⭐⭐⭐
Path Intellisense	文件路径自动补全	⭐⭐⭐⭐
Auto Rename Tag	自动同步重命名 HTML 标签	⭐⭐⭐⭐

前端开发

插件名	用途	推荐指数
ES7+ React Snippets	React 代码片段快捷输入	⭐⭐⭐⭐⭐
Tailwind CSS IntelliSense	Tailwind 类名补全和预览	⭐⭐⭐⭐⭐
Vue - Official	Vue 3 官方支持	⭐⭐⭐⭐⭐
CSS Peek	在 HTML 中查看 CSS 定义	⭐⭐⭐⭐

后端开发

插件名	用途	推荐指数
Python	Python 语言支持（微软官方）	⭐⭐⭐⭐⭐
Go	Go 语言支持（官方）	⭐⭐⭐⭐⭐
REST Client	在编辑器中发送 HTTP 请求	⭐⭐⭐⭐⭐
Docker	Docker 文件支持和容器管理	⭐⭐⭐⭐
Thunder Client	轻量级 API 测试工具	⭐⭐⭐⭐

插件配置

.vscode/settings.json — 项目级插件配置

{
  // Prettier 配置
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.semi": false,
  "prettier.singleQuote": true,

  // ESLint 配置
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  // 文件关联
  "files.associations": {
    "*.env.*": "dotenv"
  }
}

💡

将 .vscode/settings.json 提交到 Git，团队成员打开项目时会自动应用相同的插件配置。