ESLint与Prettier必须协同配置，单装其一会导致格式冲突或逻辑检查缺失；根本解法是通过eslint-config-prettier禁用ESLint格式规则，设Prettier为VSCode默认格式化器，并关闭ESLint自动修复。
ESLint + Prettier 组合必须一起配，单装任何一个都会出问题。单独开 Prettier 会格式化代码但不管逻辑错误；只装 ESLint 又容易和格式规则打架，保存时反复冲突、报红、自动修复失败——这是新手踩得最多的一坑。
为什么 ESLint 和 Prettier 不能“各干各的”
ESLint 默认自带部分格式规则（比如 indent、quotes），而 Prettier 也强制处理这些细节。两者同时启用时，编辑器会在同一行反复触发校验 → 格式化 → 再校验 → 再格式化，最终导致光标跳动、保存卡顿、甚至 Format On Save 失效。
- 根本解法不是禁用某一方，而是让 ESLint “让出格式权”：安装
eslint-config-prettier并在extends中显式加载它 - 确保 Prettier 是 VSCode 的默认 formatter：
"editor.defaultFormatter": "esbenp.prettier-vscode" - 关闭 ESLint 的自动 fix on save：
"eslint.autoFixOnSave": false（交给 Prettier 统一做） - 项目级配置优先于全局设置，
.eslintrc.js里别漏掉'prettier'这一项
Path Intellisense 配合 jsconfig.json 才真正好用
很多人装了 Path Intellisense 却发现 alias（比如 @/components）不提示，原因是插件本身不读取 jsconfig.json 或 tsconfig.json，它只依赖文件系统路径扫描——而 alias 是编译时解析的，编辑器看不到。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 必须手动在
jsconfig.json里声明compilerOptions.paths，Path Intellisense才能识别 - 如果用的是 Vite 或 Webpack，确认
baseUrl设为"."，否则路径映射失效 - Vue 项目中若用
defineConfig动态生成配置，jsconfig.json仍需静态存在，否则插件无法加载 - 重启 VSCode 后首次补全可能延迟，多等两秒，别急着卸载
Bracket Pair Colorizer 的高亮线经常“断连”，其实是缩进设置惹的祸
括号颜色对了，但连接线只显示半截，或者光标移过去不高亮匹配项——大概率是 VSCode 的缩进渲染机制被干扰，尤其在 JSX 或嵌套模板里。
立即学习“前端免费学习笔记（深入）”；
- 关掉所有其他括号类插件（比如
Auto Close Tag或旧版Bracket Pair Colorizer 2），它们会抢渲染权 - 检查
"editor.renderIndentGuides": true是否开启，这个开关影响连接线绘制基础 - 如果用了
indent-rainbow，它的颜色层可能盖住括号连线，建议调低indentRainbow.colors透明度 - VSCode 1.89+ 版本已内置括号高亮（
"editor.highlightMatchingBrackets": "always"），可直接弃用该插件
真正卡住效率的从来不是插件数量，而是几个关键插件之间的协作逻辑。比如 Prettier 和 ESLint 的职责边界、Path Intellisense 对配置文件的硬依赖、括号高亮与缩进渲染的底层冲突——这些地方不细看文档，光靠“装了就能用”思维，反而拖慢开发节奏。
