live server端口冲突时，可在vscode设置中修改liveserver.settings.port为闲置端口（如3001）或设为0自动分配；需避免与vite等工具同目录运行，且其不支持api代理。
Live Server 保存即刷新，但端口冲突怎么解
默认端口 5500 经常和本地其他服务（比如 webpack-dev-server、Vite）撞车，导致启动失败或页面空白。别急着换插件，先改配置。
- 打开 VSCode 设置（
Ctrl+,），搜索liveServer.settings.port，填入一个空闲端口如3001 - 更稳妥的做法是设为
0，让插件自动分配可用端口 - 如果项目已用
localhost:3000跑着 Vite，Live Server 就别再开同一目录——它不识别 dev server 的热更新逻辑，会覆盖响应
注意：Live Server 只服务静态文件，不代理 API 请求。调试带接口的页面时，得另起后端或配代理规则，它本身不支持 proxy 配置。
ESLint + Prettier 协同工作，为什么还报格式错误
常见现象是保存后 ESLint 显示红波浪线，但 Format On Save 没生效，或者修复后又弹出新警告。根本原因不是插件没装，而是规则打架。
- 必须安装
eslint-config-prettier并在.eslintrc.js的extends末尾加上'prettier'，否则 ESLint 自带的格式规则（如semi）会和 Prettier 冲突 - Prettier 的
.prettierrc里别写"semi": false，除非团队真不用分号；否则 ESLint 的semi规则会反复报错 - VSCode 设置里关掉
editor.formatOnSave全局开关，只对 JS/TS/Vue 文件启用，避免 HTML 或 JSON 被误格式化
Path Intellisense 跳不到 @/components，alias 不生效
写了 import Button from '@/components/Button.vue'，Ctrl+点击却打不开文件，说明路径映射没被识别。
- 确认项目根目录有
jsconfig.json（JS 项目）或tsconfig.json（TS 项目），且含"baseUrl"和"paths"配置，例如：{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } } - VSCode 必须重启，或执行命令面板里的
Developer: Reload Window，否则新配置不加载 - 如果用的是 Vite，还要检查
vite.config.ts中resolve.alias是否与jsconfig.json一致，两者不同步会导致跳转和运行时行为不一致
Volar 比 Vetur 更适合 Vue 3，但 template 里类型提示没反应
装了 Volar，setup() 里变量有类型推导，但 <template></template> 里 {{ count }} 却没提示、也没错误标红——这不是插件问题，是 VSCode 默认关闭了“TypeScript 插件在 Vue 文件中启用”。
- 打开设置，搜
volar.implicitProjectConfig.checkJs，勾选它；再搜volar.enableProjects，确保为true - 如果项目用的是
defineComponent+ 选项式 API，Volar 默认不激活类型检查，得在tsconfig.json的compilerOptions.types加上"vue" - 禁用 Vetur！两个 Vue 插件共存会互相干扰，Volar 控制台会报
Cannot find module 'vue'类错误
路径跳转、模板类型提示、组件自动导入这些能力，依赖的是 Volar 启动的独立 TypeScript 语言服务，不是简单装插件就完事——它需要正确加载项目配置并接管 Vue 文件的语义解析。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
