ESLint与Prettier协同需禁用ESLint格式规则并设Prettier为默认格式化器，否则保存时会因quotes、semi等冲突导致代码反复格式化；须在.eslintrc.js extends末尾加"prettier"，安装eslint-config-prettier，并在settings.json中配置"editor.defaultFormatter": "esbenp.prettier-vscode"。
ESLint 插件是前端代码质量的第一道防线，装了不配等于没装。
ESLint 配置必须关掉重复规则，否则和 Prettier 对着干
常见错误现象是保存后代码被反复格式化、缩进错乱、引号来回切换。这是因为 ESLint 默认启用的 quotes、semi 等规则和 Prettier 冲突。
- 在
.eslintrc.js的extends数组里，把prettier放在最后，例如：['airbnb', 'prettier'] - 显式安装并引入
eslint-config-prettier，它会把所有与格式相关的规则设为off - 别依赖插件自动识别配置——VSCode 的 ESLint 插件只读项目根目录下的配置文件，
node_modules里的规则不会被自动合并
Prettier 保存时格式化要配合 editor.defaultFormatter
很多人开了 editor.formatOnSave 却没生效，根本原因是没指定默认格式化器。
- 在
settings.json中必须设置："editor.defaultFormatter": "esbenp.prettier-vscode" -
prettier.semi和prettier.singleQuote这类配置只在 Prettier 自身配置缺失时才起作用；优先级顺序是：.prettierrc>settings.json> 插件默认值 - Vue 文件中 template 部分默认不被 Prettier 处理，需额外安装
prettier-plugin-vue并在.prettierrc中加入"plugins": ["prettier-plugin-vue"]
JavaScript Booster 的 light bulb 不是装饰，是重构入口
这个插件的黄色灯泡图标常被忽略，但它能安全完成大量手动易错的重构操作。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 光标停在
var name = 'xxx'上，点灯泡可一键转const或let，同时自动补分号、修复缩进 - 选中一个函数体（包括
function关键字），灯泡提供Convert to arrow function，且会保留原有返回逻辑，不破坏闭包 - 对
if/else块触发时，Replace with ?:选项只在无副作用前提下生效——比如变量未在 else 外被引用，否则选项压根不出现
Path Intellisense 的 alias 跳转依赖 jsconfig.json 正确声明
写了 @/components/Button 却 Ctrl+Click 跳不到文件？问题大概率出在路径映射没被识别。
-
jsconfig.json必须放在项目根目录，且compilerOptions.baseUrl要设为"." -
paths中的 key 必须带通配符，例如"@/*": ["src/*"]，写成"@/": ["src/"]就无法匹配子路径 - TypeScript 项目用
tsconfig.json，但 Path Intellisense 默认只读jsconfig.json；如需支持 TS，得手动在插件设置里勾选Path Intellisense: Include Tsconfig
真正卡住人的从来不是插件装没装，而是配置有没有穿透到编辑器底层——比如 ESLint 规则没关干净、Prettier 没设为 defaultFormatter、alias 路径少了个星号。这些细节不处理，插件再强大也只在后台静默运行。
