前端新手开箱即用的5个核心插件是live server、prettier、eslint、volar（vue3）或vetur（vue2）、path intellisense；它们分别解决实时刷新、代码格式统一、语法规范检查、vue文件智能提示、路径自动补全与别名跳转，且需按要求协同配置才能生效。
装完就用、不踩坑、不翻车——前端新手开箱即用的 5 个核心插件，不是“全都要”，而是“必须有”。
Live Server：改完 HTML/CSS/JS 自动刷新浏览器，别再手动 F5
它不是“打开文件”，而是起一个本地 HTTP 服务（http://localhost:5500），支持热重载。Open in Browser 只能静态打开 .html 文件，改完还得手动刷新，效率断层。
- 安装后右下角出现
Go Live按钮，点一下就启动；也可右键菜单选择 - 端口冲突？在
.vscode/settings.json里加一行："liveServer.settings.port": 3000 - 默认只监听当前文件夹，跨目录引用时注意路径是否相对正确（比如
../assets/style.css） - 不支持 HTTPS、不处理构建产物（如 Webpack 输出的
dist/），纯静态开发场景才直接用
Prettier + ESLint：代码格式和语法检查不能共存？得配对用
单独装 Prettier 会把 eslint 的规则覆盖掉，比如缩进、分号、引号风格，导致保存后报一堆 ESLint 警告。必须协同配置，而不是“谁装得晚听谁的”。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 先装两个插件：
esbenp.prettier-vscode和dbaeumer.vscode-eslint - 在
settings.json中设默认 formatter 为 Prettier："editor.defaultFormatter": "esbenp.prettier-vscode" - 关掉 ESLint 的自动修复（避免和 Prettier 冲突）：
"eslint.formatEnable": false - 加
eslint-config-prettier到项目依赖，并在.eslintrc.js里extends它，消除规则打架
Volar（Vue 3）或 Vetur（Vue 2）：.vue 文件没智能提示？大概率装错或没启用
Vue 3 项目装 Vetur 会失效，Vue 2 项目装 Volar 也识别不了 <script setup></script>。VS Code 不会自动选对，得手动禁用冲突插件。
- Vue 3 项目：装
Vue.volar，卸载或禁用octref.vetur - Vue 2 项目：装
octref.vetur，禁用 Volar（Volar 默认启用，需在插件页点击“禁用工作区”） - 重启 VS Code 后，打开
.vue文件，检查右下角状态栏是否显示 “Vue (Volar)” 或 “Vue (Vetur)” - 如果 template 里
v-model不提示，检查项目根目录是否有tsconfig.json或jsconfig.json，没有就建一个空的
Path Intellisense：@/components/Button.vue 点不了？路径别名跳转要配两处
光装插件不行，VS Code 默认不认识 @ 是 src/，也不懂 ~ 指向哪里。跳转失败不是插件问题，是配置缺位。
- 插件本身只负责补全，跳转能力靠 TypeScript/JS 语言服务，所以得配
jsconfig.json或tsconfig.json - 在
compilerOptions.baseUrl设为"."，再用paths映射别名："@/*": ["src/*"] - 若用的是 Vue CLI 或 Vite，默认已生成配置，但有时没生效——删掉
node_modules/.volar缓存目录再重启 - 别名路径在 import 语句里能补全、能跳转，但在
require()或动态import()字符串中不生效
真正卡住人的从来不是“该装什么”，而是“装了为什么没反应”。插件之间有依赖、有互斥、有配置耦合，漏掉任意一环，效果就归零。尤其 Volar/Vetur 切换、Prettier/ESLint 规则对齐、别名路径的双端配置——这些地方没调通，再多插件也是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
