ESLint 配置不与 Prettier 冲突的关键是：安装 eslint-config-prettier 插件，在 .eslintrc.js 的 extends 中将其置于末尾（如 ['airbnb', 'prettier']），并设 VSCode 默认格式化器为 Prettier，禁用 ESLint 自动格式化。
ESLint 怎么配才不和 Prettier 冲突
直接装 ESLint 和 Prettier 插件，保存时大概率会互相打架：一个加了分号，另一个又删掉；一个要求双引号，另一个强制单引号。根本原因是两者都试图改代码格式，但规则没对齐。
- 必须在项目里装
eslint-config-prettier，它专门用来关掉 ESLint 里所有和格式相关的规则 -
.eslintrc.js中extends要把prettier放最后，比如：['airbnb', 'plugin:react/recommended', 'prettier'] - VSCode 的
settings.json里设"editor.defaultFormatter": "esbenp.prettier-vscode"，别让 ESLint 插件抢着格式化 - 运行
npx eslint --fix时加--ext .js,.jsx,.ts,.tsx显式指定文件类型，避免扫到 JSON 或配置文件
Path Intellisense 为什么补全不了 @/components
写了 import Button from '@/components/Button.vue'，但输入 @/ 后没提示，不是插件坏了，而是它压根不知道 @ 指向哪。VSCode 默认只认相对路径和 node_modules，alias 是项目自己定义的。
- 必须在项目根目录建
jsconfig.json（TS 项目用tsconfig.json），写清楚baseUrl和paths - 示例配置：
{"compilerOptions":{"baseUrl":".","paths":{"@/*":["src/*"]}}} - 改完配置后要重启 VSCode，或者按
Ctrl+Shift+P→ 输入Restart TS Server刷新语言服务 - 如果用了 Vite，还要确认
vite.config.ts里resolve.alias和jsconfig.json里的路径一致，否则跳转会失败
Auto Rename Tag 修改 div 后闭合标签没变
改了 ，但
- 打开 VSCode 设置，搜
auto rename tag，把Auto Rename Tag: Enable Auto Rename Tag打开 - 关键一步：点右下角语言模式（如 “HTML”），改成
Vue或JavaScript React，插件才会监听对应语法 - Vue 单文件组件中，模板部分默认是
vue-html模式，需在设置里加一行："files.associations": {"*.vue": "vue"} - React 项目若用 TypeScript，确保
files.associations包含{"*.tsx": "typescriptreact"}
Live Server 修改 HTML 后浏览器不自动刷新
点了右下角 Go Live，改完保存，浏览器页面却没更新——不是插件失效，而是它只监听当前工作区根目录下的变更，子目录或符号链接容易漏掉。
- 确认当前打开的是整个项目文件夹（File → Open Folder），不是单个 HTML 文件
- 检查
.vscode/settings.json是否有冲突配置，比如"liveServer.settings.donotShowInfoMsg": true关掉了提示，实际也没启动成功 - 端口被占时，插件不会报错，只会静默失败；手动设端口：
"liveServer.settings.port": 8080 - 如果项目用了 Webpack/Vite，别依赖 Live Server 做 HMR，它只适合纯静态页；复杂项目该用框架自带的 dev server
真正卡住人的从来不是插件装没装，而是每个插件背后那一两行没配对的配置、没选对的语言模式、没重启的服务。多花三十秒查文档里的“Requirements”小节，比反复重装插件快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
