本文介绍了前端开发领域中一些常用的插件。 插件是最重要的组件之一。 本文列出了我在之前的工作经验中积累的54个插件。 我个人认为这些插件很有用或者很有趣。 根据它们的功能，我大致将它们分为代码管理、文本和图像处理、前端框架和语言相关、效率和功能增强以及主题和图标等几个模块。

1.代码管理相关插件01.——Git

该插件增强了 VS Code 中的 Git，通过丰富的可视化效果和强大的命令帮助我们无缝导航和探索 Git 存储库。 您可以快速查看谁编写了代码，轻松导航和探索 Git 存储库，通过丰富的可视化和强大的比较命令获取有效信息，并做更多事情来帮助我们更好地理解代码。

02. 吉特·克拉夫

Git Graph 插件用于直观地查看存储库的 Git 操作，并轻松地从图表中执行 Git 操作。 与可视化版本控制插件类似，可以更新和提交代码、查看提交记录、审核代码。

03. git

该插件用于查看 Git 日志和文件历史记录并比较分支或提交。

04.

这个插件可以帮助我们方便的管理多个项目，并且支持多个项目之间的快速切换。 如果您在日常开发中需要管理多个项目，那么就使用它。

05. 都都树

这个扩展可以帮助我们快速搜索项目中的TODO注释标签，并将其显示在活动栏的树形视图中。 可以将视图从活动栏拖动到资源管理器窗格（或您希望的其他位置）。 单击树中的 TODO 将打开文件并将光标放在包含 TODO 的行上。 找到的 TODO 也可以在打开的文件中突出显示。

06.瓦卡时间

它是一款开源的VS Code插件，用于自动统计编程活动中的工作量、代码提交和时间跟踪，并且可以定期为我们提供各种高质量的工作统计图表。

在实际使用过程中，我们可以通过自己的账号进行登录。 以下开发工具支持我们快速使用扩展。

07.VS代码

这个插件是用来帮助我们统计项目代码行数的。 安装插件后，首先选择需要代码统计的代码文件夹，然后右键单击弹出菜单，选择“Count rows in”。 这个扩展会自动生成一个. 文件夹。

这 。 文件夹中包含不同格式的结果，编辑器将打开.md 格式。 结果会显示总代码行数、不同格式文件的行数、不同路径的文件函数等。代码行数包括纯代码行数、空白行数、以及注释行数。

08. 笔记

该插件用于帮助我们创建格式化的笔记文件并方便地管理这些文件。 我个人的经历是好的。 建议大家创建一个仓库，结合Notes扩展来管理自己的笔记，这样可以在工作中轻松（同时）切换文档和代码，也方便追溯。

09、定时器

该插件用于自动生成编程活动的指标、见解和时间跟踪。 它是一个开源项目，独立于网络环境，安全且轻量级。

2.前端框架及语言相关插件01、ES7 React/Redux//React-

该插件提供了许多速记前缀来加快开发速度，并帮助开发人员为 React、Redux 和 React 创建代码片段和语法。

其中一些说明可以帮助我们快速创建和导出 React 组件。

02.反应

该插件提供了一组精心挑选的 React 代码片段，只需键入几个字母即可轻松添加到您的代码中。 例如，输入 imr 会将 React 导入到组件中。

03.反应代码

该插件包含用于 React (.ts) 或 React (.tsx) 语言的代码片段。

04.Vue（掌上）

这个插件可以让 Vue 代码获得漂亮的语法高亮、错误检查和代码格式化。 此外，它还添加了大量 Vue 指令和事件处理程序，以便在打字时提供良好的建议。

volar 是专门为 Vue 3 构建的语言支持插件。它基于 @vue/ 并按需计算所有内容，实现原生语言服务级别性能。 Volar解决了Vetur的问题，为Vue 3+用户提供了最好的开发体验。 它为 Vue 3 提供完整的语言支持。

