前端开发环境配置VSCode插件实战-VSCode-PHP中文网

eslint与prettier不报红的关键是职责分离：在.eslintrc.cjs中禁用semi、quotes、indent等格式规则，启用"prettier/prettier": "error"，并将vscode默认格式化器设为prettier，同时关闭eslint自动修复格式功能。

前端开发环境配置vscode插件实战

装完 ESLint 和 Prettier 后，editor.formatOnSave 一开，保存就格式错乱或报 ESLint 错误——本质是两者规则打架。Prettier 负责“怎么排版”，ESLint 负责“写得对不对”，不能让 ESLint 去管缩进、引号这种格式问题。

在 .eslintrc.cjs 里禁用所有格式类规则："prettier/prettier": "error" + "rules": { "no-unused-vars": "warn", "semi": "off", "quotes": "off", "indent": "off" }
确保 settings.json 中只设一个默认格式化器："editor.defaultFormatter": "esbenp.prettier-vscode"，且关闭 ESLint 自动修复格式："editor.codeActionsOnSave": { "source.fixAll.eslint": true } 仅保留 "source.fixAll": true 即可
Volar（Vue 3）用户注意："[vue]": { "editor.defaultFormatter": "Vue.volar" } 必须加，否则 .vue 文件的 template 部分不会走 Prettier

改完 HTML/CSS 点保存，浏览器没反应——不是插件坏了，而是启动方式或路径不对。

PigX UI 前端开发

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

下载

必须右键点击的是 index.html（或你项目的入口 HTML），而不是文件夹或 JS/CSS 文件；状态栏“Go Live”按钮只对当前打开的 HTML 文件生效
确认项目根目录下有 index.html；如果入口是 src/index.html，Live Server 默认不会识别子目录，需手动右键该文件启动
若用 Vite/Vue/React 等构建工具，别用 Live Server 启动开发服务器——它只适合纯静态页；对应场景应运行 npm run dev，Live Server 此时反而会冲突端口

装了 Volar，但 <mycomponent :prop="xxx"></mycomponent> 里按 Ctrl+Space 没提示，甚至类型推导失效——大概率是 TypeScript 语言服务没接上。

确认项目中有 tsconfig.json 或 jsconfig.json，且 "compilerOptions": { "allowJs": true, "checkJs": false }（JS 项目）或 "moduleResolution": "bundler"（TS 项目）已正确配置
VS Code 状态栏左下角检查当前语言模式是不是 Vue（不是 HTML 或 JavaScript）；如果不是，点击切换，或在 .vue 文件顶部加 // @ts-nocheck 临时绕过校验
重启 TS 服务：Ctrl+Shift+P → “TypeScript: Restart TS server”；Volar 依赖 TS 服务提供语义支持，服务卡住就全废

在 .http 文件里写好 GET http://localhost:3000/api/users，点“Send Request”却返回 404 或跨域错误——这不是 REST Client 的锅，是后端没配好。

404：先确认后端服务真在跑，执行 node server.js 或 npm run dev，终端看到 Server running at http://localhost:3000 才算启动成功
CORS 错误（Access-Control-Allow-Origin）：Express 后端必须显式启用，加 npm install cors，然后在 server.js 里 const cors = require('cors'); app.use(cors());
REST Client 不自动带 Cookie 或认证头，如需登录态测试，得手动加：Authorization: Bearer xxx 或 Cookie: connect.sid=xxx