live server 启动失败或端口被占用时，应先检查端口冲突（如5500被占）并修改liveserver.settings.port为可用端口（如8080），同时确认项目根目录已正确打开，避免单文件启动导致路径解析异常。
Live Server 启动失败或端口被占用怎么办
常见现象是点击 Go Live 按钮后无反应，或浏览器打开空白页并提示 ERR_CONNECTION_REFUSED。根本原因通常是端口冲突（比如本地已有服务占用了默认的 5500）或项目根目录未正确识别。
实操建议如下：
- 手动修改端口：在 VSCode 设置中搜索
liveServer.settings.port，设为0（自动分配）或一个明确未被占用的值（如8080、3000） - 确认工作区根目录：右键点击项目文件夹 →
Reveal in Explorer→ 确保当前打开的是整个项目文件夹，而非单个 HTML 文件（否则 Live Server 无法正确解析相对路径） - 禁用冲突插件：某些代理类或调试类插件（如
Debugger for Chrome的旧版配置）可能劫持本地请求，临时禁用后测试
ESLint 和 Prettier 规则打架怎么解
典型表现是保存代码后格式反复“抖动”——Prettier 把引号改成单引号，ESLint 又报错要求双引号；或者 Prettier 自动换行，ESLint 认为超出长度限制。这不是插件问题，而是规则未对齐。
关键动作是让 ESLint 主动让位：
- 安装
eslint-config-prettier并在.eslintrc.js的extends数组末尾加入：'prettier' - 确保 VSCode 的默认 formatter 是
esbenp.prettier-vscode，且关闭editor.formatOnSave对 ESLint 的启用（只留 Prettier 负责格式） - 不要在
.prettierrc和.eslintrc.js中重复定义同一类规则（如semi、quotes），Prettier 管格式，ESLint 管逻辑
Vue/React 组件内跳转失效或补全不准
比如在 <mycomponent></mycomponent> 上 Ctrl+Click 打不开定义，或 v-model 属性不提示。这通常不是插件没装，而是语言服务未激活或路径解析异常。
优先检查这几处：
- 确认已安装对应官方插件：
Volar（Vue 3）、ES7+ React/Redux/React-Native snippets（React），且未与旧版Vetur共存（冲突时禁用 Vetur） - Vue 项目需在根目录存在
tsconfig.json或jsconfig.json，且"compilerOptions.baseUrl"和"paths"配置正确，否则别名路径（如@/components）无法解析 - React 项目若用 TypeScript，确保
node_modules/.bin/tsc --noEmit能正常运行，否则 TS Server 会降级为 JS 模式，丢失类型感知
路径自动补全（Path Autocomplete）找不到子目录
输入 import xxx from './ 后弹出的路径列表里缺了刚新建的 utils 文件夹，或补全后路径多了一层 src/src/。本质是插件依赖 VSCode 的文件索引，而索引有延迟或范围偏差。
解决办法很直接：
- 触发重新索引：按
Ctrl+Shift+P→ 输入Developer: Reload Window强制刷新 - 检查工作区设置：在
settings.json中确认"path-autocomplete.excludePath"没误删了"src/**"这类通配，也别把"node_modules"写成"node_modules/**"（后者会屏蔽整个目录树） - 避免嵌套工作区：如果项目里开了多个文件夹（如同时打开
frontend和backend），Path Autocomplete 默认只扫描最外层，建议单项目单窗口
Volar 需要 TypeScript 语言服务器稳定运行，而 TypeScript 又依赖 jsconfig.json 存在且合法。某个环节断掉，表面看是跳转失效，根子却在配置文件的一处逗号缺失。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
