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> 后自动补 <code>
；改
<section></section> 为
<article></article> 时，闭合标签同步更新，不手动改漏
Vue 或 React 项目必须选对语法支持插件
Vue 2 和 Vue 3 的语法差异大，React 的 JSX 类型检查依赖插件深度集成，装错或装重会直接导致语法高亮失效、ref 类型推导丢失、setup 中的 defineProps 提示不工作。
PigX UI 前端开发
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
下载
- Vue 项目：二选一，别共存
— Vue 2 用 Vetur；Vue 3（尤其含 <script setup></script>）必须用 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 —— 这些低效动作早该被替代。
-
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 错误，光标停在那行就看到红色波浪线+悬浮提示，不打断编码流
插件不是越多越好，真正卡住开发节奏的，往往就是那三四类：补全不准、跳转失灵、格式混乱、错误不显。装之前先问自己——你昨天在哪一行代码上多花了两分钟？那个点，就是插件该发力的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
