【分享】每个 Web 开发者在 2021 年必须拥有 15 个 VSCode 扩展

为什么VSCode如此受欢迎

Visual Studio Code在开发人员中迅速流行起来，它是最流行的开发环境，可定制性是其流行的原因之一。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1QDRN9W8-1611586140664)(https://pro.qiuzhi99.com/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBTUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19–fea89d1bf58b36a34324fe3f03a4839c6a5fd648/image.png)]

因此，如果你正在使用VSCode，这里有一个扩展列表，你必须提高你的工作效率。

1. Git Lens

当你与你的团队成员在一个项目上工作时，这个扩展使用VSCode的强大功能，帮助你可视化代码创作一目了然。

它显示了特定代码何时提交或更改，以及是谁更改了它。

有时，你的团队成员提交的代码可能会破坏项目的其他功能，这在那段时间是有帮助的。你可以在这里找到它。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eLMS0Yeq-1611586140665)(https://pro.qiuzhi99.com/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBTZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19–da3c27971a292f619d15c5dddf034476c1d33465/image.png)]

2. Wallaby.js

js是一个智能的JavaScript测试运行器，它可以持续运行你的测试。

当您更改代码时(甚至不保存文件)，它将直接向代码编辑器报告代码覆盖率和其他结果。

这个扩展有助于提高您的开发效率。

3. TypeScript Hero

TypeScript是JavaScript的一个超集，具有可选的类型，并可编译为纯JavaScript。

当我们使用TypeScript时，这个扩展就派上用场了。它通过一个名为“灯泡”的功能对你的导入文件进行分类和组织，并修复编码错误。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ta20E0P2-1611586140669)(https://pro.qiuzhi99.com/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBUQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19–567ba9f812956b6aafe146e8b74f7005bbc4dca4/image.png)]

4. Prettier Code Formatter

Prettier是一种固执的代码格式，它使开发人员在代码格式方面的工作变得更容易。

您可以将其配置为保存时格式化，并在保存时格式化代码。

一旦你有了这个扩展，你将永远不必担心格式化的代码。

5. Path Intellisense

如果你在React或Angular等JavaScript库上工作，而且你在做大型项目，你就知道在导入时找到组件的确切路径有多烦人。

这个扩展可以帮助你自动完成导入的路径。

它还可以帮助您自动完成HTML文件中的文件引用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-beO5eIXD-1611586140671)(https://pro.qiuzhi99.com/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBUZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19–251838dcb2a222291dfd0f304a1a87d85287f597/image.png)]

6. Debugger for Chrome

我们都知道有时候调试是多么烦人，所以这个扩展被用来帮助你调试JavaScript代码。

它是由微软开发的。我们可以设置断点、逐步执行代码、动态添加调试脚本等等。

假设我们有一个不确定是否正在执行的函数，这个扩展可以通过在执行时在调试器中暂停来帮助我们。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WHd5BGap-1611586140671)(https://pro.qiuzhi99.com/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBUdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19–59ef64f85e27184de01f82386df9f9a881d710de/image.png)]

7. Bracket Pair Colorizer

这个扩展允许匹配的括号被识别的颜色。

当你在调试过程中处理一个巨大的代码库时，这个扩展就像救星一样。

用户可以定义要匹配的字符和要使用的颜色。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QVmaO7TJ-1611586140672)(https://pro.qiuzhi99.com/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBVQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19–c653fe6019865614a47d9482c2614813f477ac02/image.png)]

8. JavaScript (ES6) Code Snippets

如果您是一名JavaScript开发人员，这可以为您节省大量时间。

当你想快速构建新项目时，这可能会有帮助。

它没有键入全部代码，而是为最常见的JavaScript函数预定义了许多代码片段。

它支持TypeScript、React、Vue和HTML。

如果你在React上工作，有一个类似的扩展。(ES7 React/Redux/GraphQL/React-Native snippets)。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QNEHs8gs-1611586140672)(https://pro.qiuzhi99.com/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBVUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19–6a2d051989a6e94d560ea5579f6e0c3739f1f538/image.png)]

9. Live Share

当您与您的团队成员一起解决问题，并希望在编辑器上共同处理相同的代码时，这将帮助您将代码编辑器的控制权交给您的团队成员，您可以同时处理它。

您还可以共享终端实例、本地主机web应用程序、语音通话等。

10. ESLint

由于JavaScript是一种高度灵活的语言，一些小错误可能会导致巨大的问题。

因此，当工作在巨大的代码库，我们需要一个linter和一个格式化程序。

这个扩展可以帮助你做到这一点。

这可以自动格式化你的代码，并发现你的代码中的错误。

实现ESLint规则会让你离为你的代码库建立良好的标准更近一步。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AIL3SNza-1611586140673)(https://pro.qiuzhi99.com/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBVdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19–5183325a77f7090e0b5ce099dbcb3853074fcb28/image.png)]

11. Paste JSON as Code

作为一名开发人员，您经常要处理api。

众所周知，api中最常用的数据结构是JSON。

为了避免一些可能破坏应用程序的类型错误，我们使用类或接口。

这个扩展可以用JSON数据生成一个类。

因此，与其手工编写类，我们可以使用它来节省创建类的时间和负担。

这个扩展支持大多数流行的语言。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VFfw5SdZ-1611586140673)(https://pro.qiuzhi99.com/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBWQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19–9180248b9288fbd3fc94a6d8a0ea18362b8b6d2e/image.png)]

12. Peacock

当你在多个工作空间上工作时，这个扩展可以帮助你识别你已经切换到或工作的确切的工作空间。

13. Better Comments

这个扩展可以帮助您在代码中创建更人性化的注释。

它允许您为不同类型的注释提供不同的颜色代码，这些注释可以是TODOs、高亮显示、警报和其他类型的注释。

这是强烈推荐的，用于编写干净和文档化的代码。

14. Search node_modules

当我们构建组件库并在不同的应用程序中使用该组件时，我们肯定会对节点模块进行一些修改。

这个扩展允许你在项目的node_modules目录中快速浏览文件。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F6jWX4VO-1611586140674)(https://pro.qiuzhi99.com/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBWdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19–c8ea5f6f9e8da1b94d1e0879ad4b167196afee55/image.png)]

15. Rest Client

作为开发人员，我们每天都会定期使用Postman来检查API的响应。

这个扩展允许你做一个HTTP请求，并在VSCode中直接查看响应，而不是在两个应用程序之间切换，这个扩展为你做这个工作。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KS7kCifd-1611586140675)(https://pro.qiuzhi99.com/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBXQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19–4f92cc47e1563327389d154fe61d75f5d178a478/image.png)]

其他精彩文章

• 【分享】73 个提高生产力的很棒的 NPM 包【译】