No.1 ESLint

ESLint 是一款强大的 JavaScript 语法检查和代码风格检查工具。通过在 VSCode 中安装 ESLint 插件，您可以实时查看代码中的语法错误和不符合规范的地方，并在保存文件时自动修复。这将有助于您编写更加规范、可维护的代码。

No.2 Prettier

Prettier 是一款自动格式化代码的工具，支持多种语言，如 JavaScript、TypeScript、CSS、HTML 等。安装 Prettier 插件后，您可以在保存文件时自动格式化代码，保持整个项目的代码风格一致。此外，Prettier 还可以与 ESLint 配合使用，实现更加强大的代码检查和格式化功能。

No.3 Live Server

Live Server 插件可以帮助您快速启动一个本地开发服务器，实时预览 HTML 页面的效果。当您修改代码并保存文件时，Live Server 会自动刷新浏览器，让您立即看到更改后的效果。这将极大地提高前端开发的效率。

No.4 Bracket Pair Colorizer

在复杂的前端项目中，代码中的括号嵌套可能会非常深。Bracket Pair Colorizer 插件可以为不同层级的括号（包括圆括号、方括号和花括号）分配不同的颜色，帮助您快速识别括号的配对关系，提高代码阅读效率。

No.5 Auto Rename Tag

Auto Rename Tag 插件可以在您修改 HTML/XML 标签时，自动同步修改对应的开始标签和结束标签。这将避免因手动修改标签而导致的匹配错误，提高代码编写效率。

No.6 CSS Peek

在前端开发中，我们经常需要查看 HTML 元素对应的 CSS 样式。CSS Peek 插件可以让您在 HTML 文件中直接查看和编辑元素的 CSS 样式，无需在多个文件之间来回切换。这将大大提高样式调整的效率。

No.7 REST Client

REST Client 插件可以让您在 VSCode 中直接发送 HTTP 请求，测试和调试 RESTful API。您可以在一个专门的文件中编写请求，包括 URL、HTTP 方法、请求头和请求体等信息，然后使用 REST Client 发送请求并查看响应。这将使得 API 调试变得更加方便。

No.8 GitLens

GitLens 插件可以为您提供丰富的 Git 功能，如查看文件历史、比较文件差异、查看提交信息等。通过在 VSCode 中集成 GitLens，您可以更加方便地进行版本控制操作，提高团队协作效率。

No.9 JavaScript Debugger

JavaScript Debugger（JavaScript调试器）是一个用于调试JavaScript代码的工具。它可以帮助开发者找出代码中的错误（称为“bug”）并修复它们。JavaScript Debugger通常作为浏览器的一部分提供，例如Chrome的开发者工具（Developer Tools）或Firefox的开发者工具（Developer Tools）。

No.10 Import Cost

Import Cost 插件可以在您引入第三方库时，实时显示库的体积大小。这将帮助您关注项目的性能优化，避免引入过大的库导致页面加载速度变慢。

以上就是我为您推荐的十个好用的 VSCode 插件。

通过安装这些插件，您可以在前端开发过程中提高编码效率、优化代码风格、加速调试过程等。当然，VSCode 的插件生态非常丰富，您还可以根据自己的需求和喜好，探索更多有用的插件。

希望这些建议能对您的前端开发工作带来帮助！

「网罗天下前端事，引你踏入前端门」

公众号：前端百晓生

这十个前端必备的 VSCode 插件，你用过几个？