ESLint与Prettier不打架的关键是职责分离：ESLint专注逻辑与规范检查，Prettier专管格式；需安装eslint-config-prettier并置于extends末尾，禁用ESLint自动格式化，统一配置文件并锁定版本。

团队里代码风格不统一、路径写错、改了标签忘了闭合、调试时反复切窗口——这些问题不是靠开会能解决的，得靠插件在编辑器里直接堵住漏洞。

ESLint + Prettier 怎么配才不打架

两者功能重叠但分工明确：ESLint 检逻辑和规范，Prettier 只管格式。冲突常出现在保存时互相覆盖，根源是规则没对齐。

• 必须安装 eslint-config-prettier，并在 .eslintrc.js 的 extends 末尾加上它，否则 no-semi 和 prettier.semi 会互踩
• settings.json 中禁用 ESLint 自动格式化：设置 "eslint.format.enable": false，只让 Prettier 负责格式，ESLint 专注报错
• 团队共用 .prettierrc 和 .eslintrc.js，版本也要锁死（比如 prettier@3.2.5），不同 minor 版本可能改变换行或括号策略

路径补全为什么总找不到 @/components

Path Intellisense 默认不识别别名，光装插件没用，必须告诉它“@”代表什么。

• 项目根目录要有 jsconfig.json 或 tsconfig.json，且包含 "baseUrl" 和 "paths" 配置，例如：{"compilerOptions":{"baseUrl":".","paths":{"@/*":["src/*"]}}}
• VSCode 设置里确认 "path-intellisense.mappings" 没被手动覆盖，否则会忽略 tsconfig
• 如果用了 Vite，确保 vite.config.ts 里的 resolve.alias 和 tsconfig 一致，否则运行时没问题、编辑器里路径标红

改 JSX 标签时闭合标签没同步更新

Auto Rename Tag 对 JSX 支持有限，默认只处理 HTML 标签，React/Vue 的自定义组件名不会自动改。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

立即学习“前端免费学习笔记（深入）”；

• 打开设置搜索 "auto-rename-tag.activationOnLanguage"，手动添加 "javascriptreact" 和 "typescriptreact"
• 遇到 <mybutton onclick="{...}"></mybutton> 这类首字母大写的组件，插件默认不触发；需在设置里把 "auto-rename-tag.includeJSXTags" 设为 true
• Vue 单文件组件中，<template> 里的标签能自动重命名，但 <script setup> 里的变量名不会联动，这是设计使然，别指望它管逻辑层

调试时断点不生效或源码映射错乱

Debugger for Chrome 依赖 sourcemap 正确生成和映射，Webpack/Vite 配置稍有偏差，VSCode 就找不到原始代码行。

• launch.json 中 "webRoot" 必须指向构建产物所在目录（如 "${workspaceFolder}/dist"），不是源码目录
• Vite 项目需在 vite.config.ts 中显式开启 sourcemap：build: { sourcemap: true }，否则即使 launch.json 写对也白搭
• Chrome 浏览器开发者工具里，检查 Sources > Page 下是否显示的是 .ts 文件而非 .js，如果不是，说明 sourcemap 路径没解析成功，常见于 "sourceMapPathOverrides" 配置缺失

插件不是装得越多越好，真正卡协作效率的往往是那两三个配置不对的“半残”插件——它们安静地报错、悄悄地失效，比没装还麻烦。