真正高效实用的VS Code插件仅几个：Alias Navigator/Vue Alias Skip解决路径别名跳转；eslint-config-prettier消解Prettier与ESLint冲突；Live Server需配置CustomBrowserUrl或改用真实开发服务器；组件跳转依赖规范导出语法和类型定义。
别装一堆插件凑数，真正能每天用、省时间、少出错的就那么几个。下面挑的都是在 2026 年真实项目里高频踩过坑、反复验证过的插件，不是“看起来很酷但用不上”的类型。
路径别名跳转失效时该配什么
写 import { api } from '@/utils/request' 却 Ctrl+点击没反应？不是插件没装，而是配置没对上。VS Code 原生不识别 @ 这类别名，必须靠插件解析规则。
- 推荐插件：
Alias Navigator或Vue Alias Skip（Vue 项目优先） - 关键配置项：
"alias-navigator.aliasMap"，需显式声明映射，比如{"@": "./src"}，不能只写@ - 常见错误：把 Webpack 的
resolve.alias直接复制进 VS Code 设置——两者格式不兼容，必须转成 JSON 对象 - 注意：TypeScript 项目还需同步配置
tsconfig.json中的baseUrl和paths，否则类型检查会报错
Prettier 和 ESLint 冲突怎么消解
prettier 格式化后，eslint 立刻标红说“分号缺失”或“引号不一致”？这不是 bug，是规则打架。
- 必须装
eslint-config-prettier，并在 ESLint 配置的extends数组末尾加上它，顺序不能错 -
prettier不负责语法检查，只管格式；ESLint 才管逻辑和风格，二者职责要切清 - VS Code 设置里关掉
"editor.formatOnSave"同时启用"editor.codeActionsOnSave"→"source.fixAll.eslint"，让 ESLint 在保存时统一修格式+逻辑 - 避免手动运行
Prettier: Format Document，容易绕过 ESLint 规则
Live Server 启动后页面不自动刷新
改完 HTML 或 CSS，浏览器没反应？不是插件坏了，而是默认监听范围太窄。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
-
Live Server默认只监听.html文件变更，CSS/JS 修改不会触发刷新 - 在设置里搜
liveServer.settings.CustomBrowserUrl，填入你的开发服务器地址（如http://localhost:3000），再开 Live Server 就走代理模式，支持全文件监听 - 更稳妥的做法：用
npm run dev启动真实开发服务器（Vite/webpack），Live Server 只用于纯静态页原型验证 - 注意端口冲突：如果本地已有服务占了 5500，不要硬改插件端口，直接右键菜单选 “Open with Live Server on Port…” 换一个
React/Vue 组件跳转总卡在定义文件开头
Ctrl+点击组件名，跳过去却停在文件第一行，不是没跳对，是没识别导出语句。
-
Volar（Vue 3）和ESLint + TypeScript Plugin（React）依赖正确的导出语法 - Vue 里写
export default defineComponent({ ... })比export default { ... }更容易被识别 - React 中避免用
const MyComponent = () => {...}; export default MyComponent;这种拆分写法，改成单语句导出：export default function MyComponent() {...} - 如果用了
shorthand import（如import Button from '@mui/material/Button'），确保插件已加载对应库的类型定义，否则跳转会失败
插件不是越多越好，真正卡住开发节奏的，往往是那一个没配对的路径映射、一条没对齐的 ESLint 规则、或者一次没生效的组件跳转——这些细节比插件名字重要得多。
