前端开发项目实战VSCode插件推荐-VSCode-PHP中文网

prettier与eslint职责不同：prettier仅格式化代码，eslint负责检测错误并部分修复；单独使用任一工具会导致格式冲突、ci失败或风格混乱，必须协同配置。

前端开发项目实战vscode插件推荐

只装 Prettier 会格式化代码但不报错；只装 ESLint 能发现潜在 bug 却不自动修复格式。两者职责不同，强行用其中一个替代另一个，会导致：保存时格式反复被覆盖、CI 检查失败、团队提交风格混乱。

实操建议：

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

下载

必须同时安装 esbenp.prettier-vscode 和 dbaeumer.vscode-eslint
在 settings.json 中设 "editor.defaultFormatter": "esbenp.prettier-vscode"，并开启 "editor.formatOnSave": true
用 eslint-config-prettier 关闭 ESLint 与 Prettier 冲突的规则，否则保存时会“打架”
Vue/React 项目额外加装 plugin:vue/vue3-recommended 或 plugin:react/recommended 规则集

Vetur 在 Vue 3 + <script setup></script> 场景下会漏掉类型推导、无法跳转组件内 defineProps 类型、ref 响应式变量 hover 不显示类型。这不是配置问题，是架构限制。

实操建议：

卸载 Vetur，安装 Vue Language Features (Volar)
关闭 VSCode 内置的 TypeScript 插件对 .vue 文件的处理：设置里搜 "typescript.preferences.includePackageJsonAutoImports"，设为 "auto"；再搜 "typescript.suggest.autoImports"，关掉
确保项目有 volar.config.json 或 tsconfig.json 正确声明 "compilerOptions.types" 包含 @vue/runtime-core
如果 ref 提示仍不准，检查是否启用了 "vue.experimental.enableInlineTypeScriptInTemplate"

不是插件坏了，而是常见配置或使用姿势出错。典型现象：改了 index.html，浏览器没反应；或者改了 JS/CSS，但只刷新 HTML 部分。

实操建议：

确认当前打开的是 .html 文件（不是文件夹或 .js），只有活动编辑器为 HTML 时，底部状态栏才出现 Go Live 按钮
检查端口是否被占用：默认 5500，可在设置中搜 "liveServer.settings.port" 改成 0（随机）或其它空闲端口
若用 Webpack/Vite 等构建工具开发，Live Server 仅适用于纯静态 HTML 项目；它不会监听 dist 目录或 HMR，此时该用 vite preview 或 webpack serve

Path Intellisense 不是魔法，它靠扫描当前工作区根目录下的所有文件生成路径索引。如果项目用了软链接、monorepo 的 pnpm workspace、或源码不在工作区根目录下，就容易找不到路径。

实操建议：

确保 VSCode 打开的是项目根目录（不是子文件夹），否则插件看不到 src 或 components 目录
遇到 node_modules 或 dist 下路径不提示，可在设置里搜 "path-intellisense.excludePath" 加入 ["**/node_modules/**", "**/dist/**"]，避免干扰
TS 项目中 import 路径提示不准，优先检查 tsconfig.json 的 "baseUrl" 和 "paths" 是否配置正确，Path Intellisense 本身不解析这些别名