本文推荐10个VSCode前端开发必备扩展：ESLint、Prettier、Auto Rename Tag、CSS类名IntelliSense、Live Server、Tailwind CSS IntelliSense、Path Intellisense、Bracket Pair Colorizer 2、Import Sorter和Error Lens，覆盖代码校验、格式化、标签同步、类名补全、本地预览、路径提示、括号高亮、导入排序及错误行内显示。
如果您正在使用 Visual Studio Code 进行前端开发，安装合适的扩展能显著提升编码效率、语法提示准确性与调试体验。以下是 10 个被广泛验证为实用且高频使用的前端开发扩展：
本文运行环境：MacBook Air M2，macOS Sequoia。
一、ESLint
该扩展将 ESLint 集成至编辑器中，实时检测 JavaScript 和 TypeScript 代码中的潜在错误、风格违规及不安全模式，并在编辑器内直接标出问题位置与修复建议。
1、打开 VSCode 扩展面板（快捷键 Cmd+Shift+X）。
立即学习“前端免费学习笔记（深入）”；
2、在搜索框中输入 ESLint，选择由 Dirk Baeumer 发布的官方扩展。
3、点击“安装”，安装完成后重启 VSCode 或重新加载窗口。
二、Prettier – Code formatter
该扩展提供一键格式化功能，依据 Prettier 配置自动统一代码缩进、括号风格、引号类型等格式细节，消除团队协作中的样式分歧。
1、在扩展市场中搜索 Prettier，确认作者为 Esben Petersen。
2、安装后，在设置中搜索 format on save 并启用该选项。
3、如项目根目录存在 .prettierrc 文件，扩展将自动读取并应用其规则。
三、Auto Rename Tag
该扩展实现 HTML 和 JSX 中标签的同步重命名：修改开始标签时，对应结束标签自动更新，避免手动遗漏导致结构错乱。
1、在扩展面板中搜索 Auto Rename Tag，安装 Jun Han 开发的版本。
2、无需额外配置，启用后在任意支持的文件类型中编辑开始标签即可触发联动。
3、若需禁用特定语言，可在设置中搜索 auto-rename-tag 并调整 language support 列表。
四、IntelliSense for CSS class names in HTML
该扩展从项目中已有的 CSS、SCSS、Tailwind 等样式文件中提取类名，在 HTML 的 class 属性值中提供精准的自动补全建议。
1、搜索并安装 IntelliSense for CSS class names in HTML（作者：Zignd）。
2、确保项目中包含 styles.css、index.scss 或 tailwind.config.js 等可识别样式源文件。
3、在 HTML 文件中输入 class=" 后，按下 Ctrl+Space 即可唤出类名候选列表。
五、Live Server
该扩展内置轻量级本地 HTTP 服务器，支持一键启动、自动刷新页面，并提供基础路由响应能力，适用于静态站点快速预览。
1、安装 Live Server（作者：Ritwick Dey）。
2、右键点击任意 HTML 文件，在上下文菜单中选择 Open with Live Server。
3、浏览器将自动打开 http://127.0.0.1:5500/ 路径，后续保存文件即触发页面热重载。
六、Tailwind CSS IntelliSense
该扩展专为 Tailwind CSS 设计，提供类名智能提示、颜色预览、指令跳转、以及 @apply 补全等深度支持，大幅提升原子化 CSS 编写效率。
1、搜索安装 Tailwind CSS IntelliSense（作者：Tailwind Labs）。
2、确认项目根目录存在 tailwind.config.js 或 tailwind.config.cjs 文件。
3、在 class 属性中输入 bg- 或 text- 等前缀，即可获得上下文敏感的类名推荐。
七、Path Intellisense
该扩展增强对相对路径和绝对路径的自动补全能力，支持在 import 语句、img src、require() 等上下文中快速定位文件与文件夹。
1、安装 Path Intellisense（作者：Christian Kohler）。
2、默认启用，无需配置；如需自定义路径别名映射，可在 settings.json 中添加 path-intellisense.mappings。
3、在 import 语句中输入 ./ 后，按 Tab 键即可从当前目录结构中选择目标文件。
八、Bracket Pair Colorizer 2
该扩展为不同层级的括号（圆括号、方括号、花括号）分配专属颜色，使嵌套结构一目了然，显著降低 JS/TS/HTML/JSON 中括号匹配失误率。
1、搜索并安装 Bracket Pair Colorizer 2（作者：CoenraadS）。
2、安装后立即生效，支持自定义配色方案，在设置中搜索 bracketPairColorizer2.colorizedBracketPairs 可调整。
3、当光标停驻在任一括号上时，其匹配对将高亮显示，且嵌套层级通过颜色深浅区分。
九、Import Sorter
该扩展自动识别并按预设规则（如模块类型、路径顺序、字母序）对 import 语句进行分组与排序，保持导入区块整洁规范。
1、安装 Import Sorter（作者：mike-lischke）。
2、在设置中启用 importSorter.sortOnSave，或手动执行命令 Import Sorter: Sort Imports。
3、支持通过 .imports.json 或 package.json 中的 importSorter 配置段自定义排序逻辑。
十、Error Lens
该扩展将 ESLint、TypeScript、TSC 等诊断信息以行内高亮形式直接渲染在代码行末尾，避免频繁切换问题面板，提升错误定位速度。
1、安装 Error Lens（作者：usernamehw）。
2、安装后默认启用，支持与 ESLint、TypeScript SDK、Stylelint 等多种语言服务协同工作。
3、错误提示将以红色背景 + 白色文字形式附着于出错行右侧，悬停可查看完整诊断消息。
