VSCode前端开发必备插件包括：HTML/CSS/JS补全类（HTML CSS Support、Path Intellisense、Auto Close/Rename Tag）、框架语法支持（Vue用Volar、React用ES7+ snippets）、调试预览类（Live Server、REST Client、Quokka.js）、代码质量类（ESLint+Prettier、Import Cost、Error Lens）。
VSCode 做前端开发，不装这几种插件，等于裸写代码——补全漏、跳转卡、格式乱、错误看不见，调试靠猜。
HTML/CSS/JS 基础补全不能只靠默认
VSCode 自带的 HTML 和 JS 补全很基础，比如写 div 不提示 class 属性，写 style="..." 时完全没 CSS 类名提示，import 路径输错也无反馈。这些不是“可有可无”，而是日常高频痛点。
-
HTML CSS Support：在class=""或id=""里按Ctrl+Space就能列出当前项目所有 CSS 类名（包括@import进来的），不用翻文件 -
Path Intellisense：写import utils from './utils'时，输入./就自动列出同级目录文件，支持多级嵌套，避免手敲路径拼错 -
Auto Close Tag和Auto Rename Tag：写<div>后自动补</div>；改<section>为<article>时，闭合标签同步更新，不手动改漏
Vue 或 React 项目必须选对语法支持插件
Vue 2 和 Vue 3 的语法差异大，React 的 JSX 类型检查依赖插件深度集成，装错或装重会直接导致语法高亮失效、ref 类型推导丢失、setup 中的 defineProps 提示不工作。
- Vue 项目：二选一，别共存
— Vue 2 用Vetur；Vue 3（尤其含<script setup>）必须用Volar（官方推荐）
—Volar需关闭Vetur，否则编辑器报错“Cannot find name ‘defineProps’” - React 项目：
ES7+ React/Redux/GraphQL/React-Native snippets是刚需
— 输入rfc→ 生成函数组件骨架，带PropTypes占位；usc→ 生成自定义 Hook 模板
— 配合React Developer Tools插件，Ctrl+Click组件名可跳转到定义，而非只跳到node_modules里的声明文件
调试和本地预览不能靠手动刷新
写完一个 index.html，双击打开是 file:// 协议，Ajax 请求跨域、ES Module 加载失败；改一行 CSS，还得切浏览器按 F5 —— 这些低效动作早该被替代。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
-
Live Server：右键 HTML 文件点 “Open with Live Server”，自动起http://127.0.0.1:5500，保存即刷新
— 注意：端口冲突时，在.vscode/settings.json里加"liveServer.settings.port": 3000，别改全局设置 -
REST Client：写接口调试不用切 Postman
— 新建api.http，写GET http://localhost:3000/users，Ctrl+Alt+R直接发请求，响应体折叠/格式化/复制全支持 -
Quokka.js：临时验证 JS 逻辑，比如数组去重、正则匹配效果
— 在 JS 文件里写const arr = [1,1,2]; arr.filter((v,i) => arr.indexOf(v) === i)，结果实时显示在行尾，不跑整个项目
代码质量与协作规范得靠插件落地
团队里有人用分号、有人不用，有人写 console.log 忘删，有人 import 了但没用 —— 这些不是风格问题，是上线后可能出错的隐患，靠人盯不现实，得靠工具链卡住。
-
ESLint+Prettier组合：ESLint查逻辑错误和潜在 bug（如未定义变量），Prettier统一换行缩进引号
— 关键配置项："editor.formatOnSave": true，"editor.defaultFormatter": "esbenp.prettier-vscode"，再装eslint-config-prettier关掉和 Prettier 冲突的规则 -
Import Cost：写import { debounce } from 'lodash'时，右侧自动显示压缩后体积（如~3.2 kB）
— 对比import debounce from 'lodash/debounce'显示~1.1 kB，立刻知道是否值得做精细化引入 -
Error Lens：把 ESLint / TypeScript 报错直接标在行尾，不用点问题面板翻找
— 比如React Hook "useState" is called conditionally错误，光标停在那行就看到红色波浪线+悬浮提示，不打断编码流
插件不是越多越好，真正卡住开发节奏的，往往就是那三四类：补全不准、跳转失灵、格式混乱、错误不显。装之前先问自己——你昨天在哪一行代码上多花了两分钟？那个点，就是插件该发力的地方。
