live server端口冲突时应修改项目级.vscode/settings.json，写入"liveserver.settings.port": 3000（避免与vite等工具冲突可选8080或4200），该配置仅对当前工作区生效。
Live Server端口冲突时怎么改配置
默认端口 5500 被占用是高频问题，不是重启插件或重装就能解决的。Live Server 会自动跳到下一个可用端口，但有时你明确需要固定端口（比如配合代理、CI 测试或团队约定），就得手动干预。
- 在项目根目录新建
.vscode/settings.json（不是用户级设置），写入：{ "liveServer.settings.port": 3000 } - 如果项目已有
package.json启动脚本（如"start": "vite"），避免和 Vite 的3000冲突，建议选8080或4200 -
liveServer.settings.NoBrowser设为true可禁用自动打开浏览器——调试 API 时很有用，否则每次保存都弹窗干扰 - 注意：该配置只对当前工作区生效，多根工作区下每个文件夹需单独配
ESLint 和 Prettier 一起用为什么还报红？
不是装上就完事。ESLint 和 Prettier 默认规则有重叠甚至冲突（比如分号、引号、空格），不协调就会一边标错一边格式化，编辑器反复“打架”。
- 必须安装
eslint-config-prettier并在.eslintrc.js中extends它，关掉所有和格式相关的 ESLint 规则 -
settings.json里要指定格式化器优先级："editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true
- 如果用 TypeScript，额外加
eslint-plugin-react-hooks和@typescript-eslint/eslint-plugin，否则useEffect依赖数组警告不会出现 - 别在用户设置里全局启用
eslint.validate，应只对javascript、typescript、javascriptreact等语言生效
Vue/React 项目里 Volar 和 TypeScript 插件怎么共存
Volar 是 Vue 3 的官方语言支持，但它和 VSCode 自带的 TypeScript 插件会抢 .vue 文件的语法控制权，导致类型提示失效或跳转错乱。
- 禁用 VSCode 内置的
TypeScript and JavaScript Language Features插件（不是卸载），仅保留 Volar 提供的 TS 支持 - 确保
tsconfig.json中包含"include": ["src/**/*"]，否则 Volar 找不到组件类型定义 - React 项目不用 Volar，但要注意
ESLint规则集必须含plugin:react/recommended，否则jsx语法不被识别 - 如果同时开发 Vue 和 React 子项目，用多根工作区，并在各自文件夹下配独立
.vscode/settings.json，避免插件互相污染
Auto Rename Tag 为什么有时不生效
它只监听 html、vue、jsx 等模板类文件，对纯 .js 或 .ts 里的 JSX 字符串完全无反应——这是设计限制，不是 bug。
- 检查当前文件语言模式是否正确：右下角状态栏显示的是
HTML还是Plain Text？点开手动切到HTML或Vue HTML - 若在 Vue 单文件组件中失效，确认
Vue.volar已启用，且没被其他 Vue 插件（如旧版 Vetur）禁用 - 它不处理动态标签名，比如
或<component :is="name"></component>，这类只能靠 ESLint 的vue/no-unused-components类规则辅助 - 重命名时按
Tab键比直接回车更可靠，尤其在嵌套较深的结构里
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
