前言
换设备或重装系统最头疼的就是恢复开发环境。本文以 Vue 3 开发为主线，整理本地已安装的插件 + 补充推荐，按开发流程分类，附带一键安装命令。
一、VS Code 扩展
1. 本地已装（15 个）
以下为
code --list-extensions扫描结果，按 Vue 开发相关度排列。
| 分类 | 插件 | ID | 在 Vue 开发中的作用 |
|---|---|---|---|
| Vue 核心 | Volar | vue.volar |
Vue 3 官方语言支持：.vue 语法高亮、类型检查、模板 IntelliSense |
| Vue 核心 | Vue Peek | dariofuzinato.vue-peek |
Ctrl+Click 快速跳转到组件 .vue 文件 |
| Vue 核心 | Vue Snippets | sdras.vue-vscode-snippets |
代码片段：vbase 一键生成 SFC 模板 |
| 模板 | Auto Rename Tag | formulahendry.auto-rename-tag |
<template> 中修改标签名自动同步闭合标签 |
| 代码质量 | ESLint | dbaeumer.vscode-eslint |
.vue 文件 ESLint 校验，配合 eslint-plugin-vue |
| 代码质量 | Prettier | esbenp.prettier-vscode |
保存自动格式化，统一 <template> / <script> / <style> 缩进 |
| 样式 | Color Highlight | naumovs.color-highlight |
<style scoped> 中写颜色代码时显示色块预览 |
| 样式 | Image Preview | kisstkondoros.vscode-gutter-preview |
装订线显示 <img> 引用图片的小缩略图 |
| 效率 | Path Intellisense | christian-kohler.path-intellisense |
import 组件路径自动补全 |
| 效率 | Live Server | ritwickdey.liveserver |
预览构建后的 dist/，或快速查看静态页面 |
| 效率 | Any Rule | russell.any-rule |
表单校验正则大全，常用手机号/邮箱/身份证直接搜 |
| AI | 通义灵码 | alibaba-cloud.tongyi-lingma |
写 Vue 组件时 AI 补全、生成注释、解释代码 |
| AI | CodeBuddy | tencent-cloud.coding-copilot |
腾讯 AI Agent，重构/生成 Vue 页面 |
| AI | MarsCode | marscode.marscode-extension |
字节豆包，补全 Vue template / script |
| 界面 | 中文语言包 | ms-ceintl.vscode-language-pack-zh-hans |
VS Code 界面汉化 |
2. 推荐补充（未安装但值得）
按 Vue 项目常见技术栈场景推荐。
| 场景 | 推荐插件 | ID | 说明 |
|---|---|---|---|
| Pinia 状态管理 | Pinia Snippets | mrkn.pinia-snippets |
_pinia 快速生成 store 模板 |
| Vue Router | Vue Router Snippets | antfu.vite |
路由配置代码片段 |
| Tailwind CSS | Tailwind CSS IntelliSense | bradlc.vscode-tailwindcss |
类名自动补全 + 色值预览 + 悬停看 CSS |
| UnoCSS | UnoCSS | antfu.unocss |
原子化 CSS 补全，Vite + Vue 项目常用 |
| CSS 变量 | CSS Variable Autocomplete | vunguyentuan.vscode-css-variables |
var(--xxx) 自动补全项目中定义的 CSS 变量 |
| i18n 国际化 | i18n Ally | lokalise.i18n-ally |
$t() 内联显示翻译内容，管理多语言 key |
| Nuxt 项目 | Nuxtr | nuxtr.nuxtr-vscode |
Nuxt 专用：页面/组件一键创建、API 补全 |
| Vitest 测试 | Vitest | vitest.explorer |
侧边栏运行/调试 Vitest 单测 |
| Vue 官方扩展包 | Vue - Official | vue.volar |
即 Volar，Vue 团队直接维护，确保已启用并禁用旧 Vetur |
| Git 可视化 | GitLens | eamodio.gitlens |
行级 git blame，排查 Vue 组件是谁改的 |
| 图标 | Material Icon Theme | pkief.material-icon-theme |
.vue 文件显示 Vue 图标，router/、store/、composables/ 有专属图标 |
3. 一键安装命令
1 | # ===== 本地已装（必装） ===== |
二、Vue 开发必备浏览器插件
1. Vue.js devtools ⭐
最重要的一行——没有它你等于蒙着眼开发。
| 功能 | 说明 |
|---|---|
| 组件树 | 查看整个 Vue 应用的组件嵌套结构 |
| 组件数据 | 实时查看/修改 data、props、computed 的值 |
| Pinia 状态 | 查看所有 store 的 state / getters，支持时间旅行 |
| Vue Router | 查看路由表、当前路由 params/query |
| 事件追踪 | 记录组件 $emit 事件，排查父子通信 |
| 性能 | 组件渲染耗时火焰图，定位性能瓶颈 |
| Timeline | 按时间线回溯组件树状态变化 |
安装：Chrome 应用商店搜索 “Vue.js devtools” 或 Vue DevTools 官网
2. Vue 开发辅助插件
| 插件 | 作用 | 在 Vue 开发中的使用场景 |
|---|---|---|
| FeHelper（前端助手） | JSON 格式化、编码解码、时间戳、二维码等 20+ 工具 | 调试 API 返回的 JSON、生成测试数据 |
| Wappalyzer | 识别网站技术栈（框架版本/CDN） | 确认线上部署的 Vue 版本、分析竞品技术栈 |
| Lighthouse | 页面性能/SEO/可访问性审计 | Vue 项目上线前的性能打分 |
| EditThisCookie | 快速查看/修改/导入导出 Cookie | 调试 Vue 应用的登录态、Token 存储 |
| Tampermonkey（油猴） | 自定义脚本注入 | 给线上 Vue 页面注入调试脚本、绕过前端校验 |
3. 常用通用插件
以下不是 Vue 专属，但日常使用频率极高。
| 插件 | 用途 | 推荐理由 |
|---|---|---|
| 沉浸式翻译 | 网页/PDF/视频双语对照翻译 | 支持 DeepL / Google / OpenAI 多引擎，读英文文档/Puppeteer 等仓库必备 |
| uBlock Origin | 广告拦截 | 轻量省内存，百度/SOE 搜资料时不被广告干扰 |
| Bitwarden | 开源密码管理器 | 跨平台自动填充，各种 API 平台/Tool 站账号不用记 |
| OneTab | 标签页管理 | 一键收起所有标签为列表，开发时开了几十个 Tab 瞬间释放内存 |
| 沙拉查词 | 划词翻译 | 聚合剑桥/柯林斯/谷歌翻译，查技术名词精准 |
| Octotree | GitHub 侧边栏目录树 | 浏览开源 Vue 组件库源码时效率翻倍 |
三、按项目阶段推荐组合
| 阶段 | VS Code 插件 | 浏览器插件 | 说明 |
|---|---|---|---|
| 项目初始化 | Volar + ESLint + Prettier | Vue DevTools | 搭好语法 + 规范 + 调试基础 |
| 组件开发期 | + Vue Snippets + Vue Peek + Auto Rename Tag + Path Intellisense | + Wappalyzer | 提组件开发效率 |
| 样式联调 | + Color Highlight + Image Preview + Tailwind/UnoCSS | — | 视觉还原 |
| API 联调 | — | + FeHelper + EditThisCookie | 接口调试 |
| 性能优化 | — | + Lighthouse + Vue DevTools 性能面板 | 上线前审计 |
| 国际化 | + i18n Ally | — | 多语言项目 |
| 测试 | + Vitest | — | 单测驱动 |
总结
- Vue 核心三件套：Volar（语法） + ESLint/Prettier（规范） + Vue DevTools（调试），缺一不可
- 提效组合：Vue Peek（跳转） + Vue Snippets（模板） + Auto Rename Tag（标签）
- AI 辅助：通义灵码 / CodeBuddy / MarsCode，哪个顺手用哪个
- 一键恢复：复制粘贴安装命令即可，推荐补充按需取消注释
内容由 AI 生成，仅供参考。本文发布于 码上学习，转载请注明出处。