live server是vscode前端开发必备插件，提供http本地服务与保存即刷新功能；它默认监听html类文件变更触发全量重载，不支持css/js热更新或esm模块直接运行，需配合正确路径引用和端口配置。
VSCode 做前端开发，不装这 5 类插件，等于裸奔写代码——不是功能缺失，就是调试卡顿、跳转失效、格式混乱、协作扯皮。
Live Server：本地预览必须开的 HTTP 服务
没它，改完 HTML/CSS/JS 得手动刷新浏览器；有它，点一下 Go Live 就起一个带热更新的本地服务器。关键不是“能跑”，而是它默认监听文件变化并自动刷新（不是 HMR，是 full reload），对纯静态页或简单 demo 极其高效。
- 端口冲突时，在设置里搜
liveServer.settings.port改成0（随机）或具体数字，比如3000 - 不支持
import模块直接运行，遇到Failed to load module script错误，说明你该用http-server或 Vite 了 - 它不处理构建产物，
dist/目录下直接双击打开 HTML 仍会跨域，必须走 Live Server 启的服务路径
Prettier + ESLint：格式和校验不能只靠人眼
二者不是二选一，而是分工明确：Prettier 负责把代码“压平”成统一风格（缩进、引号、换行），ESLint 负责检查逻辑错误、潜在 bug 和团队规范（比如禁止 any、要求函数必须有返回值）。装错顺序或配置打架，保存时反而报错。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 务必安装
esbenp.prettier-vscode和dbaeumer.vscode-eslint两个官方扩展 - 在
settings.json中设"editor.defaultFormatter"为 Prettier，同时开启"editor.formatOnSave" - 加
eslint-config-prettier到项目依赖，并在.eslintrc.js的extends末尾加上它，否则 Prettier 和 ESLint 规则会互相覆盖
Volar（Vue 3）或 Vetur（Vue 2）：.vue 文件不亮就等于没语法支持
Vue 单文件组件不是普通 HTML+JS 拼凑，template、script、style 三块需要各自解析和联动。没 Volar/Vetur，ref() 类型推导失效、v-model 补全消失、defineProps 提示为空——你写的全是“黑盒代码”。
- Vue 3 项目必须用
Vue - Volar（而非 Vetur），Vetur 已停止维护且不兼容 Composition API 类型系统 - Volar 需要关闭 VSCode 内置的 TypeScript 插件（在扩展面板搜
TypeScript and JavaScript Language Features→ 禁用），否则类型提示会冲突 - 如果
Ctrl+Click点不进defineComponent或组件内部方法，大概率是 tsconfig.json 里没配"compilerOptions": { "types": ["volar"] }
Path Intellisense + Alias Mapper：别名路径跳转失效不是你的错
@/components/Button.vue 这种写法很常见，但 VSCode 默认不认识 @ 是什么。不解决，你就得手动复制路径、切到文件夹、再点开——每天浪费十几秒，一年就是两小时。
-
christian-kohler.path-intellisense提供路径自动补全，但不解决跳转；真正让Ctrl+Click生效的是lihuiwang.vue-alias-skip（Vue）或robertohuertasm.vscode-javascript-alias（React）这类别名映射插件 - 配置项必须和项目中
jsconfig.json或tsconfig.json的"compilerOptions.paths"完全一致，比如"@/*": ["src/*"]就得填{"@/*": ["src/*"]} - Webpack/Vite 别名配置在
vite.config.ts里？那插件不管用——插件只读tsconfig.json或jsconfig.json
插件不是越多越好，而是每个都得解决一个真实痛点。比如 Auto Rename Tag 看似小，但改一个 div 标签名却漏掉闭合标签，这种低级错误在没有它时每周至少发生一次；而 ESLint 如果没配好规则集，console.log 就会悄无声息地留在生产环境里——这些细节，比选哪个主题图标重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
