Vue项目必须用Volar而非Vetur，因其支持Vue 3 + script setup的类型推导与跳转；需禁用Vetur并配置tsconfig.json/jsconfig.json的paths别名；ESLint与Prettier需协同而非冲突；Quokka等工具不可替代真实运行环境。
前端开发在 VSCode 里不装对插件，等于开车不系安全带——能跑，但随时可能被一个 import 路径跳转失败、一个 eslint 报错没提示、或一个 vue 模板里变量点不进去卡住半天。
Vue 项目必须配 Volar 而不是 Vetur
Vetur 在 Vue 3 + script setup 场景下会丢类型推导、跳转失效、甚至 CPU 占用飙高；Volar 是官方推荐的替代方案，它基于 Vue 的响应式系统原生实现语言服务，ref、defineProps、defineEmits 都能精准推导类型和跳转。如果你还在用 Vetur，删掉它，再禁用所有冲突插件（比如旧版 Vue Language Features），否则 Volar 的 Go to Definition 会静默失效。
- 安装后需手动关闭 Vetur：在插件页搜
vetur→ 点击「禁用」或「卸载」 - 确保工作区根目录有
tsconfig.json或jsconfig.json，否则 Volar 不激活 TS 支持 - 如果
@/components/xxx别名跳转仍不行，不是 Volar 问题，是别名没配进compilerOptions.paths
路径跳转失效？先查 jsconfig.json 或 tsconfig.json
别名路径（如 @/api、#utils）跳转失败，90% 不是插件问题，而是配置没生效。VSCode 原生只认 compilerOptions.baseUrl 和 compilerOptions.paths，webpack.alias 或 vite.resolve.alias 对编辑器无感。
- 检查
jsconfig.json是否存在且在项目根目录，内容类似：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"#utils": ["src/utils/index.ts"]
}
},
"include": ["src/**/*"]
}
paths 的 key 必须以 / 结尾（如 "@/*"），否则 Volar / TypeScript 无法匹配Developer: Restart Language Server
ESLint + Prettier 冲突时，优先关掉 Prettier 的自动格式化
当你保存文件后代码被“乱格式化”（比如强制加分号、单引号变双引号），大概率是 Prettier 和 ESLint 规则打架了。Prettier 负责样式，ESLint 负责逻辑和质量，二者不该互相覆盖。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 在
settings.json中关掉 Prettier 的保存格式化："editor.formatOnSave": false - 启用 ESLint 的自动修复：
"editor.codeActionsOnSave": { "source.fixAll.eslint": true } - 装
esbenp.prettier-vscode和dbaeumer.vscode-eslint后，还需装eslint-config-prettier来禁用 ESLint 中与 Prettier 重叠的规则 - 不要同时开启
prettier.eslintIntegration（已废弃）或prettier.requireConfig（会导致没.prettierrc就不格式化）
别让 Quokka 或 Code Runner 替代真实运行环境
Quokka 适合快速验证算法或小段逻辑，但它不加载 node_modules 全量依赖、不走 webpack/vite 构建流程、也不模拟浏览器环境。拿它测 fetch、localStorage 或第三方 UI 组件，结果基本不可信。
-
Code Runner默认用node执行 JS 文件，但不支持import语法（除非你配了node --loader ts-node/esm） - 真要调试组件逻辑，用浏览器调试（
Debugger for Chrome或内置 Edge 调试器）+debugger语句更可靠 - Quokka 的实时值显示很爽，但一旦出现
ReferenceError: window is not defined，就该切回真实环境了
插件不是越多越好，真正卡住开发节奏的，往往是一个没配对的 paths、一个没关掉的旧插件、或一条没协同好的格式化规则。把这四件事理清楚，比装二十个“提升效率”的花哨插件管用得多。