05. 视图 3

该插件包含与 Vue.js 2 和 Vue.js 3 API 对应的所有代码片段。

06.Vue

该插件将 Vue 2 和 Vue 3 添加到代码中。

07.反应工具

React Tools 扩展由团队构建，为 React 项目提供开发环境。 该插件允许在不同的模拟器或仿真器上轻松运行和调试代码，从命令面板快速运行react命令，而无需在终端中手动运行命令，并浏览React的函数、对象、参数等。

08.（ES6）代码

该插件允许您使用预定义的 ES6 语法片段速记，从而提高开发效率。 这个 VS Code 插件是可定制的，因为它不特定于任何框架。

09.和

这个插件内置了and，可以帮助我们自动完成代码。

3.文本和图像处理相关插件

01. 多合一

自 2004 年发布以来，它已成为最流行的标记语言之一。 转录文章、博客、文档等被技术作家广泛使用，因为它非常轻量、简单，并且可以在多个平台上使用。

in One 可以满足您的所有需求，例如自动预览、快捷键和自动完成。

02. 图片

该扩展可以帮助我们轻松地将图像插入网站，并支持将图像存储在本地或第三方 CDN 服务中。

03.PDF

此扩展可帮助我们将文件转换为 pdf、html、png 或 jpeg 文件。

04.

这是一个为 Atom 和代码编辑器编写的超级强大的插件。 该插件旨在为您提供优雅的写作体验。

我认为比较有用的功能是：目录、注释、合并单元格、插入LaTeX公式、纯文本绘图、运行代码、导入导出、制作幻灯片等。

总的来说，它很强大，该有的、不该有的都有。 只需安装插件并使用即可。

05.Svg

这是为您提供的用于预览和处理SVG格式图像的插件。 它可以帮助我们方便地预览SVG图像，并支持对SVG图像的颜色、形状等特性的调整。 ‍

06.

这个插件可以帮助我们生成与代码对应的图像，这在我们写技术文档和博客时会更加有用。 使用时，可以先使用快捷键Shit++P，在输入框中输入即可生成图片功能。

支持运行时对代码进行分块选择，生成的代码图片有自己的行号，外观在线。 当然习惯右键的小朋友也可以选择代码后直接右键找到菜单操作。

07.

这个插件的功能和使用方法都是类似的。 我认为你只需要选择其中一个插件即可。 不同的是，它生成的图像默认没有左上角的三个点。

08.图像

该插件主要用于图像预览。 支持CSS预览和SVG格式，可以在一定程度上提高开发效率。 在代码中，我们可以通过hover来预览图像。

09.图像

该插件提供对精灵图像的支持。 在开发某些页面时，总会遇到需要有很多小图片的情况。 这时，使用精灵图像可以减少服务器请求数量并节省带宽，而无需UI帮助。 ，选择这个插件是一个不错的选择。

图像精灵是放置在单个图像中的图像集合。 包含许多图像的网页可能需要很长时间才能加载并生成多个服务器请求。 使用图像精灵将减少服务器请求的数量并节省带宽。

选择需要生成精灵图片的图片资源，右键菜单点击Image即可生成。

4.提高效率，增强相关插件

01.路径

该插件用于自动完成文件名。 当有其他文件时，可以提示该文件并快速完成要导入的文件名。

02.npm

该插件为语句中的 npm 模块提供自动完成功能。 所有 npm 模块的导入都会使用此扩展自动处理。

03.自动关闭标签

这个插件可以帮助我们在输入标签时自动结束标签。 通常当您想要使用特定的 HTML 元素时，您需要输入开始标记和结束标记。

使用此插件后，您只需输入开始标签，它会自动添加结束标签。 对于Vue开发者来说，它还支持自定义类型名称。 当您输入自定义组件的开始标记时，它会自动添加结束标记。

04.自动标记

