ESLint一开就报满屏红的根本原因是规则和解析器未对齐：默认只认.js文件，支持.tsx需显式配置parserOptions.project；缺eslint-plugin-react等插件会导致React语法报错；混搭airbnb与prettier却漏eslint-config-prettier会引发格式冲突。

ESLint 能立刻暴露潜在错误，但没配好就等于白装——规则冲突、自动修复失效、TS支持缺失，是新手踩坑最密集的三块石头。

为什么 eslint 一开就报满屏红？

根本原因不是代码烂，而是规则和解析器没对齐。常见现象：Parsing error: Cannot read property 'map' of undefined 或 React is not defined 这类错误，基本都卡在配置层。

• eslint 默认只认 .js，要支持 .tsx 必须显式加 parserOptions.project（指向 tsconfig.json）
• 用了 react 却没装 eslint-plugin-react 和 eslint-plugin-react-hooks，useState 直接变未定义
• extends 里混搭 airbnb + prettier 但漏了 eslint-config-prettier，格式规则打架，--fix 越修越乱

prettier 保存后格式全乱？检查这三点

Prettier 不是“按一下就完事”的工具，它依赖编辑器行为与项目配置的咬合。典型症状：保存后缩进变 4 格、单引号变双引号、JSX 换行错乱。

• VSCode 设置里必须关掉 editor.formatOnSave 的全局开关，改用项目级控制：在 .vscode/settings.json 中设 "editor.formatOnSave": true 并配合 "editor.defaultFormatter": "esbenp.prettier-vscode"
• .prettierrc 里写 "semi": false，但 eslint 规则里还有 semi: ["error", "always"] —— 不删掉或用 eslint-config-prettier 屏蔽，保存时就会反复拉扯
• Vue 文件默认不被 Prettier 处理，需在 .prettierrc 加 "vueIndentScriptAndStyle": true，否则 <script> 里的缩进会塌陷

Path Intellisense 跳转失败，别急着重装

路径补全失效，90% 是 alias 映射没被编辑器识别，而不是插件坏了。现象：输入 @/components/ 没提示，Ctrl+Click 跳不到目标文件。

PigX UI 前端开发

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

下载

• 确认 jsconfig.json 或 tsconfig.json 里有 "baseUrl" 和 "paths"，且 baseUrl 是 "."（不是 "./src"）
• Path Intellisense 不读 webpack.alias，只认 tsconfig/jsconfig —— Vue CLI 或 Vite 项目也得补这个配置文件
• VSCode 需要重启才能加载新写的 jsconfig.json，改完别忘了 Cmd/Ctrl+Shift+P → Developer: Reload Window

Auto Rename Tag 在 JSX 里失灵？

它默认只处理纯 HTML，React/Vue 的 JSX/Template 语法需要手动开开关。表现：改了 <div>，</div> 变了，但 <MyComponent> 改成 <Header>，闭合标签不动。

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

• 进 VSCode 设置搜 autoRenameTag，把 Auto Rename Tag: Enabled Languages 里加上 javascriptreact 和 typescriptreact
• Vue 用户额外加 vue；Svelte 加 svelte —— 别只信默认列表
• 如果用了自定义组件名（如 <LoadingSpinner>），确保标签名首字母大写，小写标签会被当成原生元素忽略

真正卡住人的从来不是插件装不装，而是每个插件背后那几行关键配置是否对得上项目实际结构。少一个 parserOptions.project，多一个没屏蔽的 eslint 规则，都可能让整个流程卡在“看起来装好了，其实没生效”的死循环里。