Prettier与ESLint职责不同：Prettier仅格式化代码，ESLint负责检测错误并部分修复；单独使用任一工具会导致格式冲突、CI失败或风格混乱，必须协同配置。
为什么 Prettier + ESLint 不能只装一个
只装 Prettier 会格式化代码但不报错；只装 ESLint 能发现潜在 bug 却不自动修复格式。两者职责不同，强行用其中一个替代另一个，会导致：保存时格式反复被覆盖、CI 检查失败、团队提交风格混乱。
实操建议：
立即学习“前端免费学习笔记（深入）”；
PigX UI 前端开发
下载
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规则集
Vue 3 项目别再用 Vetur，改用 Volar 的真实原因
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"
Live Server 启动后页面不刷新？先看这三点
不是插件坏了，而是常见配置或使用姿势出错。典型现象：改了 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 依赖文件系统结构
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本身不解析这些别名
