前端开发工程师的VSCode插件核心配置-VSCode-PHP中文网

eslint + prettier 自动修复失效的根本原因是规则冲突或 vscode 未设 prettier 为默认格式化器，需配置 "editor.defaultformatter": "esbenp.prettier-vscode"、关闭 ts 自带校验、安装并启用 eslint-config-prettier、vue3 项目添加 prettier.vueindentscriptandstyle: true。

前端开发工程师的vscode插件核心配置

ESLint + Prettier 自动修复失效怎么办

常见现象是保存后代码没格式化，或者 eslint --fix 不生效。根本原因通常是两者规则冲突，或 VSCode 没把 Prettier 设为默认格式化工具。

必须在 settings.json 中明确指定："editor.defaultFormatter": "esbenp.prettier-vscode"
关闭 TypeScript 自带校验："javascript.validate.enable": false 和 "typescript.validate.enable": false，否则会和 ESLint 报错打架
安装 eslint-config-prettier 并在 .eslintrc.js 的 extends 末尾加上它，专门用来禁用所有和 Prettier 冲突的规则
Vue3 项目要额外加 "prettier.vueIndentScriptAndStyle": true，不然 <script></script> 里的缩进会错乱

Volar 在 Vue3 单文件组件里不提示 props 怎么办

不是插件没装，而是 VSCode 默认没启用 Vue 语言服务的“混合模式”（hybrid mode），导致模板和脚本部分解析割裂。

PigX UI 前端开发

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

下载

必须在项目级 .vscode/settings.json 中写："vue.experimental.enableVolarForVue2": false（确保不误启 Vetur）
启用 hybrid mode："volar.takeOverMode": true 或配合 "volar.hybridMode": true（取决于 Volar 版本）
如果用了 defineProps 泛型写法，确保 tsconfig.json 中有 "compilerOptions": { "skipLibCheck": true }，否则类型推导卡住
重启 TS Server：按 Ctrl+Shift+P → 输入 Restart TS server，不能只 reload window

路径补全（Path Intellisense）找不到 node_modules 里的包

默认只扫描当前工作区根目录下的 node_modules，但 monorepo 或 lerna 项目中依赖常在上级目录，或用了 pnpm 的硬链接结构。

在 settings.json 中加配置："path-intellisense.mappings": { "~": "${workspaceFolder}/src", "@": "${workspaceFolder}/src" }
对 pnpm 项目，需显式告诉插件去哪找模块："path-intellisense.includePackages": true，并确保 pnpm store path 被正确识别（必要时手动设 "path-intellisense.packageManager": "pnpm"）
若用别名（如 @/components），Webpack/Vite 别名配置必须和插件映射一致，否则补全能出、运行时报错

Live Server 端口被占用或无法局域网访问

默认端口 5500 经常冲突，且新版本 Live Server 默认禁用外部访问，手机调试连不上。

在 .vscode/settings.json 中配："liveServer.settings.port": 3000，避开常用端口
开启局域网访问："liveServer.settings.AdvanceCustomBrowserCmdLine": ["--host=0.0.0.0"]（Chrome）或直接改 "liveServer.settings.CustomBrowser": "chrome"
更稳妥的做法是关掉 Live Server，改用 Vite 的 vite preview 或 Webpack Dev Server，它们原生支持 host/port 配置且更贴近真实环境

真实项目里最常被忽略的，是插件之间的启动顺序和语言服务器接管权。比如 Volar 和 TypeScript 插件同时活跃时，谁负责 .vue 文件的诊断，得靠 "volar.takeOverMode" 显式声明；而 ESLint 和 Prettier 的执行时机，也取决于 editor.formatOnSave 和 editor.codeActionsOnSave 的组合逻辑——差一个配置项，就可能保存后代码变丑或者报错不消失。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！