前端开发必备VSCode插件深度使用指南-VSCode-PHP中文网

live server 页面空白或404主因是未以文件夹打开项目、缺少index.html、路径含中文/空格或端口冲突；eslint与prettier需配置解耦规则避免冲突；path intellisense须手动映射别名路径。

前端开发必备vscode插件深度使用指南

Live Server、ESLint、Prettier 这三个插件不配好，你写的 HTML/JS 代码基本等于裸奔——没热更新、没错误拦截、格式全靠手抠。

常见现象是点击右下角 Go Live 按钮后浏览器打开空白页，地址栏显示 http://127.0.0.1:5500/ 但报 404，或者路径里多出一层文件夹名。

必须确保当前打开的是**文件夹**（File → Open Folder），而不是单个 HTML 文件；单文件模式下 Live Server 不识别上下文根路径
检查项目根目录下是否有 index.html；没有时它不会自动 fallback 到你正在编辑的文件，而是返回 404
如果用了自定义端口（比如设为 3000），确认没被其他进程占用；可临时改回 0（随机端口）快速验证
遇到跨域请求失败（如 fetch API 报 CORS），不是插件问题——Live Server 本身不带代理功能，得换 webpack-dev-server 或加 http-proxy-middleware

典型表现：保存后代码被 Prettier 自动加了分号，但 ESLint 规则设的是 semi: ["error", "never"]，于是立刻标红。

PigX UI 前端开发

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

下载

根本原因是两个工具规则冲突，不能靠“谁先执行”解决，必须在配置层解耦
在 .eslintrc.js 中明确禁用所有格式类规则：extends: ["airbnb", "prettier"]，且确保已安装 eslint-config-prettier
VSCode 设置里关掉 editor.formatOnSave（如果用 ESLint 自带 fix），或只留 editor.defaultFormatter 设为 esbenp.prettier-vscode，二者选其一
别在 package.json 的 scripts 里混用 eslint --fix 和 prettier --write，顺序错一次就可能覆盖对方结果

写了 import Button from '@/components/Button.vue'，Ctrl+点击却提示 “No definition found”，但项目运行完全正常。

Path Intellisense 默认不读 jsconfig.json 或 tsconfig.json 的 paths 配置，得手动开启
在 VSCode 设置中搜索 path-intellisense.mappings，点“Edit in settings.json”，填入：
```
{
  "path-intellisense.mappings": {
    "@": "${workspaceFolder}/src"
  }
}
```
如果项目用 Vite，且 vite.config.ts 里有 resolve.alias，Path Intellisense 不认这个——它只认自己配置或 jsconfig.json 的 compilerOptions.baseUrl + paths
重启 VSCode 才生效；改完配置不重启，插件缓存会继续按旧路径解析