前端开发者必备的VSCode插件扩展指南-VSCode-PHP中文网

eslint与prettier协同失效的根本原因是规则重叠未清理干净，须在.eslintrc.js的extends末尾添加'prettier'，并配合eslint-config-prettier关闭冲突规则，同时vscode需指定esbenp.prettier-vscode为默认formatter且禁用其他格式化插件。

前端开发者必备的vscode插件扩展指南

前端项目开箱即用的开发体验，不靠玄学配置，靠这 5 类插件精准覆盖核心痛点。

ESLint + Prettier 协同失效怎么办

常见错误现象是保存后代码没格式化，或 eslint --fix 报错“conflict with prettier”。根本原因不是插件没装，而是规则重叠没关干净。

必须在 .eslintrc.js 的 extends 数组末尾加上 'prettier'（注意不是 prettier/react 这类子集）
prettier 插件本身不参与 lint 检查，只负责格式化；eslint-config-prettier 才是关闭 ESLint 中与 Prettier 冲突的规则的关键
VSCode 设置里要明确指定默认 formatter 为 esbenp.prettier-vscode，且禁用其他插件的自动格式化（比如 beautify）
如果用 TypeScript，plugin:@typescript-eslint/recommended 必须放在 prettier 前面，否则类型相关规则会被误关

Vue/React 文件里路径跳转失灵

写 import { api } from '@/api/user'，Ctrl+点击却打不开文件——这不是插件问题，是 VSCode 没法识别 @ 别名。Path Intellisense 只补全，不跳转；真正解决跳转得靠项目级配置。

PigX UI 前端开发

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

下载

确保项目根目录有 jsconfig.json（Vue CLI 项目）或 tsconfig.json（Vite + TS），且包含 "baseUrl" 和 "paths" 字段
"paths": { "@/*": ["src/*"] } 中的 src/* 必须是相对于 baseUrl 的真实路径，不能写成 ./src/*
修改配置后必须重启 VSCode，仅重载窗口不够；部分旧项目需删掉 node_modules/.vscode 缓存目录
Vue 项目若用 <script setup></script>，还需确认 vue 插件已启用，否则 defineProps 等 API 的类型推导会断掉跳转链

调试时断点不命中、变量显示 undefined

尤其在 Vite 或 Webpack 构建后，Chrome DevTools 显示的是打包后的代码，VSCode 里设的断点根本没生效。Debugger for Chrome 插件只是桥梁，关键在 sourcemap 映射是否对齐。

launch.json 中的 webRoot 必须指向开发服务器启动时的真实根路径（如 "${workspaceFolder}"），不是构建输出目录
Vite 项目需确认 vite.config.ts 中 build.sourcemap 设为 true，且 resolve.alias 与 jsconfig.json 一致，否则 sourcemap 里路径和实际文件路径对不上
如果用 npm run dev 启动，url 字段应填 http://localhost:5173 这类实际地址，不能填 index.html 相对路径
React 18 的并发渲染可能导致断点跳过某些 render 阶段，此时建议在 useEffect 或事件回调里设断点，而非组件顶层

别名路径补全不提示 `@/components/xxx`

Path Intellisense 默认只补全相对路径（../、./），对 @/ 这类 webpack alias 需手动激活支持。

打开 VSCode 设置，搜索 path-intellisense.mappings，点击“在 settings.json 中编辑”
添加映射："@": "${workspaceFolder}/src" —— 注意这里用的是 ${workspaceFolder}，不是硬编码路径
如果项目有多个别名（如 #utils），每个都要单独加一条映射，不能合并写成 {"@": "...", "#utils": "..."}（JSON 不支持注释，但值必须是字符串）
补全触发时机是输入 @/ 后按 Ctrl+Space，不是自动弹出；若仍无响应，检查当前文件是否被识别为 JavaScript/TypeScript（右下角语言模式是否为 JavaScript React）