前端开发环境必备VSCode插件安装向导-VSCode-PHP中文网

前端开发环境必备vscode插件安装向导

VSCode 前端开发环境真正需要的插件，不是装得越多越好，而是选对几个关键插件，就能解决 80% 的日常卡点——比如改完 HTML/CSS 不刷新、标签改漏一个、颜色值记不清、import 体积过大却浑然不觉。

这是新手最常遇到的问题：右键点击 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）

按下 Ctrl+Shift+P 输入 Quokka: Start on Current File 却提示无编辑器，或写完 const a = 1 + 2 右侧没出现 // → 3。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

明明勾选了 format on save，但保存后 JS 没变样，或者 .vue 文件里的 <template></template> 缩进全乱了。

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 用默认规则（如单引号、无分号），跟团队规范不一致时，格式化反而引入新问题

把鼠标悬停在 #ff6b6b 或 rgb(255, 107, 107) 上，没弹出色块预览，也没显示 HEX/RGB 转换值。

这两个插件只识别标准 CSS 语法中的颜色声明，不支持内联 style 字符串（如 <div style="color: #ff6b6b">）或 JS 中的字符串拼接色值 <li>确保语言模式正确：VSCode 右下角显示的是 <code>CSS 或 Less 或 SCSS，而不是 Plain Text；HTML 中的 <style></style> 块需有 type="text/css" 才能触发
Color Info 更轻量，但只支持 HEX/RGB/HSL；Color Highlight 功能更强（可点击跳转到调色板），但占用更多内存——长期开着多个大项目时容易拖慢响应

插件不是越多越强，关键是每个都得清楚它在哪起作用、在哪失效、以及失效时你该看哪一行提示。比如 Live Server 的 404 不是网络问题，Quokka 的静默不是崩溃而是文件类型不匹配——这些边界条件，恰恰是调试效率的分水岭。