prettier 和 eslint 必须协同配置，不能单独使用：prettier 负责统一代码风格（“好不好看”），eslint 负责代码质量检查（“对不对”），二者在分号、引号等格式规则上冲突，需通过 eslint-config-prettier 关闭 eslint 中所有格式类规则，并在 settings.json 中指定 prettier 为默认格式化器，否则保存时将反复修正、导致卡顿或崩溃。
Prettier 和 ESLint 必须一起装，单装任何一个都会出问题。 单独用 Prettier 只格式化、不报错；单用 ESLint 会和 Prettier 规则打架，比如分号、引号、空格位置冲突，保存时反复来回改，编辑器卡顿甚至崩溃。
为什么 ESLint 和 Prettier 不能分开配
两者定位不同：ESLint 是代码质量检查器，负责“对不对”；Prettier 是代码打印机，只管“好不好看”。但它们都动同一段代码的格式——比如 semi（是否加分号）、quotes（单引号还是双引号）。
- 不关冲突规则：ESLint 默认启用
semi和quotes，Prettier 也按自己规则强制重写，结果就是保存一次 → ESLint 报错 → 自动 fix → Prettier 又改回来 → 再报错 - 必须用
eslint-config-prettier关掉 ESLint 里所有和格式相关的规则，只留逻辑类规则（如no-unused-vars、react-hooks/exhaustive-deps） -
settings.json中要明确指定"editor.defaultFormatter": "esbenp.prettier-vscode"，否则 ESLint 的 auto-fix 会抢格式化权
Volar 替代 Vetur 的真实代价
Vue3 项目里装 Vetur 会出现类型推导错误、ref 解构后丢失响应性、defineProps 类型不识别等问题。这不是配置能绕过的，是架构级不兼容。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
Volar是 Vue 官方维护的 Language Server，深度集成 Composition API 和defineComponent类型系统 - 必须关闭
Vetur，否则两个插件同时激活会导致模板语法高亮错乱、跳转失效、Ctrl+Click失灵 - 若项目含 Vue2 组件，需在
settings.json中加"volar.ignoreProjectName": ["legacy-vue2"]，避免 Volar 强制解析老语法
Path Intellisense 路径补全失效的三个常见原因
明明装了插件，import 时按 Ctrl+Space 却没提示，大概率不是插件坏了，而是环境没对齐。
- 没配
jsconfig.json或tsconfig.json中的"baseUrl"和"paths"，插件不知道@/指向哪 - 路径别名用了 Webpack 别名但没同步到 TS 配置，TypeScript 语言服务不认，Path Intellisense 就无法索引
- 文件未保存（.vue 或 .ts 文件处于 dirty 状态），插件依赖 TS 服务的 AST，未保存时 AST 不完整
JavaScript Booster 的重构灯泡为什么没出现
这个插件的「智能重构」能力依赖光标精准落在可操作节点上，不是所有代码位置都能触发。
- 光标必须停在变量声明行（如
let x = 1的let或x上），停在等号或值上无效 - 函数定义必须是完整表达式形式：
const fn = function() {}或const fn = () => {}，function fn() {}声明式函数不支持箭头转换 - 条件语句重构（如 if → 三元）要求整个
if块被选中，或光标在if关键字上，停在花括号内不行
插件不是开关一开就自动变聪明，每款都有它的触发边界和依赖前提。漏掉一个配置、光标偏移一个字符、TS 服务没加载完，灯泡就不亮，路径就不补，跳转就失败——这些不是 bug，是它们和编辑器底层协作的真实状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
