VSCode 插件需按需安装并精准配置：ESLint 与 Prettier 冲突时应装 eslint-config-prettier 并禁用 ESLint 自动修复；Vue3 项目须卸载 Vetur、安装完整版 Volar 并启用 tsconfig.json/jsconfig.json；路径别名需在 jsconfig.json 中正确配置 baseUrl 和 paths 并重载窗口；Live Server 仅服务 HTML 文件，应右键打开或配合真实开发服务器使用。
VSCode 插件不是装得越多越好，而是要解决你当前写代码时卡住的具体问题——比如改完 HTML 标签忘了闭合、import 路径手敲出错、保存后样式还是乱的、console.log 忘删被 QA 抓到。下面这几种情况，对应插件和配置方式直接可用。
ESLint + Prettier 冲突导致保存后代码越格式越错
这是新手最常遇到的“越修越崩”场景：装了两个插件，eslint 报 semi 错误，prettier 又强制加/删分号，结果保存一次格式全乱。
- 根本原因是规则重叠，不是插件本身有问题
- 必须在项目里安装
eslint-config-prettier，并在.eslintrc.js的extends末尾加上'prettier' -
settings.json中禁用 ESLint 的自动修复：把"eslint.autoFixOnSave"设为false，只让 Prettier 负责格式，ESLint 只做报错 - 验证方式：删掉一行末尾分号，保存——应只触发 ESLint 报错（红色波浪线），不自动补分号；再手动运行
Format Document（Shift+Alt+F），才由 Prettier 统一处理
Vue3 单文件组件里 ref 变量没类型提示、props 没校验
用 setup 写 Vue3 时，如果还靠旧版 Vetur，defineProps 返回的类型基本是 any，IDE 不知道 props.msg 是字符串还是对象，补全和跳转全失效。
- 必须卸载
Vetur，装Volar（注意不是Volar Server单独扩展，要装带 Language Features 的完整版） - 确保项目有
tsconfig.json或jsconfig.json，且"compilerOptions": { "allowJs": true }已启用（JS 项目也需要） - 如果
defineProps用泛型写法（如defineProps()），Volar 才能正确推导；用runtime形式（defineProps({ msg: String })）会丢失类型 - 重启 VSCode 后，鼠标悬停
props.msg应显示完整类型，Ctrl+Click可跳转到defineProps声明处
路径别名（如 @/components）点不进、补全不了
Webpack/Vite 配了 alias，但 VSCode 里 import Button from '@/components/Button.vue' 按 Ctrl+Click 没反应，Path Intellisense 也补不出 @/ 下的目录。
立即学习“前端免费学习笔记（深入）”；
- 光装
Path Intellisense不够，它只管补全，不管跳转 - 必须配
jsconfig.json（TS 项目用tsconfig.json），且baseUrl和paths要跟构建工具一致 - 示例配置（Vite 默认 alias）：
{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } } - 配完后执行命令面板里的
Developer: Reload Window，不是重启编辑器，否则配置不生效 - 验证：在任意
.ts文件里输入import "@/，应立刻弹出src/下所有子目录
Live Server 启动后页面空白、控制台报 net::ERR_CONNECTION_REFUSED
点 Go Live 按钮后浏览器打开一个空页，地址栏是 http://127.0.0.1:5500/xxx.html，F12 看 Network 标签全是失败请求。
- 这不是插件坏了，而是当前文件没被识别为可服务的入口——Live Server 默认只服务
.html文件，且要求该文件在项目根目录或子目录下，不能是临时文件或未保存的 Untitled-1 - 如果文件在深层嵌套目录（如
src/pages/index.html），启动后实际服务的是http://127.0.0.1:5500/src/pages/index.html，但页面里写的script src="./main.js"会尝试加载http://127.0.0.1:5500/main.js（404） - 解决方法：右键点击 HTML 文件 →
Open with Live Server，而不是点右下角全局按钮；或者在settings.json里设"liveServer.settings.CustomBrowser": "chrome"并确认 Chrome 已安装 - 更稳的方式：用
npm run dev启动真实开发服务器（Vite/Webpack），Live Server 只用于纯静态小 demo
插件本身不会自动适配你的项目结构，每个都要手动对齐配置项、重启时机、文件位置。最容易忽略的是：改完 jsconfig.json 忘 reload window，换 Volar 没卸载 Vetur，关了 ESLint 自动修复却没开 Prettier 的 format on save——这些细节卡住的不是功能，是你接下来十分钟的调试节奏。
