掌握这些VSCode插件提升前端开发质量-VSCode-PHP中文网

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

掌握这些vscode插件提升前端开发质量

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 换行错乱。

PigX UI 前端开发

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

下载

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></script> 里的缩进会塌陷

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

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

确认 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