端口冲突时在VS Code设置中修改liveServer.settings.port为可用端口（如3000）或设为0随机分配；Prettier与ESLint冲突需禁用vetur格式化、明确默认formatter、添加eslint-config-prettier；路径别名跳转失效需配置jsconfig.json或tsconfig.json的baseUrl和paths并重启VS Code；Vue模板变量悬停无效需按Vue 2/Vue 3分别配置vetur或volar及对应选项。

Live Server 启动本地服务时端口冲突怎么办

默认端口 5500 经常被其他进程（比如旧的 Node 服务、Docker 容器、甚至 Chrome 的某个调试实例）占着，导致点击 Go Live 按钮后报错 address already in use。

直接改配置就行，不用卸载重装：

• 打开 VS Code 设置（Ctrl+,），搜索 liveServer.settings.port
• 填入一个空闲端口，比如 3000 或 8080；填 0 表示每次随机分配
• 如果项目已有本地 dev server（如 npm run dev），别开 Live Server —— 它只适合纯静态 HTML/CSS/JS 原型，不是替代 webpack/vite 的

Prettier 和 ESLint 同时启用时格式化失效

常见现象：保存后代码没变，或者格式化结果和预期不一致，控制台还可能弹出 Prettier is not available 或 ESLint couldn't auto-fix。

根本原因是两者规则打架，尤其在 Vue 项目里，vetur 和 prettier 默认抢占 formatter 权限：

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

PigX UI 前端开发

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

下载

• 禁用 vetur 的格式化功能：在设置中搜 vetur.format.enable，设为 false
• 确保 editor.defaultFormatter 明确设为 esbenp.prettier-vscode
• 安装 eslint-config-prettier 并在 .eslintrc.js 的 extends 末尾加上 'prettier'，关掉所有和格式相关的 ESLint 规则
• Vue 3 项目优先用 volar 替代 vetur，它和 Prettier 兼容性更好

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

写 import Button from '@/components/Button.vue' 时，按住 Ctrl 点击路径没反应，是前端日常最烦人的“失联”时刻之一。

这不是插件问题，而是 VS Code 不知道 @ 指向哪。解决方法分两步：

• 在项目根目录的 jsconfig.json（JS 项目）或 tsconfig.json（TS 项目）里加 compilerOptions.baseUrl 和 paths 配置，例如：

  { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } }

• 重启 VS Code —— 这步不能跳，配置不会热更新
• 如果用了 Webpack 别名但没配 tsconfig/jsconfig，path-intellisense 插件能补全路径，但跳转仍无效；必须靠语言服务本身识别

Vue 模板里变量悬停不显示定义位置

template 中写 {{ userInfo.name }}，鼠标悬停没提示，点不了跳转，说明模板层和 script 层的类型/符号关联断了。

Vue 2 和 Vue 3 处理方式不同，不能混用工具链：

• Vue 2 项目：确保装了 vetur，且 vetur.experimental.templateInterpolationService 设为 true
• Vue 3 + Composition API：必须用 volar（不是 volar 的旧版 volar-beta），并禁用 vetur
• 若用 TypeScript，检查 shims-vue.d.ts 是否存在且正确声明了 defineComponent 类型
• 哪怕插件装了，如果项目没开 TS 支持（vue-tsc --noEmit 没跑过），Volar 也无法建立完整语义链接

真正卡住人的从来不是插件装多少，而是每个插件背后对应的配置文件、语言服务、构建工具之间的对齐关系。少一个 tsconfig.json 字段，或多一个 vetur 开关，就足以让整个智能提示系统静默。