前端开发必备VSCode插件进阶用法-VSCode-PHP中文网

prettier 保存后未自动格式化是因 vscode 默认关闭 formatonsave 且可能被其他插件抢占 formatter，需启用 editor.formatonsave 并设 defaultformatter 为 esbenp.prettier-vscode，同时解决 eslint 冲突、vue 块处理、volar 类型支持及 path intellisense 别名映射等问题。

前端开发必备vscode插件进阶用法

为什么 Prettier 保存后没自动格式化？

不是插件没装好，而是关键配置项没打开或冲突了。VSCode 默认不启用保存时格式化，必须手动开启，且容易被其他格式化插件抢占默认 formatter。

"editor.formatOnSave" 必须设为 true，否则按 Ctrl+S 不触发任何格式化
"editor.defaultFormatter" 要明确指定为 esbenp.prettier-vscode，避免 ESLint 或 Beautify 插件抢走控制权
若项目根目录存在 .prettierrc 或 prettier.config.js，优先级高于 VSCode 设置，改配置前先确认文件是否存在
Vue 文件中 <script></script> 和 <template></template> 块可能被 Volar 或 ESLint 干预，建议在 settings.json 中加："prettier.vueIndentScriptAndStyle": true

ESLint 和 Prettier 冲突报红怎么办？

常见现象是代码被 Prettier 格式化后，ESLint 立即标红“semi missing”或“quotes mismatch”，本质是两者规则打架，不是谁错了，而是没协同。

PigX UI 前端开发

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

下载

安装 eslint-config-prettier 并在 .eslintrc.js 的 extends 末尾加入 'prettier'，它会关闭所有与 Prettier 冲突的 ESLint 规则
不要同时启用 eslint.autoFixOnSave 和 editor.formatOnSave，否则保存时两次格式化，光标乱跳、代码错位
推荐只开 editor.formatOnSave（交给 Prettier），再用 eslint.enable 保持错误提示，但关掉 ESLint 的自动修复
检查 settings.json 是否有 "eslint.formatEnable": true —— 这个选项已废弃，留着反而导致不可预期行为

Volar 在 Vue3 + TS 项目里跳转不到 defineProps 类型？

不是插件失效，而是 Volar 默认不启用 TS 类型支持，尤其在 defineProps 使用泛型或运行时声明时，需要显式开启类型推导。

确保项目根目录有 tsconfig.json，且包含 "compilerOptions": { "types": ["volar"] }（Volar 1.10+ 推荐）
在 settings.json 中启用："volar.takeOverMode": false（避免接管全部 TS 语言服务），并确认 "volar.autoImportCompletion": true
如果用 defineProps() 这种泛型写法，TS 版本需 ≥ 5.0；低于此版本请改用运行时声明：defineProps({ name: String })
重启 TS Server：命令面板输入 TypeScript: Restart TS server，Volar 依赖它提供类型信息

Path Intellisense 提示路径但 import 后报 Module not found？

插件只是补全路径字符串，不校验模块解析逻辑。路径看着对，实际 Webpack/Vite 没配别名或解析规则，运行时照样崩。

检查 vite.config.ts 或 webpack.config.js 中是否正确定义了 resolve.alias，比如 @: path.resolve(__dirname, 'src')
Path Intellisense 默认不识别 ~ 别名，需在设置中添加："path-intellisense.mappings": { "~": "${workspaceFolder}/src" }
TS 项目还需同步更新 tsconfig.json 的 "compilerOptions.paths"，否则 TS 类型检查仍会报错
注意大小写：Windows 下路径补全不敏感，但 Linux/macOS 部署时大小写敏感，补全后手动核对真实文件名