关于前端:提升编程效率你不能错过的18款VS-Code扩展

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

快来收费体验 ChatGpt plus 版本的，咱们出的钱 体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群，一起找 bug，另外新版作图神器已上线 https://cube.waixingyun.cn。

本文举荐了 19 个 VS Code 扩大：

1. Swimm：通过丰盛的文本编辑器创立文档，与代码互动，并随着代码的更改自动更新。
2. GitLens：提供了无关 Git 仓库的高级视图和信息，帮忙开发者更好地了解他们的代码库的历史、作者和更改。
3. Thunder Client：一个轻量级的 Rest API 客户端扩大，具备简略易用的 UI，反对珍藏和环境变量 &GraphQL 查问，以及无脚本测试。
4. Tabnine：一个 AI 代码助手，可提供实时代码补全，进步开发速度。
5. Remote-SSH：应用 SSH 服务器的任何近程机器作为开发环境，无需将源代码放在本地机器上。
6. Docker：使得从 Visual Studio Code 构建、治理和部署容器化利用变得更容易。
7. Git History：用户能够不便地查看提交历史，查看文件更改，并比拟代码的不同版本。
8. Markdown All in One：为在 VS Code 中应用大量 Markdown 的人提供有用的工具，使创立和编辑 Markdown 文档更加容易和快捷。
9. Regex Previewer：在侧边文档中显示以后正则表达式的匹配。
10. Better Comments：能够将注解分类为正告、查问、待办事项、高亮等

此外，还有其余一些扩大，如 Bookmarks、Project Manager、Code Spell Checker、Image Optimizer、CSS Peek、Placeholder Images 和 Live Server，它们各自提供了不同的性能和长处。这些扩大都能够加强 VS Code 的性能，进步开发者的生产力。

1.GitLens

地址：https://marketplace.visualstudio.com/items?itemName=eamodio.g…

通过 GitLens，开发人员能够提供高级可视化和无关 Git 存储库的信息，以更好地理解其代码库的历史、作者和更改。

GitLens 还提供了丰盛的自定义选项，以及内联责任正文、提交和差别详细信息，甚至能够在不来到编辑器的状况下查看和编辑提交音讯的性能。

2. Thunder Client

地址：https://marketplace.visualstudio.com/items?itemName=rangav.vs…

Thunder Client 是一款轻量级的 Rest API 客户端扩大，实用于 Visual Studio Code，具备简略易用的用户界面。

反对汇合和环境变量、GraphQL 查问，以及基于 GUI 界面的无脚本测试。

所有申请的数据都保留在设施上。

3.Tabnine

地址：https://marketplace.visualstudio.com/items?itemName=TabNine.t…

Tabnine 是一款 AI 代码助手，可在所有最风行的编程语言和 IDE 中提供实时代码实现，从而进步开发速度。

Tabnine 由多个语言业余的机器学习模型驱动，这些模型从头开始在代码上进行了预训练。

4.Remote-SSH

地址：https://marketplace.visualstudio.com/items?itemName=ms-vscode…

Remote-SSH 扩大容许咱们应用任何带有 SSH 服务器的近程计算机作为开发环境。

不须要将源代码放在本地机器上即可取得这些益处，因为扩大程序能够间接在近程机器上运行命令和其余扩大程序。

你能够关上近程计算机上的任何文件夹，并像在本地计算机上一样应用它。

5. Docker

地址：https://marketplace.visualstudio.com/items?itemName=ms-azuret…

Docker 扩大使得从 Visual Studio Code 构建、治理和部署容器化利用变得容易。它还提供了容器内 Node.js、Python 和 .NET 的一键调试。

6. Git History

地址：https://marketplace.visualstudio.com/items?itemName=donjayama…

通过这个扩大，用户能够轻松地查看提交历史，查看文件更改，并比拟其代码的不同版本。

该扩大程序提供了一个图形用户界面，以时间轴的模式显示提交历史记录。每个提交都与其提交音讯、作者、日期和工夫一起显示。

用户还能够查看与每个提交相关联的分支和标签名称。

7.Markdown All in One

地址：https://marketplace.visualstudio.com/items?itemName=yzhang.ma…

