推荐几个 Vue 开发必备的 VSCode 插件。

Vue - Official（必装） #

这是 Vue 官方出品的 VSCode 插件，提供：

• .vue 文件语法高亮（模板、脚本、样式分颜色显示）
• 代码智能提示（输入时自动补全组件名、属性名）
• 类型检查（TypeScript 集成）
• <slot> 名称提示
• CSS 类名补全 安装： VSCode 扩展商店搜索 Vue - Official。

能获得什么？ #

安装后：

1. 输入 v- 会提示所有 Vue 指令（v-if、v-for、v-model...）
2. 写 <MyButton 自动提示导入路径
3. defineProps 的类型会即时检查
4. 模板中鼠标悬停变量显示类型

其他推荐插件 #

| 插件 | 作用 | | Error Lens | 把错误信息直接显示在行尾，不用鼠标悬停 | | Auto Rename Tag | 改标签名时自动同步改闭合标签 | | ESLint | 代码规范检查和自动修复 | | Prettier | 代码自动格式化 | | Path Intellisense | 文件路径自动补全 |

与 ESLint 配合 #

Vue - Official 内置了格式化能力，但如果你同时装了 Prettier，建议在 VSCode 设置中指定： .vscode/settings.json：

{
  "editor.defaultFormatter": "Vue.volar",
  "[javascript]": {
    "editor.defaultFormatter": "Vue.volar"
  }
}

这样 .vue 文件就用 Vue - Official 的格式化，避免和 Prettier 打架。