Live Server实现保存即刷新，ESLint+Prettier统一代码规范，Volar/Vetur按Vue版本正确选用，Path Intellisense与Auto Import提升路径导入效率，所有插件需配合对应配置文件生效。
前端项目在 VSCode 里跑不起来、跳转不了、改了不刷新、代码一团乱？不是你写得慢，是插件没配对。
Live Server：改完 HTML/CSS/JS 自动刷新浏览器
静态页面开发时，手动刷新浏览器是最低效的等待。Live Server 启动后会监听文件变化，保存即重载，连端口冲突都帮你兜底。
- 默认端口
5500，可在.vscode/settings.json中设"liveServer.settings.port": 3000或设为0启用随机端口 - 不支持热模块替换（HMR），只做全页刷新；Vue/React 项目建议用框架自带 dev server，别依赖它
- 右下角点击
Go Live按钮启动，或右键 HTML 文件选择Open with Live Server - 注意：如果打开的是
file://协议路径（比如直接双击打开），它不会生效——必须通过 VSCode 内部打开并启动
ESLint + Prettier：代码风格和错误检查不能靠人眼盯
团队协作里最耗神的不是逻辑 bug，而是「你用单引号我用双引号」「缩进两个空格还是四个」这类无意义争论。ESLint 检规则，Prettier 统一格式，两者合体才稳。
- 装插件
ESLint和Prettier - Code formatter，再加eslint-config-prettier禁用 ESLint 中与 Prettier 冲突的规则 - 项目根目录必须有
.eslintrc.js或.eslintrc.cjs，否则插件静默失效 - VSCode 设置中启用
"editor.formatOnSave": true和"editor.defaultFormatter": "esbenp.prettier-vscode" - 常见坑：
import路径报错但实际能运行？大概率是 ESLint 没读到jsconfig.json或tsconfig.json中的baseUrl和paths
Volar / Vetur：Vue 项目别装错、别共存
Vue 2 和 Vue 3 的语法解析器完全不同，Volar 是 Vue 3 官方推荐，Vetur 是 Vue 2 生态主力。混装会导致语法高亮错乱、<script setup></script> 无法识别、类型提示消失。
立即学习“前端免费学习笔记（深入）”；
- Vue 3 项目：只装
Volar，禁用Vetur（VSCode 会提示“已禁用冲突扩展”） - Vue 2 项目：只装
Vetur，确保vetur.validation.template开启，否则v-for错误不报 - Volar 需要配合
vue-tsc做类型检查，命令行运行vue-tsc --noEmit才能暴露 TS 类型问题 - 如果你用
@/别名但组件跳转失效，不是插件问题，是缺jsconfig.json中的"compilerOptions.baseUrl"配置
Path Intellisense + Auto Import：别再手敲 import 路径
写 import { useUser } from '../../../hooks/useUser' 这种路径，既容易出错又浪费时间。Path Intellisense 补全路径，Auto Import（如 Auto Import 或 ES7+ React/Redux/React-Native snippets）自动补全符号。
- Path Intellisense 默认支持
@/别名，但需项目有jsconfig.json或tsconfig.json，且含"baseUrl": "src" - 别名跳转失效？确认插件
@ext:lihuiwang.vue-alias-skip已安装并启用（Vue 项目尤其需要） - Auto Import 类插件可能和 ESLint 的
import/no-unresolved规则打架，若频繁报红，检查settings.json是否漏配"import/parsers": { "espree": [".js", ".jsx"] } - 路径补全后按
Tab插入，不是Enter——这是很多人卡住的第一步
插件不是越多越好，而是每个都要知道它在哪起作用、在哪会失效。真正卡住开发的，往往不是功能缺失，而是某个插件在后台悄悄关闭了关键检查，或者配置项被覆盖却没人发现。
