VS Code前端开发必备10大插件：Live Server（自动刷新）、Auto Rename Tag（标签同步重命名）、ESLint（实时代码检测）、Pretterr（保存自动格式化）、HTML CSS Class Completion（CSS类名提示）、Path Intellisense（路径补全）、Error Lens（错误行尾高亮）、Image Preview（图片悬停预览）、Auto Close Tag（自动闭合标签）、CSS Peek（CSS定义跳转）。
如果您正在使用 VS Code 进行前端开发，但发现代码补全不准、样式跳转困难、HTML 标签修改繁琐或保存后页面未自动刷新，则可能是缺少关键辅助插件。以下是2024年实测高效、稳定且广泛采用的插件方案：
本文运行环境：MacBook Pro M3，macOS Sequoia。
一、Live Server
该插件启动一个本地开发服务器，并在文件保存时自动刷新浏览器，消除手动刷新操作，适用于 HTML/CSS/JS 项目快速预览。
1、打开 VS Code 扩展市场（Ctrl+Shift+X 或 Cmd+Shift+X）。
立即学习“前端免费学习笔记（深入）”；
2、搜索 Live Server 并点击安装。
3、右键任意 HTML 文件，选择 Open with Live Server，或点击右下角状态栏的 Go Live 按钮。
二、Auto Rename Tag
当修改 HTML 或 JSX 中的开始标签名时，自动同步更新对应结束标签，避免手动逐个更正，显著降低标签错配风险。
1、在扩展市场中搜索 Auto Rename Tag 并安装。
2、重启 VS Code（部分版本需重启以激活）。
3、将光标置于起始标签内，如 <div> 的 div 上，输入新标签名（如 section），闭合标签同步变为 </section>。
三、ESLint
实时检测 JavaScript/TypeScript 代码中的语法错误、潜在 bug 和风格违规（如未使用变量、隐式 return），配合配置可实现编辑即反馈。
1、安装官方扩展 ESLint。
2、确保项目根目录存在 .eslintrc.js 或 .eslintrc.json 配置文件。
3、在 VS Code 设置中启用 eslint.enable，并勾选 Format On Save（需与 Prettier 协同配置）。
四、Prettier
保存时自动格式化代码，统一缩进、引号、分号、括号位置等风格，支持 JS/TS/HTML/CSS/MD 等多种语言，减少团队协作格式争议。
1、安装扩展 Prettier - Code Formatter。
2、在用户设置中搜索 format on save，启用该项。
3、在项目根目录添加 .prettierrc 文件，写入基础规则如 {"semi": true, "singleQuote": true}。
五、HTML CSS Class Completion
在 HTML 的 class="" 或 className="" 属性中，自动提示当前项目已定义的 CSS 类名（包括 Tailwind、SCSS、CSS Modules），无需切换文件查找。
1、安装扩展 HTML CSS Class Completion。
2、确保项目中已引入样式文件（如 import './App.css' 或 @import 'styles.scss'）。
3、在 HTML 标签中输入 class="|"（光标位于引号内），触发类名建议列表。
六、Path Intellisense
在 import、require、img src、link href 等路径引用处，自动补全项目内相对路径，避免拼写错误和层级误判，支持别名路径（如 @/components）。
1、安装扩展 Path Intellisense。
2、如需支持 Webpack 别名，需在 jsconfig.json 或 tsconfig.json 中配置 "baseUrl" 和 "paths"。
3、在 import Component from '|' 处输入，自动列出匹配路径。
七、Error Lens
将 ESLint、TypeScript、Stylelint 等工具报告的错误与警告直接高亮显示在代码行末尾，无需查看侧边栏或问题面板，实现问题“所见即所得”定位。
1、安装扩展 Error Lens。
2、默认启用，无需额外配置；可在设置中调整高亮样式（如背景色、图标位置）。
3、保存含错误的代码后，错误信息以 红色波浪线下划线 + 行尾图标 形式即时呈现。
八、Image Preview
在代码中悬停或点击图片路径（如 src="./logo.png"），直接在编辑器内预览图像内容，验证路径有效性与资源加载状态。
1、安装扩展 Image preview。
2、将鼠标悬停于图片路径字符串上，等待几毫秒，预览弹窗自动浮现。
3、支持 PNG、JPEG、GIF、SVG 等主流格式，不依赖外部浏览器。
九、Auto Close Tag
输入 HTML/XML 开始标签后（如 <div），按回车或 > 键自动补全为 <div></div>，并将光标置于两标签之间，省去手动输入闭合结构。
1、安装扩展 Auto Close Tag。
2、无需配置，安装后立即生效。
3、在 JSX 中同样适用，如输入 <Component 后按 Enter，生成 <Component></Component>。
十、CSS Peek
在 HTML 中点击 class 或 id 属性值，一键跳转至对应 CSS/SCSS 文件中的样式定义位置，支持多文件项目跨文件精准定位。
1、安装扩展 CSS Peek。
2、确保样式文件已通过 link 或 import 方式被项目识别。
3、按住 Cmd（Mac）或 Ctrl（Win） 键，将鼠标悬停于 HTML 中的 class="header"，点击即可跳转。
