Live Server 启动后页面不刷新或 Go Live 按钮没反应，根本原因不是插件损坏，而是它仅监听 .html、.htm、.xhtml 等静态文件保存事件，对 .vue、.jsx 或 dist 目录下构建产物默认不生效；必须确保打开的是根目录下已保存的 index.html，右键选择 Open with Live Server，而非仅点状态栏 Go Live。

Live Server 启动后页面不刷新，Go Live 按钮没反应

根本原因不是插件坏了，而是它只监听 .html、.htm、.svelte 等静态文件的保存事件，对 .vue、.jsx 或构建产物（如 dist/index.html）默认不生效。

实操建议：

立即学习“前端免费学习笔记（深入）”；

PigX UI 前端开发

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

下载

• 确认当前打开的是根目录下的 index.html，而不是构建后的文件或框架模板文件
• 右键点击 HTML 文件 → 选择 Open with Live Server，不要只点底部状态栏的 Go Live
• 若用 Vue/React 项目，改用 npm run dev 启动官方开发服务器，Live Server 不适合替代 webpack/vite
• 检查设置中是否误启用了 "liveServer.settings.donotShowInfoMsg": true，导致启动失败无提示

ESLint 报错但 Ctrl+S 不自动修复

ESLint 插件本身不负责格式化，只检测问题；自动修复需明确配置规则可修复性 + 绑定到保存动作。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 在项目根目录添加 .eslintrc.js，确保包含 "fixable" 类规则（如 'no-console': ['warn', { allow: ['warn', 'error'] }]）
• VSCode 设置中启用："editor.codeActionsOnSave": { "source.fixAll.eslint": true }
• 禁用与其他格式化工具（如 Prettier）的冲突：安装 eslint-config-prettier 并在 extends 中最后引入
• 首次运行时可能提示“找不到 ESLint”，需在项目内执行 npm install eslint --save-dev

Prettier 格式化后引号/分号/换行和团队不一致

根本问题在于 Prettier 的配置未落地到项目级，VSCode 用户设置会覆盖项目配置，多人协作时极易错乱。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 项目根目录必须存在 .prettierrc（JSON/YAML/JS 均可），内容如：{"semi": false, "singleQuote": true, "tabWidth": 2}
• VSCode 设置中关闭全局格式化偏好："editor.defaultFormatter" 设为 "esbenp.prettier-vscode"，但不要设 "prettier.semi" 这类具体参数
• 加 .prettierignore 排除 node_modules/、dist/、build/，避免大文件卡顿
• CI 流程中加入 npx prettier --check . 防止漏提交格式问题

路径别名（如 @/components）无法 Ctrl+Click 跳转

VSCode 默认不理解构建工具定义的别名，跳转失效是常态，不是插件没装对。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 前端项目必须配 jsconfig.json（JS）或 tsconfig.json（TS），含 "baseUrl" 和 "paths"
• 例如 Vue 项目："paths": { "@/*": ["src/*"] }，且 "baseUrl": "./"
• 装 Path Intellisense 插件仅补全路径，不解决跳转；真正支持跳转的是 VSCode 自身的 TS/JS 语言服务
• 修改配置后必须重启 VSCode 或执行命令面板中的 Developer: Reload Window

路径别名跳转和 ESLint 规则生效，都依赖项目级配置文件真实存在且语法正确——这点最容易被跳过，一出问题就怀疑插件，其实只是 jsconfig.json 少了个逗号，或 .eslintrc.js 导出对象写成了函数。