VSCode前端开发真正必需的插件是ESLint、Prettier、Volar、Path Intellisense、Error Lens这5款，分别解决代码错误标红、保存自动格式化、Vue3语法提示、路径智能补全、错误行尾直显五大高频痛点，少一个即明显拖慢开发节奏。
VSCode前端开发真正需要的插件，不是越多越好，而是每个都得解决一个具体痛点。装错或配置不当，反而拖慢编辑器、干扰调试、甚至让import跳转失效。
Live Server：热重载不是“有就行”，端口和根路径必须配对
只装插件不改配置，Live Server启动后可能 404 或加载错 CSS —— 因为它默认以当前文件所在目录为根，但多数前端项目实际入口是 index.html 在 src/ 或 public/ 下。
- 右键启动前，先确认当前打开的是项目根目录（含
package.json） - 若项目用 Vite/React/Vue CLI，建议在
.vscode/settings.json中加："liveServer.settings.root": "./", "liveServer.settings.port": 5500
- 遇到“无法加载样式表”时，检查浏览器地址栏是否是
http://127.0.0.1:5500/src/index.html这类路径 —— 应该是http://127.0.0.1:5500/，否则相对路径会断
ESLint + Prettier：规则冲突不报错，但格式化会静默失败
ESLint 和 Prettier 同时启用时，常见现象是保存后代码没变、控制台也没报错，其实是因为两者规则打架，Prettier 的格式化被 ESLint 拦截了。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 必须安装
eslint-config-prettier并在.eslintrc.js的extends末尾加上'prettier' - VSCode 设置里关掉
editor.formatOnSave，只留eslint.autoFixOnSave: true，让 ESLint 统一接管修复 - 如果用 TypeScript，
eslint-plugin-react和@typescript-eslint/eslint-plugin不能同时启用indent规则，否则保存时缩进反复来回跳
Path Intellisense：别名路径跳转失效，90% 是 jsconfig.json 没生效
写 import utils from '@/utils' 时 Ctrl+点击跳不到文件？不是插件问题，而是 VSCode 没读到路径映射配置。
立即学习“前端免费学习笔记（深入）”；
-
jsconfig.json必须放在项目根目录（和package.json同级），且内容包含"compilerOptions.baseUrl"和"paths" - 配置完后执行命令面板里的
Developer: Reload Window，否则新配置不加载 - Vue 项目更推荐用
volar自带的路径解析，Path Intellisense反而容易和volar冲突，导致跳转两次才成功
Auto Rename Tag：JSX 里失效？试试关闭其他标签插件
在 React 或 Vue 的 .tsx 文件中，修改 <div> 不自动同步闭合标签，大概率是 <code>Volar 或 ESLint 的语言服务覆盖了默认 HTML 行为。
- 临时验证：新建一个纯
.html文件，测试是否正常 —— 如果正常，说明是 JSX/TSX 语言模式的问题 - VSCode 设置搜索
html.suggest.html5，确保为true；再搜javascript.suggest.autoImports，设为false避免干扰 - 不要同时启用
Auto Rename Tag和Volar的 “Rename Symbol” 功能，后者在.vue文件里已原生支持标签重命名
插件本身不会出错，出错的是它们之间的协作边界。一个没配对的 baseUrl、一次没重载的窗口、一条没关掉的冲突规则，就足以让整个编辑体验倒退两周。动手前，先看一眼当前项目的构建方式和语言服务是谁在管 —— 这比盲目装插件重要得多。
