vs code新手最需live server、path intellisense、error lens和better comments四款插件：live server实现html/css/js保存即刷新；path intellisense自动补全路径；error lens将报错信息直显代码行末；better comments用颜色图标区分注释类型。
新手在 VS Code 里最常卡住的不是语法，而是“我改了代码，怎么看不到效果”“这个报错在哪点开”“路径怎么写才不报错”——插件不是越多越好，而是要解决这三类具体问题。
让 HTML/CSS/JS 修改立即可见：Live Server
不用配本地环境、不装 Node、不敲命令，保存文件就自动刷新浏览器。它只监听 .html、.css、.js 文件，其他类型（比如 .md 或配置文件）改了不会触发刷新，避免误操作干扰。
- 安装后右键任意
.html文件 → “Open with Live Server”，浏览器自动打开http://127.0.0.1:5500/xxx.html - 默认端口是 5500，如被占用，插件会自动换一个并提示你新地址
- 关闭服务器只需点右下角状态栏的
Go Live按钮，别手动关浏览器标签
路径写错？文件找不到？用 Path Intellisense
新手写 import 或 src 时，经常数不清 ../ 有几层，或者拼错文件名。这个插件在输入 ./ 或 ../ 后直接弹出当前目录结构，选中即填入，连大小写都自动匹配。
- 支持 Webpack/Vite 的别名（如
@/components/），但需在jsconfig.json或tsconfig.json中正确配置"baseUrl"和"paths" - 如果没提示，先检查是否打开了项目根目录（File → Open Folder），单个文件打不开路径联想
- 不建议和某些“智能导入”插件（如
Auto Import）同时启用，可能冲突导致路径补全失效
错误别 hover 才看见：Error Lens
ESLint 或 TypeScript 报错默认要鼠标悬停才能看详情，新手容易忽略。Error Lens 把错误信息直接“贴”在代码行末尾，红色文字+波浪线，一眼就能定位。
- 配合
ESLint插件使用，不单独起作用；必须确保项目中有.eslintrc.js或eslint.config.js - 警告（黄色）和错误（红色）分开显示，比如
console.log是警告，undefined is not a function是错误 - 如果某行突然出现大量红色文字，大概率是 ESLint 规则和 Prettier 格式化冲突，删掉
eslint-config-prettier外的冗余规则即可
注释也能帮你理清思路：Better Comments
新手写注释常常用 // TODO 或 // FIXME，但混在普通注释里很难识别。Better Comments 给不同前缀加颜色和图标，! 是紧急问题，? 是疑问，* 是重点说明。
- 默认支持
!?*^+等符号，无需额外配置 - 写
// ! 这里必须加防抖，整行会变红加感叹号图标；写// ? 这个 API 返回格式确定了吗？，会变蓝加问号 - 不要滥用
!，它会被当成高优先级问题，团队协作时容易引发误判
真正的新手友好，不是功能多炫酷，而是每一步操作都有即时反馈、每处错误都明确指向、每个路径都少输一个字符——这些插件加起来不到 5 个，但覆盖了从写第一行 HTML 到提交第一个 commit 的全部断点。
