先装ESLint、Prettier、Auto Rename Tag、Path Intellisense、Live Server这5个核心插件，再按需添加；配置关键在于eslint-config-prettier关闭ESLint格式规则、jsconfig.json声明@别名、Live Server端口与host设置、Auto Rename Tag光标位置要求。
别堆插件，先装这 5 个：ESLint、Prettier、Auto Rename Tag、Path Intellisense、Live Server。其余插件按需加，否则反而拖慢编辑器启动和文件响应速度。
ESLint 和 Prettier 怎么配才不打架
单独开 ESLint 会报一堆引号、分号、空格类警告，但这些不是 bug；单独开 Prettier 又不报 undefined 变量、this 指向错误等真问题。两者规则重叠时会互相覆盖——比如 ESLint 的 indent 和 Prettier 的 tabWidth 冲突，保存时红波浪线一闪而过又消失。
-
eslint-config-prettier必须装，它专门关掉 ESLint 里所有和格式相关的规则 -
.eslintrc.js的extends里写['airbnb', 'prettier']，顺序不能反 -
settings.json中设"editor.defaultFormatter": "esbenp.prettier-vscode"，否则保存时格式化可能失效 - Vue3 项目额外加
plugin:vue/vue3-recommended，否则defineProps、v-model语法不被识别
Path Intellisense 为什么 @/components/xxx 跳不到文件
90% 不是插件问题，而是项目缺 jsconfig.json（TS 项目用 tsconfig.json）。VSCode 本身不理解 @ 是啥，得靠配置告诉它“@ 指向 src 目录”。
- 根目录必须有
jsconfig.json，内容至少含：{"compilerOptions": {"baseUrl": ".", "paths": {"@/*": ["src/*"]}}} - 插件只认
jsconfig.json或tsconfig.json，不读 Webpack/Vite 的resolve.alias - 用了其他别名（如
#utils）必须显式写进paths，否则补全和跳转都失效
Live Server 端口被占或局域网访问不了怎么办
默认端口 5500 经常被其他服务（比如本地 Node 服务、Docker 容器）静默占用，导致右键“Open with Live Server”没反应，也不报错。
立即学习“前端免费学习笔记（深入）”；
- 在设置中搜
liveServer.settings.port，改成未被占用的端口，比如3001 - 需要手机真机调试？设
liveServer.settings.host为0.0.0.0 - 改完设置后，务必关闭已打开的 Live Server 页面再重试，旧服务不会自动重启
Auto Rename Tag 在 Vue/JSX 里改标签为啥有时不生效
它不是全局监听光标位置，而是依赖光标是否落在起始标签内部。嵌套过深（比如 5 层 <div>）时，如果光标停在中间某层，它可能同步错闭合标签。
- 必须把光标停在要修改的开始标签内（比如
<div和>之间），再改标签名 - 对自闭合标签（
<img />、<input />）完全不处理——因为本来就没有结束部分 - 若和 Vetur/Volar 冲突（常见于 Vue SFC），优先禁用 Vetur，否则
<script setup>类型提示错乱
最易忽略的是路径配置和规则协同——插件装了但 jsconfig.json 缺失，或 ESLint/Prettier 规则没对齐，效果就直接归零。别急着装第 6 个插件，先把这 5 个的配置闭环跑通。
