前端开发者必备的VSCode插件精选指南-VSCode-PHP中文网

必须配置eslint-config-prettier以禁用eslint中与prettier冲突的格式规则，否则保存时会因分号、引号等样式反复覆盖导致“打架”；需将'prettier'置于.eslintrc.js的extends数组末尾，并明确eslint管逻辑检查、prettier管代码格式。

前端开发者必备的vscode插件精选指南

不关掉 ESLint 和 Prettier 的规则冲突，保存自动格式化时会反复“打架”——比如一个加了分号，另一个又删掉。这不是配置没生效，而是两者在互相覆盖。

安装 eslint-config-prettier 后，在 .eslintrc.js 的 extends 数组末尾加上 'prettier'，顺序不能错
别只依赖 VSCode 的 Format On Save：Prettier 负责格式，ESLint 负责逻辑检查，混用时必须明确分工
no-console、no-unused-vars 这类规则默认是 error 级别，CI 流水线里会直接 fail，建议先设为 warn 观察几天

光装插件不配 baseUrl 和 paths，alias 路径（如 @/components/Button）根本不会被识别，Ctrl+Click 会跳转失败。

PigX UI 前端开发

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

下载

jsconfig.json 必须放在项目根目录，且 compilerOptions.baseUrl 值不能是空字符串或相对路径
Vue 项目若用 Volar，还需确认 "types": ["volar"] 是否已加入 jsconfig.json，否则类型推导会断
路径补全失效时，先检查当前文件是否在 jsconfig.json 指定的 include 范围内（默认是 ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]）

Webpack/Vite 构建后，浏览器里的源码路径和本地文件对不上，断点打不中、变量看不到——不是插件坏了，是 source map 映射没写对。

常见错误写法："webpack:///./src/*": "${webRoot}/src/*" —— 少了 ./ 或多了一层 src 都会导致映射失败
Vue CLI 项目通常用："webpack:///src/*": "${webRoot}/src/*"；Vite 默认是 "*": "${webRoot}/*"
启动调试前务必确认 Chrome 已打开 DevTools，否则 VSCode 会卡在 “launching browser…”

这个设置只影响模板中的组件自动导入提示（比如输入 <mycomp> 回车就补全并插入 import），但 script setup 里的组合式 API（如 <code>ref、onMounted）不会自动加，得靠 unplugin-auto-import 配合。

vue.components.autoImport 是 Volar 的 UI 层功能，不影响实际编译；它不解决 Cannot find name 'ref' 这类报错
如果用了 defineProps 或 defineEmits，确保 TS 版本 ≥ 5.0，否则 Volar 无法正确推导类型
禁用 Vetur：两个 Vue 插件共存会导致语法高亮错乱、template 标签内属性提示消失

Volar 的 autoImport 功能容易被当成“全自动”，其实它只管模板侧；而 ESLint 和 Prettier 的协作边界、source map 路径映射的细微差别，才是日常卡住最多的地方。