前端开发者必须掌握的VSCode插件设置-VSCode-PHP中文网

eslint 和 prettier 冲突时，需让 eslint 退让格式职责：一是在 .eslintrc.js 的 extends 中加入 'prettier' 关闭格式规则；二是安装兼容版本的 eslint-config-prettier；三是禁用 vscode 内置 js/ts 校验，避免绕过 eslint 报错。

前端开发者必须掌握的vscode插件设置

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></script> 做 TS 支持，模板里 v-model、props 类型推导全失效 —— 这不是插件没装好，是没开混合模式。

必须在项目根目录的 .vscode/settings.json 里加：

{
  "vue.experimental.templateCompilerOptions": {
    "mode": "strict"
  },
  "volar.uses": ["vue", "typescript"],
  "volar.hybridMode": true
}

注意两点：

不要写在全局 settings.json 里，只放项目级配置，否则会影响其他非 Vue 项目
开启后需重启 VSCode 或重新加载窗口（Ctrl+Shift+P → Developer: Reload Window），否则 defineProps 的类型提示不会生效

路径补全为什么 `@/components` 不提示，但 `./` 可以

这是 Path Intellisense 没读到别名配置的典型表现。它本身不解析 jsconfig.json 或 tsconfig.json，得手动告诉它 alias 映射关系。

PigX UI 前端开发

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

下载

在项目级 .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（随机端口）或其它空闲值