ESLint 和 Prettier 冲突时，需让 ESLint 退让格式职责：一是在 .eslintrc.js 的 extends 中加入 'prettier' 关闭格式规则；二是安装兼容版本的 eslint-config-prettier；三是禁用 VSCode 内置 JS/TS 校验，避免绕过 ESLint 报错。
ESLint 和 Prettier 冲突时怎么配才不报红
直接后果是：保存后代码被格式化，但 ESLint 仍标红 no-unused-vars 或 semi 等规则 —— 本质是两者规则打架。关键不是“都装上”，而是让 ESLint 退一步，只管逻辑和质量，把格式交给 Prettier。
必须做三件事：
- 在
.eslintrc.js中extends加上'prettier'（即['eslint:recommended', 'prettier']），它会自动关闭所有与格式相关的 ESLint 规则 - 安装
eslint-config-prettier并确保版本与 ESLint 兼容（比如 ESLint v8.x 对应eslint-config-prettier@9.x） - VSCode 的
settings.json里禁用 TS/JS 自带校验："javascript.validate.enable": false和"typescript.validate.enable": false，否则它会绕过 ESLint 自己报错
Vue3 项目里 Volar 怎么启用 hybridMode 才不丢提示
默认情况下，Volar 在单文件组件中只对 <script setup> 做 TS 支持，模板里 v-model、props 类型推导全失效 —— 这不是插件没装好，是没开混合模式。
必须在项目根目录的 .vscode/settings.json 里加：
立即学习“前端免费学习笔记（深入）”；
{
"vue.experimental.templateCompilerOptions": {
"mode": "strict"
},
"volar.uses": ["vue", "typescript"],
"volar.hybridMode": true
}
注意两点：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 不要写在全局
settings.json里，只放项目级配置，否则会影响其他非 Vue 项目 - 开启后需重启 VSCode 或重新加载窗口（
Ctrl+Shift+P→Developer: Reload Window），否则defineProps的类型提示不会生效
路径补全为什么 @/components 不提示，但 ./ 可以
这是 Path Intellisense 没读到别名配置的典型表现。它本身不解析 jsconfig.json 或 tsconfig.json，得手动告诉它 alias 映射关系。
在项目级 .vscode/settings.json 中加：
{
"path-intellisense.mappings": {
"@": "${workspaceFolder}/src",
"@assets": "${workspaceFolder}/src/assets",
"@components": "${workspaceFolder}/src/components"
}
}
常见坑：
-
jsconfig.json里的"paths"配置只是给 TS 编译器用的，VSCode 插件看不到 - 路径值必须是绝对路径或相对
${workspaceFolder}，不能用../或环境变量 - 如果用了 Vite 别名（如
resolve.alias），Path Intellisense不会自动同步，仍要手动填
Live Server 启动后页面不自动刷新怎么办
不是插件坏了，大概率是监听范围没覆盖到你改的文件类型，或者端口被占用了。
检查这三项：
- 确认修改的是
.html、.css、.js文件 —— Live Server 默认只监听这三类，改.vue或.ts不触发刷新 - 打开 VSCode 设置，搜
liveServer.settings.CustomBrowser，设成"chrome"或"default"；再搜liveServer.settings.AdvanceCustomBrowserCmdLine，清空该字段（有值会干扰启动） - 终端执行
lsof -i :5500（macOS）或netstat -ano | findstr :5500（Windows）看端口是否被占；若被占，在设置里改liveServer.settings.Port为0（随机端口）或其它空闲值
复杂点在于：Vue/React 项目不该用 Live Server 跑整个应用，它没 HMR，只适合纯静态页预览。真要热更新，得配 Vite 或 Webpack Dev Server。
