前端开发必备VSCode插件个性化设置-VSCode-PHP中文网

eslint与prettier冲突时，需同时安装eslint-config-prettier和eslint-plugin-prettier，将prettier置于eslintrc.js的extends末尾以覆盖格式规则，并在vscode中禁用editor.formatonsave、启用eslint.format.enable及eslint.run为onsave或ontype。

前端开发必备vscode插件个性化设置

ESLint + Prettier 冲突时怎么配才不报错

ESLint 和 Prettier 同时启用时，eslint-plugin-prettier 和 eslint-config-prettier 缺一不可，否则会反复提示格式错误或自动修复失效。

必须在项目根目录安装： npm install --save-dev eslint-config-prettier eslint-plugin-prettier
.eslintrc.js 中的 extends 要把 prettier 放最后，覆盖所有风格规则
VSCode 设置里禁用 editor.formatOnSave（交给 ESLint 插件接管），同时开启 eslint.format.enable 和 eslint.run 为 onType 或 onSave
若用 TypeScript，额外加 @typescript-eslint/eslint-plugin，且 parserOptions.project 必须指向 tsconfig.json 路径，否则 no-unused-vars 等检查会漏判

Vue3 项目里 Volar 怎么替代 Vetur 不翻车

Volar 是 Vue3 官方推荐的 Language Features 插件，但直接卸载 Vetur 后，.vue 文件可能变回纯文本——这不是插件没装好，而是 VSCode 没切换语言模式。

PigX UI 前端开发

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

下载

打开任意 .vue 文件，右下角点击当前语言标识（比如 “Vue” 或 “HTML”），手动选 “Vue”
确认设置里 vetur.grammar.customBlocks 已清空，否则 Volar 会退化为兼容模式，失去 setup 语法支持
如果 defineProps 类型推导不生效，检查 compilerOptions.types 是否包含 "@vue/runtime-core"，且 tsconfig.json 中 compilerOptions.vueCompilerOptions 存在（Volar 0.45+ 需要）
别装 “Vetur” 和 “Volar” 共存——它们会抢 languageId 控制权，导致模板高亮错乱、跳转失效

路径别名（如 @/src）点不了跳转？三个关键配置点

按住 Ctrl 点击 @/api/user 没反应，不是插件问题，而是 VSCode 没法把别名映射到真实路径。

项目根目录 jsconfig.json 或 tsconfig.json 必须有 compilerOptions.baseUrl 和 compilerOptions.paths，例如："@/*": ["src/*"]
VSCode 设置里确保 javascript.preferences.importModuleSpecifierEnding 设为 auto（非 index 或 js）
重启 TS Server：命令面板（Ctrl+Shift+P）搜 Restart TS Server，别只重开编辑器
如果用的是 vite.config.ts 里的 resolve.alias，它只对运行时生效，不影响编辑器跳转——必须靠 tsconfig.json 配置

Live Server 打开页面空白？常见断点在哪

点右下角 Go Live 后浏览器打开空白页，90% 是路径或 MIME 类型问题，和代码逻辑无关。

确认当前打开的是 .html 文件，而不是 .vue 或 .jsx ——Live Server 只服务静态文件
检查地址栏 URL 是否含 http://127.0.0.1:5500/xxx.html，如果是 file:/// 开头，说明没走 Live Server，是直接双击打开的
若引入了 ./src/main.js 但实际文件在 dist/main.js，路径 404 会导致白屏，控制台 Network 标签页看 status 即可确认
避免在 index.html 里写 type="module" 却没配 nomodule 回退，旧版 Live Server 不支持 ES Module 的 CORS 策略，会静默失败