这个插件可以帮助我们在重命名标签时自动重命名HTML标签的开始和结束标签。 避免只修改开始标签而忘记修改结束标签。 该扩展适用于 HTML、XML、PHP 和 .

05.代码拼写

Code Spell 插件是一个拼写检查工具，用于在编辑器中检查代码拼写错误。 它可以在您编写代码时自动检测变量、函数、注释等文本内容的拼写错误，并给出错误提示。 这样可以有效避免代码错误以及拼写错误带来的不必要的麻烦。 此外，还支持自定义词典，允许您添加项目特定的术语和缩写，使其更好地适合不同的项目需求。

06.CSS一览

这个插件可以帮助我们快速导航和编辑 HTML 和文件中外部样式表中定义的 CSS 样式。 它提供了“查看”功能。 在HTML中选择一个类或id名称，按住Ctrl键+鼠标左键，可以直接定位该名称的CSS位置。

该插件适合处理大型或复杂的 CSS 样式表，因为它可以快速查找和编辑应用于特定元素的样式，而无需浏览多个文件或搜索大量代码。

07.正则表达式

该插件用于测试正则表达式。 编写正则表达式时，可以直接使用快捷键 Ctrl+Alt+M () 或 ⌥+⌘+M (Mac) 启动编辑器右侧的选项卡。 您可以在此选项卡中编写一些正则表达式测试用例。 ，写入后，点击正则表达式上方的Test Regex...。 这时，右侧选项卡上匹配的字符就会高亮显示。

08. 常数。

这个插件可以帮助我们在将多个模块导入到项目中时显示包的大小。 Cost用于查看将特定库导入到项目中的成本。 插件显示导入库的大小，如果大小为绿色，则表示库较小，红色表示库较大。

09.

是一个非常实用的插件，可以帮助你快速对齐代码中的各种元素。 使用起来非常简单。 您只需要在 中按`Ctrl + Shift + P`，然后输入“”即可查看插件的所有命令和快捷键。 例如，您可以选择几行代码，然后按“Alt + A”快捷键，自动对齐所选代码。

另外，还提供了多种对齐方式，比如按照等号、逗号、冒号等符号对齐，还可以对齐选择范围的首尾两端，大大提高了可读性和美观性的代码。

10.误差镜头

这是一个非常实用的插件，可以直接在编辑器中显示代码中的语法错误和其他问题，使开发人员更容易发现和解决代码问题。

Error Lens的使用非常简单，只需搜索并安装插件即可。 安装完成后，打开一个代码文件。 如果文件中存在语法错误或其他问题，Error Lens会直接在编辑器中显示相应的提示和解决方案。

此外，Error Lens还支持许多其他功能，例如

- 支持直接在代码中显示具体的错误信息，如错误类型、位置等。

- 支持定位并跳转到代码中出现问题的位置。

- 支持配置插件的提醒方式、颜色、样式等，使其更符合您的编码习惯

11.

该插件可以帮助开发人员准确注释代码。 它的主要功能是根据特定的语言对评论进行标记，使评论更加突出、易于理解和分类。 例如，在 中，它可以帮助对项目中的注释进行分类，例如用不同颜色突出显示重要注释、将警告消息标记为警告等。

支持多种语言，您可以通过在注释中添加特定标签来达到更好的注释效果，例如：

- todo：用于标记待办事项

- hack：用于标记临时修改的代码

- fixme：用于标记需要修复的问题

- note：用于标记一些注释信息

- !: 用于标记重要评论

使用它可以让我们更快的理解代码，并且可以更好的组织和管理注释，提高开发效率。

12. 标签

该插件可以帮助开发者在编辑HTML、XML、JSX等文件时更加方便地匹配和编辑标签。 其主要功能是当光标移动到某个标签时，自动高亮匹配的标签，帮助开发者快速定位和编辑代码。

