Vue Theme

界面主题插件。根据爱好是否进行安装。

Vue Theme

Volar

必装核心插件（官方推荐 + 社区主流）

Vue 3 官方推荐的 VS Code 插件（取代了旧版 Vetur）

完美支持 Vue 3 特性：<script setup>、ref/reactive、TypeScript、组合式 API
智能提示、跳转定义、重命名、错误检查
模板中 TypeScript 表达式支持（如 {{ count as number }}）

！！！重点：如果你之前装过 Vetur，请禁用或卸载它（两者冲突！）

安装后，在 Vue 3 项目根目录创建 .vscode/extensions.json 可自动推荐：
{
"recommendations": ["vue.volar"]
}

Volar

ESLint

代码规范 & 错误检查（Vue 3 项目几乎都用 ESLint）

实时标红不符合规范的代码
支持 .eslintrc.cjs / eslint.config.js（新 flat config）
提议配合项目中的 @vue/eslint-config-typescript 使用

设置保存自动修复（在 settings.json 中）：

{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
}

ESLint

Prettier – Code formatter

代码自动格式化（与 ESLint 配合使用）

Vue 3 官方脚手架（Vite + Vue）默认集成 Prettier

提议配置为 默认格式化工具：{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}

注意：需在项目中安装 prettier 和 @vue/prettier-config，并配置 .prettierrc

Prettier – Code formatter

Vue VSCode Snippets

此插件为开发者提供了快速的生成 Vue 代码片段的方法，通过各种快捷键就可以在 .vue文件中快速生成各种代码片段。

Vue VSCode Snippets

Auto Import

自动导入 API（尤其适合 Vue 3 Composition API）

写 ref、computed、onMounted 时自动添加 import

支持自定义规则（如自动导入组件、Pinia store 等）

需在项目中配置（一般通过 unplugin-auto-import），插件本身只是提供 VS Code 提示

Auto Import

Iconify IntelliSense

在模板中使用图标时提供智能提示（如 <Icon icon=”mdi:home” />）

支持 Iconify、Heroicons、Material Icons 等主流图标库

输入 icon=” 后自动弹出图标搜索

Iconify IntelliSense

Vue Peek

公司的项目一般会很大，vue文件组件会许多，此时要想找到准确的对应的vue文件就会很麻烦。需要在目录文件夹中不停地跳转。而 Vue Peek 插就可以让我们快速跳转到组件、模块定义的文件。

Vue Peek