装对插件比调配置重要得多，新手应优先解决保存→切浏览器→刷新、代码缩进混乱、找文件困难三大痛点；推荐Live Server（热重载）、ESLint+Prettier（保存即格式化与校验）、vscode-icons（文件类型图标区分）及中文语言包，并确保正确启用与配置。
装对插件比调配置重要得多，新手卡在“不知道装什么”“装了不会用”“装完反而更慢”这三步上，核心不是找最炫的插件，而是先解决写 HTML/CSS/JS 时最痛的三个动作：保存 → 切浏览器 → 刷新；代码缩进乱成麻；找文件像大海捞针。
Live Server 启动就用，别碰 Open in Browser
你改完 index.html，得手动刷新浏览器？那是旧时代操作。Live Server 插件按一下底部状态栏的 Go Live 就起一个本地服务，自动监听文件变化并热重载。
- 安装后不用重启 VSCode，直接打开任意
.html文件就能看到底部出现Go Live按钮 - 默认端口是
5500，如果被占用，进设置搜liveServer.settings.port改成0（随机）或别的数字 - 别装
Open in Browser—— 它只开浏览器不监听变化，每次改完还得手动 F5，效率断层 - 局域网设备也能访问：比如手机连同一 Wi-Fi，用
http://192.168.x.x:5500就能调试响应式布局
ESLint + Prettier 组合必须开 “保存即格式化”
新手写 JS 最容易犯的错不是逻辑错，是缩进混乱、分号随意、引号混用——这些全靠两个插件自动兜底：ESLint 查问题，Prettier 统一风格。
- 装插件后，进设置搜
format on save，勾选Editor: Format On Save - 再搜
default formatter，设为esbenp.prettier-vscode（不是 ESLint 插件本身） - 关键一步：在项目根目录加
.eslintrc.js，至少写上extends: ['eslint:recommended']，否则 ESLint 不生效 - 如果保存后没反应，检查右下角状态栏有没有显示
Prettier或ESLint，没显示说明没识别到配置文件或文件类型
vscode-icons 让文件列表一眼定位，别等项目变大才后悔
当你的项目有 utils.js、utils.ts、utils.test.js、utils.scss 全堆在一起，光靠名字根本分不清——vscode-icons 用图标区分类型，比颜色和排序更可靠。
立即学习“前端免费学习笔记（深入）”；
- 安装后立刻生效，不需要重启，但要进设置搜
icons theme，选VSCode Icons才启用 - 它对 Vue/React 单文件组件有专属图标（比如
.vue是小圆圈带 V），普通.js是齿轮，.json是文档页，视觉权重天然不同 - macOS 用户如果觉得图标太扁，可额外装
vscode-icons-mac，但注意：它和主插件冲突，只能二选一 - 别指望它帮你分类文件夹——它只管单个文件图标，想理清结构还得靠你自己建
components/、styles/这类目录
中文界面别只装语言包，关掉英文残留项
装了 Chinese (Simplified) Language Pack 还有英文菜单？不是插件没生效，是 VSCode 的某些功能默认保留英文术语，比如调试面板里的 Breakpoint、终端里的 Terminal 标签。
- 装完语言包后，进命令面板（
Ctrl+Shift+P）搜Configure Display Language，选zh-cn并重启 - 如果部分界面还是英文，检查设置里有没有手动覆盖了
workbench.iconTheme或editor.fontFamily，这些设置有时会干扰语言加载顺序 - 团队协作时，别改
locale全局设置——每个成员自己配，避免提交settings.json里带 locale 导致别人打开就报错 - 插件界面是否汉化，取决于插件作者是否提供中文翻译，像
Live Server和ESLint都支持，但某些小众插件可能永远是英文
插件不是越多越好，前四步做完，你已经避开了 90% 新手踩的坑：热更新没配、格式化不触发、文件找不到、界面看不懂。剩下那些“AI 补全”“Git 图形化”“主题皮肤”，等你真写过三个完整页面再装不迟——因为那时候你才知道自己缺什么，而不是被推荐列表绑架。
