prettier与eslint必须协同配置：prettier负责格式统一，eslint负责逻辑校验，二者需通过eslint-config-pretterr消除规则冲突，并配合.editorconfig、.prettierrc和.eslintrc.js项目级配置实现高效开发。
真正能提升前端开发生产力的 VS Code 插件，不是装得越多越好，而是选对那几个关键节点——格式、校验、导航、调试、视觉节奏，每个环节卡住一次，一天就少写 30 行有效代码。
为什么 Prettier + ESLint 必须同时启用
只开 Prettier，代码看着整齐，但 undefined 变量、React Hook 调用位置错误、未使用的导入这些逻辑问题全被忽略；只开 ESLint，格式规则和 Prettier 冲突，保存时反复打架，editor.formatOnSave 可能直接失效。
- 必须在
.eslintrc.js的extends中加入'prettier'（来自eslint-config-prettier），关掉所有与格式相关的 ESLint 规则 - VS Code 设置里，
editor.defaultFormatter设为esbenp.prettier-vscode，editor.formatOnSave开启，editor.codeActionsOnSave加上{"source.fixAll.eslint": true} - 项目根目录放
.prettierrc和.eslintrc.js，别依赖全局配置——不同项目缩进/分号策略可能完全不同
Bracket Pair Colorizer 2 不是“好看就行”
它解决的是嵌套层级误判问题，尤其在 JSX 或带三元嵌套的模板字符串里，光靠括号形状很难快速定位闭合位置。但默认设置下，高亮只作用于光标所在括号对，深层嵌套时依然容易漏看。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 务必开启
bracketPairColorizer.showBracketsInGutter，让左侧边栏显示匹配线，一眼锁定作用域范围 - 禁用
bracketPairColorizer.highlightActiveBracketPairOnly，否则光标一移走，整层嵌套就“隐身”，失去上下文 - 如果用的是 VS Code 1.89+，原生已有
editor.guides.bracketPairs，但颜色单调、不支持自定义配色，Bracket Pair Colorizer 2仍不可替代
Path Intellisense 在 monorepo 里容易失效
它默认只识别相对路径和 node_modules，遇到 @/components/Button 或 ~/utils 这类 alias 路径时，补全直接罢工——不是插件坏了，是没告诉它怎么查。
- 必须配合项目级配置：在
jsconfig.json或tsconfig.json的compilerOptions.paths里明确定义 alias 映射 - 确保
Path Intellisense的path-intellisense.mappings设置为空（默认即可），它会自动读取 tsconfig/jsconfig - 如果 alias 指向的是 symlink 目录（比如 pnpm workspace 链接），需额外设
"path-intellisense.autoMapPackageJson": true
Error Lens 让报错“不滚动就能看见”
VS Code 原生把错误提示压在行尾灰色小字里，鼠标悬停才弹出，写一段 fetch 然后切到浏览器看效果，回来再找哪行红波浪——这个切换成本，每天累积超 5 分钟。
-
Error Lens把诊断信息直接印在代码行末，且支持errorLens.showTooltip关闭悬浮窗，避免遮挡 - 关键配置：
errorLens.showErrorMessage设为true，errorLens.showWarningMessage按需开启——警告太多反而干扰，建议只留 error - 搭配 ESLint 使用时，注意
eslint.validate要包含javascript和typescript，否则 .ts 文件里的错误不会触发 Error Lens
最常被忽略的其实是冲突：比如 Auto Rename Tag 和 Vue 的 v-model 指令共存时，改 <input v-model="xxx"> 标签名会连指令一起重命名；这类细节不踩一遍坑，根本想不到要关掉某个开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
