Live Server、Path Intellisense、ESLint、Prettier、Vue/React Snippets是前端开发真正省时避坑的核心插件，分别解决HTML实时刷新、路径智能补全、代码错误标红、保存自动格式化、组件模板生成等具体问题。
前端开发中，真正能省时间、少踩坑的插件，不是功能多，而是解决具体问题快——比如改完 HTML 不用手动刷新、跳转 @/api 路径失败、写 React 组件还要反复查文档。
Live Server 启动本地服务但页面不自动刷新？
常见现象是点击 Go Live 后浏览器打开，但改了 index.html 内容，页面没反应。这不是插件坏了，而是默认只监听 .html 文件，对 .css 或 .js 修改不触发重载。
- 确保你修改的是当前被服务托管的根 HTML 文件（比如
index.html），而不是某个嵌入的script外部文件 - 在 VSCode 设置里搜
liveServer.settings.CustomBrowser，设为"chrome"或"default"，避免用系统默认非 Chromium 内核浏览器导致 HMR 失效 - 如果用了构建工具（如 Vite），别用 Live Server——它不处理模块热更新，直接上
vite preview更靠谱
Vue 项目里 @/components/xxx.vue 点不了跳转？
这是路径别名未被 VSCode 识别的典型表现，Ctrl + 左键 悬停时无响应，报错信息通常是 Unable to open 'xxx.vue': File not found。
- 装插件
Alias Node Module Resolver或Vue Alias Skip，后者更轻量专用于 Vue - 在
jsconfig.json或tsconfig.json中确认已配置"compilerOptions.baseUrl"和"paths"，例如：{"compilerOptions": {"baseUrl": "./", "paths": {"@/*": ["src/*"]}}} - 重启 VSCode，不是重载窗口——必须彻底关闭再打开，否则别名缓存不刷新
写 React 组件总要手动 import React 和写 export？
重复写 import React from 'react' 或 export default function Xxx() 是早期习惯，现在早该交给插件接管。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 装
ES7+ React/Redux/React-Native snippets，输入rfc+Tab直接生成函数组件骨架，cc生成类组件，imp补全 import 语句 - 注意：如果用了 TypeScript，优先选
Typescript React Code Snippets，它生成的是.tsx适配语法，比如自动加Props类型占位符 - 别让多个 snippet 插件共存——它们快捷键可能冲突，比如两个插件都绑了
rfc，VSCode 会随机生效一个
代码格式一团乱，团队提交老被 ESLint 报错？
不是规则太严，是你本地没跑 eslint --fix，或 Prettier 和 ESLint 规则打架。
- 装
ESLint和Prettier两个插件，再装eslint-config-prettier（npm 包），它专门关掉和 Prettier 冲突的规则 - VSCode 设置里开
editor.formatOnSave，并设editor.defaultFormatter为esbenp.prettier-vscode - 关键一步：在项目根目录加
.eslintignore，把node_modules/、dist/、build/删掉——否则每次保存都扫这些目录，卡顿明显
插件不是越多越好，装完一个就得验证它是否真解决了你手头那个“正在卡住”的问题；否则只是给启动时间加负担，还容易互相干扰。
