VSCode 前端开发环境真正需要的插件，不是装得越多越好，而是选对几个关键插件，就能解决 80% 的日常卡点——比如改完 HTML/CSS 不刷新、标签改漏一个、颜色值记不清、import 体积过大却浑然不觉。
Live Server 启动后页面空白或 404
这是新手最常遇到的问题：右键点击 index.html → “Open with Live Server”，浏览器打开却是空白页或 Cannot GET / 错误。
- 根本原因不是插件没装好，而是当前工作区没打开“包含
index.html的文件夹”——Live Server 只能从文件夹根路径启动服务，不能单独打开单个 HTML 文件运行 - 必须通过
File → Open Folder打开整个项目目录，而不是双击文件直接打开 - 如果入口文件不是
index.html（比如叫app.html），需在.vscode/settings.json中显式配置："liveServer.settings.CustomBrowser": "chrome"和"liveServer.settings.root": "./"，否则默认只认index.html - 注意：某些旧版 Live Server 插件在 VSCode 1.85+ 中会因权限策略报错，建议直接安装最新版（作者名是
Rick Wen）
Quokka.js 显示 “No active editor” 或不实时计算
按下 Ctrl+Shift+P 输入 Quokka: Start on Current File 却提示无编辑器，或写完 const a = 1 + 2 右侧没出现 // → 3。
- Quokka 只支持
.js、.ts、.jsx、.tsx文件——它不会在.html或.vue里生效 - 确保当前文件已保存（未保存的临时文件不被 Quokka 识别）
- 若用 TypeScript 项目，需确认工作区已安装
typescript包（全局 or 本地），否则会静默失败 - 不要和 Code Runner 混用：Code Runner 是一次性执行，Quokka 是持续监听；两者同时启用时，Quokka 的实时反馈可能被覆盖
Prettier 自动格式化失效或破坏 Vue 模板缩进
明明勾选了 format on save，但保存后 JS 没变样，或者 .vue 文件里的 <template> 缩进全乱了。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- Prettier 默认不处理
.vue文件——需额外安装Prettier Vue插件（作者名esbenp），或在settings.json中加配置："prettier.vueIndentScriptAndStyle": true - 如果同时装了 ESLint，且启用了
eslint.format.enable，Prettier 和 ESLint 规则冲突会导致格式化被跳过；推荐统一用ESLint + prettier插件，并设"editor.formatOnSave": false，改用eslint.format作为唯一格式化入口 - 别忽略
.prettierrc配置文件的存在：没有它时 Prettier 用默认规则（如单引号、无分号），跟团队规范不一致时，格式化反而引入新问题
Color Highlight / Color Info 点击色值没反应
把鼠标悬停在 #ff6b6b 或 rgb(255, 107, 107) 上，没弹出色块预览，也没显示 HEX/RGB 转换值。
- 这两个插件只识别标准 CSS 语法中的颜色声明，不支持内联 style 字符串（如
<div style="color: #ff6b6b">）或 JS 中的字符串拼接色值 - 确保语言模式正确：VSCode 右下角显示的是
CSS或Less或SCSS，而不是Plain Text；HTML 中的<style>块需有type="text/css"才能触发 - Color Info 更轻量，但只支持 HEX/RGB/HSL；Color Highlight 功能更强（可点击跳转到调色板），但占用更多内存——长期开着多个大项目时容易拖慢响应
插件不是越多越强，关键是每个都得清楚它在哪起作用、在哪失效、以及失效时你该看哪一行提示。比如 Live Server 的 404 不是网络问题，Quokka 的静默不是崩溃而是文件类型不匹配——这些边界条件，恰恰是调试效率的分水岭。
