Live Server必须用于纯静态前端开发，它通过监听HTML及其直接引用的资源实现保存即刷新，但不支持Vue/React项目、API调用、SCSS/TS源文件或构建产物，且与Webpack/Vite开发服务器冲突。
VSCode插件不是“锦上添花”的装饰，而是前端开发中绕不开的生产力基础设施——没装 Live Server，改一行 HTML 就得手动刷新；没配 ESLint + Prettier，团队代码风格三天内就会失控；不启用 Volar（Vue）或 ES7+ React/Redux/React-Native snippets，写组件连基本结构都要手敲。
Live Server 为什么必须替代手动刷新？
它解决的不是“能不能看效果”，而是“改完保存后，浏览器是否已同步最新状态”。很多新手误以为只要右下角显示“Go Live”就万事大吉，结果改了 CSS 却没生效，原因通常是：
-
Live Server默认只监听当前打开的 HTML 文件及其直接引用的资源（如<link rel="stylesheet">或<script src>），但不会自动追踪@import的 CSS、动态加载的 JS 或构建产物目录（如dist/） - 如果项目用了 Webpack/Vite，
Live Server会和开发服务器冲突——它不该用于已启动 dev server 的项目，仅适合纯静态页或原型验证 - 端口被占用时，
Live Server默认静默失败，不会报错；需在设置里显式指定"liveServer.settings.port": 0启用随机端口
ESLint + Prettier 组合配置最容易踩的三个坑
二者协同工作的前提是规则不打架。常见错误是直接启用两个插件却没做隔离，导致保存时格式反复震荡（Prettier 格式化后 ESLint 又报错，再修复又触发 Prettier）。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 必须安装
eslint-config-prettier并在.eslintrc.js的extends末尾加入它，关闭所有与格式相关的 ESLint 规则 -
editor.formatOnSave应设为true，但仅对prettier生效；ESLint 的自动修复（eslint.enable+eslint.autoFixOnSave）已在 VSCode 1.8x 后废弃，改用保存时运行eslint --fix的任务或集成到 format provider 链中 - 若项目含 TypeScript，
eslint-plugin-react和@typescript-eslint/eslint-plugin的规则优先级要明确：TS 规则应覆盖 JS 规则，否则any类型检查可能被忽略
Vue/React 专用插件不是“装了就行”，关键在语言服务器匹配
比如 Vue 开发者装了 Vetur 却发现 <script setup> 无类型提示，根本原因是 Vetur 已停止维护，无法支持 Vue 3.3+ 的响应式语法糖和编译宏。此时必须切换至 Volar，且注意：
立即学习“前端免费学习笔记（深入）”；
-
Volar需禁用Vetur（VSCode 会提示冲突），否则两者同时激活会导致诊断重复或失效 - 必须在工作区根目录下创建
tsconfig.json或jsconfig.json，否则Volar的类型推导无法定位defineProps/defineEmits的类型信息 - React 场景下，
ES7+ React/Redux/React-Native snippets插件的快捷键（如rfc生成函数组件）依赖于文件后缀识别：只有.tsx或.jsx文件才触发，.js文件默认不启用
真正卡住人的从来不是插件装不装得上，而是每个插件背后隐含的语言服务、文件作用域、配置加载顺序这些看不见的链路——比如 prettier 的配置可能被 .prettierrc、package.json、settings.json 三层覆盖，而其中任意一层路径解析错误，都会让格式化静默失效。