对于在 VS Code 中解决大量 Markdown 的任何人来说，这是一个有用的工具。它使创立和编辑 Markdown 文档更加容易和疾速，帮忙你更加高效和有效率。

这些性能包含语法高亮、代码块格式化、目录、预览模式、表情符号反对、键盘快捷键等等。

8.Regex Previewer

地址：https://marketplace.visualstudio.com/items?itemName=chrmarti….

该扩大程序在并排文档中显示以后正则表达式的匹配项。能够应用 Ctrl+Alt+M 关上 / 敞开此性能。

全局和多行选项能够通过状态栏条目增加到评估中，与并排文档一起应用。当并排文档有多个示例须要匹配时，这可能十分有用。

9.Better Comments

地址：https://marketplace.visualstudio.com/items?itemName=aaron-bon…

通过此扩大，你将可能将正文分类为警报、查问、待办事项、高亮等。正文掉的代码也能够进行款式设置，以便分明地表明该代码不应存在。您能够在设置中指定其余正文款式。

10.Bookmarks

地址：https://marketplace.visualstudio.com/items?itemName=alefragna…

Bookmarks 帮忙咱们浏览代码，轻松疾速地在重要地位之间挪动。

11. Project Manager

地址：https://marketplace.visualstudio.com/items?itemName=alefragna…

Project Manager 帮忙咱们轻松拜访我的项目，无论它们位于何处。不要再错过那些重要的我的项目了。

你能够定义你的我的项目（也称为收藏夹），或抉择自动检测 Git、Mercurial 或 SVN 存储库、VS Code 文件夹或任何其余文件夹。

12. Code Spell Checker

地址：https://marketplace.visualstudio.com/items?itemName=streetsid…

一个根本的拼写查看器，实用于代码和文档。这个拼写查看器的指标是帮忙捕获常见的拼写错误，同时放弃误报的数量较低。

13. Image Optimizer

地址：https://marketplace.visualstudio.com/items?itemName=MadsKrist…

在“解决方案资源管理器”中，为任何文件夹和图像增加右键菜单，让你能够主动优化该文件夹中的所有 PNG、GIF 和 JPEG 文件。

只需右键单击蕴含图像的任何文件或文件夹，而后单击图像优化按钮之一。

14. CSS Peek

地址：https://marketplace.visualstudio.com/items?itemName=pranaygp….

该扩大反对符号定义跟踪的所有惯例性能，然而针对 CSS 选择器（类、ID 和 HTML 标签）执行此操作。

能够抉择将 CSS 文件内联加载并在那里进行疾速编辑，间接跳转到 CSS 文件或在新编辑器中关上它，或在悬停时显示定义。

15.Placeholder Images

地址：https://marketplace.visualstudio.com/items?itemName=JakeWilso…

应用 Visual Studio Code 在 HTML 中生成并插入占位符图片，能够应用 Unsplash、LoremFlickr 等各种第三方服务。

你能够抉择图像的宽度、高度、文本和色彩，将生成的 IMG 标签插入到您的 HTML 中，或将其复制到剪贴板中，或将图像 URL 插入到您的 HTML 中，复制到剪贴板中，或在浏览器中关上。

16. Live Server

地址：https://marketplace.visualstudio.com/items?itemName=ritwickde…

一个疾速开发的 Live Server，具备实时浏览器从新加载性能。通过单击状态栏上的一个按钮启动或进行服务器。

容许用户创立可定制的端口号，设置服务器根目录，并在设置中提供默认的浏览器配置选项。

17. Peacock

地址：https://marketplace.visualstudio.com/items?itemName=johnpapa….

应用 Peacock，你能够微调更改 VS Code 工作区的色彩。当你有多个 VS Code 实例、应用 VS Live Share 或应用 VS Code 的近程性能，并且您想疾速辨认您的编辑器时，这是现实的。

18. Polacode

地址：https://marketplace.visualstudio.com/items?itemName=pnp.polacode

Polacode 是 VS Code 的扩大，能够截取你的代码的屏幕截图。该扩大程序生成的屏幕截图与其起源具备雷同的款式和主题。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。