eslint报缩进错误是因与prettier职责重叠，应禁用eslint格式规则：安装eslint-config-prettier并置于extends末尾，关闭indent/quotes/semi等规则，vscode设prettier为默认格式化器且启用formatonsave。

ESLint 和 Prettier 冲突时怎么配才不报红

ESLint 报 Expected indentation of 2 spaces but found 4 这类错误，大概率不是规则写错了，而是 ESLint 和 Prettier 在“谁管格式”这件事上打架了。Prettier 负责统一缩进、引号、分号；ESLint 的 indent、quotes、semi 等规则如果也开着，就会重复校验，导致冲突。

正确做法是让 ESLint 只管逻辑和潜在错误（比如 no-unused-vars、react-hooks/exhaustive-deps），格式全交给 Prettier：

• 安装 eslint-config-prettier，并在 .eslintrc.js 的 extends 中把它放在最后，覆盖掉所有与格式相关的 ESLint 规则
• 禁用 VSCode 的 eslint.autoFixOnSave，改用 editor.formatOnSave + prettier 作为默认 formatter
• 确保 prettier 插件版本和项目中 prettier 依赖版本一致（比如都是 3.3.3），否则 .prettierrc 里写的 tabWidth: 2 可能被忽略

Vue 项目该装 Volar 还是 Vetur

Vue 3 项目必须用 Volar，Vetur 已停止维护，且对 <script setup></script>、组合式 API 类型推导支持极差。装错会导致 ref 类型丢失、defineProps 提示失效、甚至整个 .vue 文件失去语法高亮。

常见误操作：

• 同时启用 Volar 和 Vetur：VSCode 会随机启用其中一个，行为不可预测，建议卸载 Vetur 后重启编辑器
• 没关掉 Volar 的 Take Over 模式：在 Vue 项目根目录打开命令面板（Ctrl+Shift+P），运行 Volar: Switch Hosting Mode，选 Take Over Mode 才能获得完整 TS 支持
• TSX 或纯 JS 项目里误启 Volar：它会干扰非 Vue 文件的类型检查，可在工作区设置里加 "volar.disableWhenNoVue": true

路径别名（@/）点不开跳转怎么办

写了 import utils from '@/utils' 却无法 Ctrl+Click 跳转，不是插件没装，而是 VSCode 根本不知道 @ 指向哪。Path Intellisense、Volar、TypeScript 三者都依赖同一份路径映射配置，但各自读取方式不同。

PigX UI 前端开发

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

下载

必须同时满足三项：

• 在 jsconfig.json 或 tsconfig.json 里声明 compilerOptions.baseUrl 和 paths（例如 "@/*": ["src/*"]）
• 确保 jsconfig.json 存在于项目根目录（哪怕只是空对象 {}），否则 TS 语言服务不启动，Volar 就没法解析别名
• VSCode 设置里打开 "typescript.preferences.importModuleSpecifier": "relative"，否则跳转会生成绝对路径，破坏原有别名结构

Live Server 修改 HTML 后不自动刷新

点击 Go Live 启动服务后，改完 index.html 却没反应，大概率是 Live Server 默认只监听 .html 和 .htm，而你改的是 .vue 或构建产物（如 dist/index.html）。

解决方法取决于你的真实场景：

• 开发阶段直接编辑单页 HTML：在设置里搜 liveServer.settings.fileExt，把 ["html", "htm", "php", "md"] 扩展成包含 "vue"（但注意：Live Server 不解析 Vue 模板，只做静态托管）
• Vue/React 项目调试构建后页面：不要用 Live Server，改用框架官方 dev server（npm run serve 或 vite dev），它自带 HMR 和 sourcemap
• 需要监听 CSS/JS 变更并刷新：在 settings.json 加 "liveServer.settings.AdvanceCustomBrowserCmdLine": ["--disable-web-security"] 并配合 livereload 插件，但更推荐直接换用 Browser Sync CLI

真正麻烦的不是插件装不装，而是每个插件背后都绑着一套配置链路——tsconfig.json 影响 Volar，jsconfig.json 影响路径跳转，.eslintrc 和 .prettierrc 的加载顺序决定谁说了算。漏掉其中一环，表面看着插件都亮了，实际功能全断连。

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