VSCode前端插件需精准匹配高频问题：Vue Alias Skip解决@路径跳转，Auto Rename Tag在非.vue文件生效，Quokka依赖文件类型和tsconfig配置，Prettier格式化以prettier.singleQuote设置为准且须关闭eslint.formatOnSave。
前端开发里，VSCode 插件不是装得越多越好，而是得解决具体问题——比如跳不到 @/api、改个变量要手动同步两侧标签、写完 JSX 不知道括号哪层配对、console.log 还在手敲变量名。下面这几个插件，每个都对应一个高频卡点。
跳转不了 @/xxx 别名路径？装 Vue Alias Skip 并配 jsconfig.json
默认 Ctrl+单击 import { foo } from '@/utils' 是无效的，因为 VSCode 不知道 @ 指向 src。装了 Vue Alias Skip 后，它会读取项目根目录下的 jsconfig.json 或 tsconfig.json 中的 compilerOptions.baseUrl 和 paths 配置，再映射跳转。
- 必须确保
jsconfig.json存在且含如下内容（Vue CLI / Vite 项目通常已有）：{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] } } } - 如果用的是
vite.config.ts里的resolve.alias，但没同步到jsconfig.json，跳转仍失败 - 插件本身不自动创建配置文件，只依赖已有配置——很多人装了插件却没配文件，以为插件坏了
Auto Rename Tag 失效？检查是否与 Vetur 或 Volar 冲突
这个插件本该在改 <div> 时自动同步闭合标签，但 Vue 文件里常失效。根本原因是 <code>Vetur（Vue 2）和 Volar（Vue 3）自带标签重命名逻辑，会屏蔽 Auto Rename Tag 的监听。
- Vue 3 项目务必禁用
Vetur，只开Volar；否则Auto Rename Tag在.vue文件中完全不响应 - 若用
Volar，它默认已支持重命名，无需额外插件——装了反而可能冲突 - 纯 HTML 或 JSX 文件中，
Auto Rename Tag依然有效，不用关
Quokka 不显示实时值？确认文件类型和运行上下文
在 JS/TS 文件里敲 const a = 1 + 2，右边没出现 // => 3，大概率是上下文没激活。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 必须是未保存的临时文件，或已保存的
.js/.ts文件——.vue或.jsx默认不支持，需手动启用（右键 →Quokka: Start on Current File） - 若项目有
tsconfig.json，Quokka 会尝试按其规则解析，但遇到module: 'ESNext'且无lib配置时可能崩溃，此时加一行"lib": ["ES2020"]即可 - 免费版限制：每文件最多 10 行可执行代码，超出行数后右侧不渲染值，不是 bug 是限制
Prettier 格式化后引号变双引号？改 prettier.singleQuote 而非 ESLint 规则
很多人在 .eslintrc.js 里设 "quotes": ["error", "single"]，结果保存后还是双引号——因为 Prettier 的格式化优先级高于 ESLint 的修复建议。
- 真正起效的是 VSCode 设置里的
prettier.singleQuote，必须设为true（JSON 值，不是字符串） - 同时关掉
eslint.formatOnSave，否则 ESLint 会在 Prettier 之后再跑一遍，把单引号又扳回双引号 - 若用
eslint-config-prettier，它只是禁用 ESLint 的格式类规则，不干预 Prettier 自身行为
插件能省时间，但前提是理解它介入了哪一层：是语言服务（Volar）、文件系统映射（Alias Skip）、编辑器行为（Auto Rename Tag），还是独立运行时（Quokka）。配错一层，整个链路就断了。
