vue 3 项目必须用 volar,vue vscode tools 是旧版官方插件且已停止维护,对 composition api 和 支持不完整;volar 深度集成 typescript 服务,可正确推导 defineprops 和 defineemits 类型,而 vue vscode tools 会导致 ref 类型提示为空、props 属性误标红等类型服务失效问题。

Vue项目该选 Volar 还是 Vue VSCode Tools?
Vue 3 项目必须用 Volar,Vue VSCode Tools 是旧版官方插件,已停止维护,对 Composition API 和 <script setup></script> 支持不完整。Volar 不仅提供语法高亮、模板类型检查,还深度集成 TypeScript 服务,能正确推导 defineProps 和 defineEmits 类型。
常见错误现象:装了 Vue VSCode Tools 后,ref 类型提示为空、props 上属性标红但实际运行正常——这是类型服务未生效的典型表现。
- 新项目直接安装
Volar,禁用Vetur(如有)和Vue VSCode Tools - 需在
settings.json中启用"volar.autoInsertDotValue": true,避免手动补全.value - 若使用 Nuxt 3,额外安装
Nuxt DevTools,它会覆盖部分 Volar 功能,需注意冲突
ESLint 和 Prettier 能不能共存?
能,但默认配置下会打架——ESLint 的格式规则(比如 semi、quotes)和 Prettier 冲突,导致保存时反复格式化又报错。
关键不是“装两个”,而是“让 ESLint 只管逻辑,Prettier 只管样式”。做法是用 eslint-config-prettier 关闭 ESLint 所有格式类规则。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 安装依赖:
npm install -D eslint-config-prettier - 在
.eslintrc.js的extends末尾加上'prettier'(顺序不能错) - VS Code 设置里关掉
editor.formatOnSave对 ESLint 的启用,只留给 Prettier - 验证方式:删掉一个分号,ESLint 应只报
no-unexpected-multiline类逻辑错误,不再报semi
路径别名跳转失效,到底该配 jsconfig.json 还是 tsconfig.json?
取决于你项目用的是 JS 还是 TS。TypeScript 项目优先读 tsconfig.json,JavaScript 项目(哪怕用了 @types)默认只认 jsconfig.json。VS Code 的路径跳转能力依赖这个配置文件里的 compilerOptions.paths。
容易踩的坑:只改了 tsconfig.json 却在 JS 文件里 Ctrl+Click 跳不到——因为 JS 语言服务没加载那个配置。
- JS 项目:必须建
jsconfig.json,内容至少包含{"compilerOptions":{"baseUrl":".","paths":{"@/*":["src/*"]}}} - TS 项目:
tsconfig.json里已有paths,但需确认"include"包含了.vscode/或当前工作区根目录 - 插件
Path Intellisense只补全路径,不解决跳转;真正修复跳转靠配置本身 + 重启 TS 服务(Ctrl+Shift+P → “Developer: Restart TS Server”)
Live Server 和 Debugger for Chrome 有什么本质区别?
Live Server 是轻量静态服务,只起一个本地 HTTP 服务器并监听文件变化后自动刷新页面;Debugger for Chrome 是调试器,把 VS Code 和 Chrome DevTools 连起来,支持断点、变量监视、调用栈追踪。
它们解决的问题完全不同:一个管“跑起来”,一个管“为什么出错”。但很多人误以为装了 Live Server 就不用配调试器了,结果遇到异步逻辑或状态问题只能 console.log。
-
Live Server适合纯 HTML/CSS/JS 原生开发,开箱即用;Vue/React 项目建议用框架自带 dev server(如vite dev),它更准 -
Debugger for Chrome必须配launch.json,关键字段是url(指向 dev server 地址)和sourceMapPathOverrides(映射构建后的路径回源码) - 两者可共存:Live Server 启服务,Chrome 调试器连上去,但不要同时用 Live Server 的自动刷新和 Chrome 的 live reload,会冲突
Volar 和 Vue VSCode Tools 不能共存,ESLint 和 Prettier 不配好就会互相 undo,路径跳转失效往往不是插件问题而是配置没生效——这些细节比插件列表本身更重要。前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










