ESLint 与 Prettier 冲突时，应让 ESLint 专注逻辑检查（如 no-console）、Prettier 专管格式（缩进、引号等）；需安装 eslint-config-prettier 并在 .eslintrc.js 的 extends 末尾加入 "prettier" 以禁用 ESLint 中所有格式规则，同时根目录配置 .prettierrc 统一格式，VSCode 设 defaultFormatter 为 Prettier 并关闭 eslint.format.enable。
ESLint 与 Prettier 冲突时怎么配才不报错
ESLint 和 Prettier 一起用，90% 的格式报错不是代码写错了，而是规则打架。比如 eslint 要求分号，prettier 配了 semi: false，保存就红一片。
关键不是“装两个插件”，而是让它们各司其职：ESLint 负责逻辑和风格检查（如 no-console、react-hooks/exhaustive-deps），Prettier 只管格式（缩进、换行、引号）。
- 必须安装
eslint-config-prettier，并在.eslintrc.js的extends末尾加上它，用来关掉 ESLint 里所有和格式相关的规则 -
settings.json中设"editor.defaultFormatter": "esbenp.prettier-vscode"，同时关掉eslint的自动修复格式功能（即不勾选eslint.format.enable） - 项目级配置优先：根目录放
.prettierrc（不要只靠 VSCode 设置），内容示例：{ "semi": false, "singleQuote": true, "tabWidth": 2 }
别名路径 @/src/ 点不动？不是插件问题，是配置漏了
按住 Ctrl + 左键点 @/api/user 没反应，大概率不是插件没装，而是项目没告诉 VSCode “@” 指哪儿。
Path Intellisense 或 Vue Alias Skip 这类插件只是补全/跳转的“执行者”，真正需要你手动声明的是路径映射关系。
立即学习“前端免费学习笔记（深入）”；
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 前端项目必须有
jsconfig.json（JS）或tsconfig.json（TS），里面要有"compilerOptions.paths配置，例如：{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } } - Vue 项目还需确认
vue.config.js或vite.config.ts里 alias 是否同步配置，否则运行时能跑，编辑器跳转仍失效 - 重启 VSCode —— 配置改完不重启，VSCode 不会重新读取
jsconfig.json
保存就格式化，但 JSX 里样式乱套了怎么办
开了 editor.formatOnSave 后，div 标签突然被拆成多行、class 属性被挤到下一行，看着像 bug，其实是 Prettier 对 JSX 的默认换行策略太激进。
这不是插件不行，是默认配置没适配团队习惯。Prettier 的 printWidth 和 jsxBracketSameLine 直接影响 JSX 可读性。
- 把
printWidth从默认 80 改成 100～120，能显著减少 JSX 自动换行 - 加
"jsxBracketSameLine": true，让闭合尖括号跟最后一行属性在同一行，避免<div className="x">拆成两行 - 如果用了 Tailwind，建议额外加
"htmlWhitespaceSensitivity": "ignore"，不然空格缩进会被误判为多余空白
Vue 模板里变量点不动？别急着换插件
在 <template> 里鼠标悬停 {{ userInfo.name }} 无法跳转到 data 或 setup() 里的定义，常见原因不是插件不支持，而是语言服务没激活。
Vue 3 + TS 项目尤其容易卡在这一步：VSCode 默认只识别 .ts 文件的类型信息，.vue 文件需要额外语言支持。
- 必须装官方
Volar（不是旧版Vetur），且禁用Vetur—— 两者共存会互相干扰 - 确保
tsconfig.json包含"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] - 打开一个
.vue文件后，右下角状态栏点“TypeScript Vue Plugin (Volar)”，确认它已启用，而不是“TypeScript and JavaScript Language Features”
jsconfig.json 写对了但 tsconfig.json 没同步，或者 Volar 装了却忘了关 Vetur。这些地方不显眼，但一出问题就整块功能瘫痪。 
