ESLint、Prettier、Volar、Path Intellisense、Error Lens是2026年前端开发在VSCode中真正必需的5款核心插件，分别解决代码错误标红、保存自动格式化、Vue3语法提示、路径智能补全、错误行尾直显五大高频痛点，少一个即明显拖慢开发节奏。
前端项目里，VSCode 不是装得越多插件越好，而是要挑真正能解决你当下痛点的。多数人卡在「写完代码要手动检查格式、改个标签总忘闭合、路径别名点不进去、保存后 ESLint 报错却没自动修」——这些问题背后，其实就几个关键插件没配对或没调好。
ESLint + Prettier 自动修复不生效？检查这三处配置
常见现象：eslint.autofixonsave 开了但保存后没反应，或者 prettier 格式化后又触发 ESLint 报错（比如分号、引号冲突）。
- 确认 VSCode 设置里启用了
"editor.formatOnSave": true，且默认 formatter 是esbenp.prettier-vscode - 项目根目录必须有
.eslintrc.js或.eslintrc.cjs，且其中已引入eslint-config-prettier关闭所有与 Prettier 冲突的规则 -
.prettierrc文件不能缺，否则 Prettier 会 fallback 到内置默认值，和团队规范不一致；建议显式写"semi": false、"singleQuote": true等关键项
Vue/React 组件中路径别名跳转失效？别只装插件
现象：写了 import { api } from '@/api/user'，Ctrl+点击 @/api/user 却打不开文件。
- 先确认项目已有
jsconfig.json（TS 项目用tsconfig.json），里面定义了"baseUrl"和"paths"，例如："@/*": ["src/*"] - VSCode 插件如
Path Intellisense或Alias Navigator只是辅助补全，跳转能力依赖 TypeScript / JS 语言服务本身，不是靠插件“硬跳” - 重启 VSCode 或执行命令
Developer: Reload Window，确保语言服务读取了新配置
Auto Rename Tag 在 JSX/Vue 模板里失灵？注意语法范围
现象：把 <div> 改成 <section>，闭合标签没变；或者 Vue 的 <template> 里改标签完全没响应。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
-
Auto Rename Tag默认只作用于.html和.xml文件，对.vue或.tsx需手动开启支持 - 在 VSCode 设置中搜索
autoRenameTag，找到Auto Rename Tag: Enabled Languages，添加"vue"和"typescriptreact" - 若用 Volar（Vue 3 推荐），它自带更精准的标签重命名逻辑，此时可禁用
Auto Rename Tag避免冲突
Live Server 启动报 EADDRINUSE？端口不是唯一变量
现象：点「Go Live」提示 Error: listen EADDRINUSE: address already in use :::5500，改端口后仍失败。
- 先查是否真有其他进程占着端口：
lsof -i :5500（macOS/Linux）或netstat -ano | findstr :5500（Windows） - Live Server 默认绑定
127.0.0.1，如果本地 hosts 被改过或 DNS 缓存异常，可能解析失败；可在settings.json加"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --disable-web-security"临时绕过 - 更稳妥的做法是设
"liveServer.settings.port": 0，让系统自动分配空闲端口，避免硬编码冲突
插件本身只是工具，真正卡住效率的，往往是配置细节和上下文环境的错配。比如 Volar 和 Vetur 不能共存，ESLint 规则没关掉 Prettier 相关项，或者 jsconfig.json 里 paths 写错斜杠方向——这些地方不排查清楚，装再炫的插件也没用。