当我们的代码包含很多标签时，很难一下子看出标签的嵌套结构。 标签可以让开发者更容易理解嵌套结构。 同时还支持自定义颜色，可以帮助开发者更方便区分标签。 当我们选择某个标签时，Tag还会在状态栏中提示当前所选标签的信息，让我们快速了解该标签的属性等相关信息。

使用 Tag 可以让开发人员更有效地编辑标签、减少错误并提高代码可读性。

13.

该插件可以帮助开发者在编辑代码时更好地理解代码结构，使代码更加清晰易读。 它的主要作用是突出显示代码中的颜色值、CSS样式等属性值，方便开发者定位代码。

在开发过程中，我们经常需要修改代码中的颜色值和样式属性。 使用不同的颜色值可以很容易看出差异，避免编写错误的代码。 此外，它还支持多种文件类型，如HTML、CSS、SASS、LESS、JS、JSON等，可以帮助开发者更好地理解这些文件中的代码结构，方便调试和修改。

14.-案例

该插件可以快速转换文本大小写样式。 使用此插件可以快速将一段文本从一种大小写样式转换为另一种大小写样式，例如从小驼峰大小写转换为大驼峰大小写，或者从大写字母转换为小写字母等。此插件提供了多种常见的大写和小写样式转换选项，可以大大提高编码效率。

15. 颜色

Color是一个主要用于编写代码时快速选择颜色的插件。 这个插件可以为您提供一个颜色选择器来帮助您找到您需要的颜色代码。 通过使用此插件，您可以消除手动输入颜色代码的步骤并减少错误。

Color插件具有以下特点：

- 快速选择颜色并自动生成颜色代码

-支持HEX、RGBA和HSLA颜色模式

- 支持使用多种识别模式（光标下的颜色、样式表中的颜色等）

-支持手动输入颜色代码

16.

该插件可以帮助开发者更快、更准确地搜索项目中的变量名、函数名等。

主要功能包括：

- 帮助开发者快速搜索命名示例

- 自动完成和智能关联

- 支持多种语言和框架

它可以自动关联匹配项目中的变量名和函数名，让开发者能够更加高效、准确地编写代码，并且支持多种语言，对于开发者进行跨语言开发非常有用。

17.

该插件可以帮助我们在项目中快速创建和测试简单和复杂的HTTP/s请求，并查看响应。

18.

它是由 和 联合开发的AI代码助手 作为插件，可以为开发者提供高效、智能的代码提示和补全功能。 使用该插件，开发者在编写代码时可以自动获取最好、最合适的代码片段和建议，从而显着提高编码效率和代码质量。

主要特点包括：

- 智能代码预测和补全功能，支持多种编程语言和框架。

- 根据上下文自动生成最佳代码片段和建议。

- 支持自定义代码片段和广泛的人工智能库。

总体来说功能强大，可以帮助开发者在编写代码时节省时间和精力，同时提高项目的代码质量。 作为一个插件，使用起来非常简单方便。

19. 韭菜盒

可以帮助开发者方便地实时查看股票涨跌信息。 该插件目前支持多种数字货币交易所，包括OKEx、Huobi等。

5.主题和图标相关插件

01. 一暗专业版

是我个人很喜欢的一款主题插件，我身边很多同事也在使用。 该插件的设计灵感来自于 Atom 编辑器的 One Dark 主题，因此它具有相似的外观和感觉。 One Dark Pro主题为用户提供了易于阅读的代码高亮和舒适的身心体验，并提供多种定制选项。

02.主题

03. 夜猫子

04.专业版

这也是我个人比较喜欢的一个主题插件。 它没有那么花哨，使用起来更舒服。

05. 一个主题

06. 的

07.-图标

这是我自己的图标库。

08. 文件图标

/结尾。

感谢您花时间阅读这篇文章，我感谢生活给予我的所有礼物。

如果愿意，请扫描二维码加我为微信好友。 我期待着与您见面。

如果您觉得文章有价值，可以关注公众号；