VSCode 插件推荐

VUP 项目推荐使用以下 VSCode 插件以获得最佳开发体验。

必需插件

Vue 开发

• Vue.volar - Vue 3 官方语言服务器，提供语法高亮、智能提示、类型检查
• Vue.vscode-typescript-vue-plugin - Vue 文件的 TypeScript 支持

代码质量

• esbenp.prettier-vscode - 代码格式化工具
• dbaeumer.vscode-eslint - JavaScript/TypeScript 代码质量检查

TypeScript 支持

• ms-vscode.vscode-typescript-next - TypeScript 语言支持

样式开发

• bradlc.vscode-tailwindcss - Tailwind CSS 智能提示和自动补全

开发效率

• formulahendry.auto-rename-tag - 自动重命名配对的 HTML/XML 标签
• christian-kohler.path-intellisense - 文件路径智能提示和自动补全

插件配置

在项目根目录创建 .vscode/extensions.json 文件：

{
  "recommendations": [
    "Vue.volar",
    "Vue.vscode-typescript-vue-plugin",
    "bradlc.vscode-tailwindcss",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "ms-vscode.vscode-typescript-next",
    "formulahendry.auto-rename-tag",
    "christian-kohler.path-intellisense"
  ]
}

工作区设置

在项目根目录创建 .vscode/settings.json 文件：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "typescript.preferences.importModuleSpecifier": "relative",
  "vue.codeActions.enabled": true,
  "vue.complete.casing.tags": "kebab"
}

安装方式

自动安装

当打开 VUP 项目时，VSCode 会自动提示安装推荐的插件。

手动安装

1. 打开 VSCode
2. 按 Ctrl+Shift+X (Windows/Linux) 或 Cmd+Shift+X (Mac) 打开扩展面板
3. 搜索插件名称并安装

命令行安装

# 安装所有推荐插件
code --install-extension Vue.volar
code --install-extension Vue.vscode-typescript-vue-plugin
code --install-extension bradlc.vscode-tailwindcss
code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension ms-vscode.vscode-typescript-next
code --install-extension formulahendry.auto-rename-tag
code --install-extension christian-kohler.path-intellisense

插件功能说明

Vue.volar

• 提供 Vue 3 的语法高亮
• 智能代码补全
• 类型检查和错误提示
• 组件属性提示
• 模板语法支持

Vue.vscode-typescript-vue-plugin

• 在 Vue 文件中提供 TypeScript 支持
• 类型推导和检查
• 与 Volar 协同工作

bradlc.vscode-tailwindcss

• Tailwind CSS 类名智能提示
• 悬停显示 CSS 属性
• 自动补全和语法检查
• 颜色预览

esbenp.prettier-vscode

• 自动格式化代码
• 支持多种文件类型
• 可配置格式化规则
• 保存时自动格式化

dbaeumer.vscode-eslint

• 实时代码质量检查
• 自动修复可修复的问题
• 自定义规则配置
• 错误和警告提示

ms-vscode.vscode-typescript-next

• TypeScript 语言服务
• 类型检查和推导
• 智能代码补全
• 重构支持

formulahendry.auto-rename-tag

• 自动重命名配对的 HTML 标签
• 支持 Vue 模板
• 实时同步更新

christian-kohler.path-intellisense

• 文件路径智能提示
• 自动补全路径
• 支持相对路径和绝对路径
• 文件存在性检查

最佳实践

1. 启用自动格式化 - 在保存时自动格式化代码
2. 配置 ESLint - 启用自动修复功能
3. 使用 TypeScript - 充分利用类型检查
4. 配置 Tailwind - 启用智能提示和预览
5. 团队协作 - 确保团队成员使用相同的插件配置

故障排除

插件冲突

如果遇到插件冲突，可以：

1. 禁用冲突的插件
2. 调整插件加载顺序
3. 查看插件文档了解兼容性

性能问题

如果 VSCode 运行缓慢：

1. 禁用不必要的插件
2. 调整 TypeScript 服务设置
3. 清理工作区缓存

配置问题

如果插件不工作：

1. 检查配置文件语法
2. 重启 VSCode
3. 重新安装插件