Vue 3 开发必备：VS Code 插件完全指南

本文推荐一套完整的 Vue 3 开发插件集，涵盖语言支持、代码规范、样式开发、测试调试等各个环节。

核心语言支持

• Vue - Official（原 Volar）
  Vue 3 官方插件，替代 Vetur，提供 TypeScript 支持、智能提示、代码跳转

代码规范与格式化

• ESLint / OXC（根据项目实际使用的工具二选一）
  ESLint 是 JavaScript/TypeScript 代码规范检查工具；OXC 是 Rust 编写的高性能替代方案，速度更快
• Prettier
  代码格式化工具，与 ESLint 配合实现代码风格统一
• Error Lens
  将错误和警告直接显示在代码行内，无需悬停

样式开发

• Tailwind CSS IntelliSense
  Tailwind CSS 官方插件，提供智能提示、自动补全、类名排序

测试工具

• Vitest
  Vue 团队开发的测试框架，专为 Vite 设计，极速执行

项目管理

• Todo Tree
  侧边栏展示项目中的 TODO、FIXME 标记
• Git History
  查看文件 Git 提交历史，图形化展示分支
• EditorConfig
  统一团队编辑器配置（缩进、换行符等）
• JSON Formatter
  JSON 文件格式化，支持压缩和美化

推荐配置

在项目根目录创建 .vscode/extensions.json 文件，可以将推荐的插件列表提交到代码仓库。当团队成员打开项目时，VS Code 会自动提示安装这些插件，确保团队使用一致的开发工具。

{
  "recommendations": [
    "Vue.volar",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "usernamehw.errorlens",
    "bradlc.vscode-tailwindcss",
    "ZixuanChen.vitest-explorer",
    "Gruntfuggly.todo-tree",
    "donjayamanne.githistory",
    "EditorConfig.EditorConfig"
  ]
}

总结

以上插件覆盖 Vue 3 开发的完整工作流。建议根据团队实际情况选择使用，不必全部安装。