VSCode中辅助前端开发的强大插件组-VSCode-PHP中文网

vscode前端开发需精准配置插件与文件：eslint+prettier必须协同并用eslint-config-prettier消歧；jsconfig.json/tsconfig.json须正确配置baseurl/paths以支持路径跳转；live server仅适用于静态页，vue/react项目须用对应cli启动；volar等插件依赖项目级识别与配套工具链。

vscode中辅助前端开发的强大插件组

VSCode 本身不带前端开发支持，装对插件才能让编辑器真正“活”起来——不是所有插件都值得装，关键看它能不能解决你正在写的代码里真实存在的问题。

ESLint + Prettier 组合为什么必须一起配

单独装 ESLint 会报格式错误但不自动修；只装 Prettier 又不管逻辑问题（比如 no-unused-vars 或 react/prop-types）。两者冲突点集中在分号、引号、括号换行等格式规则上。

必须用 eslint-config-prettier 关闭 Prettier 覆盖的 ESLint 规则，否则保存时反复打架
prettier 的 printWidth 设为 80，tabWidth 设为 2，和主流团队保持一致
在 .eslintrc.js 中 extends 顺序不能错：先写框架规则（如 plugin:vue/vue3-recommended），再写 prettier，否则会被覆盖
VSCode 设置里关掉 editor.formatOnSave，改用 ESLint 的 eslint.format.enable，避免格式化和校验脱节

路径跳转失效时优先检查 jsconfig.json / tsconfig.json

按住 Ctrl 点击 @/components/Button.vue 没反应？不是插件没装，而是别名没被语言服务识别。

PigX UI 前端开发

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

下载

Path Intellisense 只补全路径，不负责跳转；真正驱动跳转的是 VSCode 内置的 TS/JS 语言服务
必须在项目根目录有 jsconfig.json（JS 项目）或 tsconfig.json（TS 项目），且含 compilerOptions.baseUrl 和 paths
如果用了 Vite，确认 vite.config.ts 里的 resolve.alias 和 tsconfig.json 里的 paths 完全一致，大小写、斜杠方向都不能错
改完配置后要重启 VSCode 窗口，仅重载窗口不够

Live Server 不能替代真实开发服务器

它只是静态文件服务器，不处理模块解析、环境变量、代理转发——开 index.html 没问题，但跑 Vue/React 项目会直接白屏或报 Failed to load module script。

Vue CLI / Vite / Create React App 项目，一律用对应 CLI 的 npm run dev 启动，而不是点 Go Live
Live Server 唯一可靠场景：纯 HTML/CSS/JS 静态页、原型稿预览、Markdown 导出的 HTML
端口冲突不是主要风险，真正的坑是它不读 vite.config.ts 里的 server.proxy，调 API 必挂
如真需本地服务，建议直接用 npx serve -s dist（build 后）或 npx http-server -p 8080

Vue/React 插件不是装了就生效

官方插件（如 Vue Language Features (Volar)）依赖项目类型识别——如果打开的是单个 .vue 文件而非整个项目，语法高亮和跳转会降级为纯文本模式。

Volar 必须配合 vue-tsc 全局安装，否则 template 中的表达式类型检查不工作
React 开发者别装旧版 ES7+ React/Redux/GraphQL/React-Native snippets，它和 TypeScript 的 JSX 类型推导冲突，导致 useState 返回值类型丢失
组件自动导入（如 vue.components.autoImport）只在 script setup 语法下生效，Options API 需手动 import
插件启用后，右下角状态栏要显示 “Vue (Volar)” 或 “TypeScript React”，否则说明语言模式没切对

插件越多，越容易掩盖配置问题。真正卡住开发的，往往不是缺某个炫酷功能，而是 jsconfig.json 少了一行 paths，或是 .eslintrc.js 里多了一个逗号。