eslint-config-prettier是必加项，用于清空ESLint中所有与Prettier重叠的格式规则，必须置于extends末尾；VSCode中不可同时启用formatOnSave和source.fixAll.eslint；Vue 3项目须卸载Vetur并启用vue-language-tools，避免语言服务器冲突。
前端在 VSCode 里装一堆插件不难，难的是搞清每个插件到底解决什么问题、在哪种场景下必须开、关掉哪个选项反而会破坏工作流。下面按真实开发中高频踩坑的维度拆解。
eslint + prettier 冲突时，eslint-config-prettier 不是可选，是必加
常见错误现象：保存后代码被反复格式化，比如 semi 被删了又加回来，或者 quotes 规则和 Prettier 对不上。
-
eslint-config-prettier的作用不是“增强 ESLint”，而是“清空 ESLint 中所有和 Prettier 重叠的规则” - 必须放在
extends数组末尾，顺序错会导致规则未被禁用 - 如果项目用的是
eslint-plugin-vue或eslint-plugin-react，还得额外加plugin:vue/vue3-recommended和plugin:react/recommended对应的 config-prettier 变体 - VSCode 设置里别同时开
"editor.formatOnSave": true和"editor.codeActionsOnSave": { "source.fixAll.eslint": true }，否则会触发两次修复，尤其在 Vue 单文件组件里容易把<template>格式搞乱
vue-language-tools（原 Volar）启用后，vetur 必须卸载
Vue 3 项目里还留着 vetur 是当前最隐蔽的性能杀手之一：它会和 vue-language-tools 抢 .vue 文件控制权，导致语法高亮错乱、ref 类型推导失败、defineProps 提示消失。
- 检查方式：打开一个
.vue文件，按Ctrl+Shift+P输入Developer: Toggle Developer Tools，看 Console 是否报Multiple language servers registered for 'vue' -
vue-language-tools默认启用Take Over Mode，此时 Vetur 的语法高亮、模板校验等能力全部失效，但进程仍在后台运行，拖慢编辑器响应 - 若项目仍需 Vue 2 支持，不要强行复用同一套插件；应通过
settings.json的"vue.preferences.useVolarForVue2": false控制，而非共存两个语言服务器
path-intellisense 和 alias-skip 解决的是不同层级的路径问题
别名跳转失效，很多人第一反应是装 alias-skip，但实际要先确认是不是 jsconfig.json 或 tsconfig.json 里 baseUrl 和 paths 没配对，或者 Webpack/Vite 别名没同步到 TS 配置中。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
-
path-intellisense解决的是“输入路径时自动补全”，依赖本地jsconfig.json的compilerOptions.paths，不处理 Ctrl+Click 跳转 -
alias-skip（如@ext:lihuiwang.vue-alias-skip）只接管 Vue 文件中的@/xxx跳转，对import xxx from 'lodash'或require('./utils')无效 - 真正通用的方案是用
typescript-hero或直接靠 TS Server 自身能力：确保tsconfig.json的compilerOptions.baseUrl和构建工具的 alias 一致，VSCode 会自动识别
bracket-pair-colorizer 在深度 JSX 嵌套中容易误判，highlight-matching-bracket 更可靠
当写类似 {data.map(item => <div key="{item.id}">{item.children?.map(...)}</div>)} 这类多层嵌套表达式时，bracket-pair-colorizer 常把最外层的 {} 和内层某个 {} 配对错，颜色混乱反而干扰判断。
- VSCode 内置的
"editor.guides.bracketPairs": true和"editor.guides.highlightActiveBracketPair": true已足够应对 90% 场景，且不依赖第三方插件 - 如果坚持用
bracket-pair-colorizer，务必关闭其autoClosingBrackets选项，否则和 Prettier 的自动补全冲突，导致敲{后多出一个} - 真正需要彩色括号的场景其实是 CSS-in-JS（如 styled-components），此时建议只对
languageId: "javascriptreact"启用该插件，避免污染普通 JS 文件
插件不是越多越好，关键看它是否在你当前技术栈的「关键断点」上起作用——比如 Vue 3 项目里 vue-language-tools 的 Take Over Mode 开关、TS 配置与构建配置的 paths 同步、ESLint 和 Prettier 的规则边界，这些地方一旦错位，后续所有格式化、跳转、类型提示都会连锁失效。
