ESLint检查语法与风格，支持自动修复并与Prettier协同；2. Prettier统一代码格式，保存自动格式化；3. Bracket Pair Colorizer高亮匹配括号，提升代码可读性；4. Auto Rename Tag自动重命名HTML/JSX标签；5. Path Intellisense补全文件路径；6. Live Server启动本地服务并热更新；7. Vetur为Vue提供完整支持；8. IntelliSense提示CSS类名；9. GitLens增强Git信息查看；10. Thunder Client在编辑器内测试API。按需选择，避免过多影响性能。
前端开发中，VSCode 的扩展能极大提升编码效率和代码质量。以下是一些真正实用且被广泛使用的必备扩展。
1. ESLint
自动检查 JavaScript 和 TypeScript 代码中的语法错误和风格问题，配合项目中的 ESLint 配置，实现团队代码规范统一。
- 实时标出错误和警告
- 支持自动修复部分问题
- 与 Prettier 协同使用效果更佳
2. Prettier - Code Formatter
统一代码格式化标准，支持 HTML、CSS、JavaScript、TypeScript、Vue、React 等多种文件类型。
- 保存时自动格式化代码
- 减少团队间的格式争议
- 可与 ESLint 规则整合避免冲突
3. Bracket Pair Colorizer（或内置功能）
为匹配的括号添加颜色高亮，便于快速识别嵌套结构。VSCode 新版本已内置类似功能，也可选择增强版扩展。
立即学习“前端免费学习笔记（深入）”；
- 提升阅读复杂代码的效率
- 支持自定义配色方案
4. Auto Rename Tag
修改 HTML 或 JSX 标签时，自动重命名对应的闭合标签。
- 避免手动修改出错
- 在 Vue、React 开发中特别有用
5. Path Intellisense
自动补全文件路径，当你在 import 或引用资源时，它会提示项目中的文件名。
- 减少手敲路径错误
- 支持图片、组件、模块等路径补全
6. Live Server
启动本地服务器预览静态页面，保存后浏览器自动刷新，适合做纯 HTML/CSS/JS 小项目或原型。
- 一键启动服务
- 支持热更新
- 调试响应式布局很方便
7. Vetur（Vue 开发者）
为 Vue 单文件组件提供语法高亮、智能提示、错误检查和格式化支持。
- 支持 .vue 文件的 template、script、style 分块处理
- 集成 ESLint 和 Prettier
8. IntelliSense for CSS class names
在 HTML 或 JSX 中输入 class 时，自动提示项目中定义过的 CSS 类名。
- 适用于 Tailwind、Sass、模块化 CSS
- 减少记忆类名负担
9. GitLens
增强 Git 功能，显示每行代码的提交信息、作者、时间等，帮助理解代码变更历史。
- 快速查看谁改了哪一行
- 支持跳转到特定 commit
- 团队协作时非常实用
10. Thunder Client（替代 Postman）
轻量级 API 测试工具，可以直接在 VSCode 内发送 HTTP 请求，适合前后端联调。
- 无需切换应用
- 支持环境变量、集合导出
- 节省调试时间
基本上就这些。根据你的技术栈可以灵活选择，比如用 React 可以加上 React Refactor，用 TypeScript 则确保有官方语言支持。装得太多反而影响性能，挑真正常用的几个就够了。
