为何 VSCode 如此受欢迎
Visual Studio Code 在开发人员中已经迅速流行起来,在 Stack Overflow 2019 年开发者调查中,它被评为最受欢迎的开发环境。可定制化是其受欢迎的原因之一。
如果你正在使用 VSCode,本文就是一份可以帮助你提高效率的扩展列表。
Git Lens
当你和别人协同开发项目时,这个扩展能让你一眼就看到代码是谁写的。它显示了提交或更改代码的时间以及作者。
有时候,你的团队成员提交的代码可能会破坏项目的其他特性,这时它就很有帮助。你可以点击这里了解详情。
Wallaby.js
Wallaby.js 是一个智能的 JavaScript 测试运行器,可以持续运行你的测试。当你更改代码(甚至还没有保存文件)时,它就会将代码覆盖率和其他测试结果直接报告给你的代码编辑器。
这个扩展有助于提高你的开发效率。你可以点击这里了解详情。
TypeScript Hero
TypeScript 是 JavaScript 的超集,它有可选的类型并编译成纯 JavaScript。当我们使用 TypeScript 时,这个扩展很有用。它通过一个名为 Light bulb 的特性对导入的代码进行排序和组织,并修复代码错误。
你可以点击这里了解详情。
Prettier Code Formatter
当进行代码格式化时,Prettier 的固定代码格式的功能可以帮助开发人员提高效率。你可以将其配置为保存时格式化,这样会在保存时自动格式化代码。
一旦你有了这个扩展,你将永远不必为格式化代码发愁,因为 Prettier 为你做了。你可以点击这里了解详情。
Path Intellisense
如果你使用 React 或 Angular 这样的 JavaScript 库进行大型项目的开发,你就能感受到在导入组件时去找组件的具体路径是件多么令人厌烦的事。这个扩展可以帮助你在导入时自动补全组件的路径。
它还可以帮助你自动完成 HTML 文件中的文件引用。你可以点击这里了解详情。
Debugger for Chrome
我们都知道,有时候调试程序是一件令人厌烦的事,这个扩展用于辅助你调试 JavaScript 代码。这是微软开发的扩展。我们可以设置断点,逐步执行代码,调试动态添加的脚本等。
假设我们有一个函数,我们不确定它是否正在执行,这个扩展可以设置断点,如果在断点处暂停,说明它正在执行。你可以点击这里了解详情。
Bracket Pair Colorizer
这个扩展通过颜色来标记配对的括号。当你在进行调试,而且代码量很大时,这个扩展可以说是救世主。
用户可以根据需要,定义某些字符的配对,还可以定义这些字符在代码中的颜色。你可以点击这里了解详情。
JavaScript (ES6) Code Snippets
如果你是一名 JavaScript 开发人员,它能帮助你快速构建新项目并节省大量时间。由于它为许多通用的 JavaScript 函数提供了预定义的代码片段,所以你再不需要手动输入所有代码。
这个插件对对 TypeScript,React,Vue 和 HTML 都提供支持。如果你使用 React,还有一个类似的扩展(ES7 React/Redux/GraphQL/React-Native snippets)可以使用。
这里是它们的链接:JS snippets,React Snippets。
Live Share
当你与团队成员共同解决一个问题,并希望在编辑器上一起处理同一段代码时,这个扩展可以帮助你把代码编辑器的控制权交给团队的其他成员,同时你仍然可以进行操作。
你还可以共享终端实例、本地主机 web 应用程序、语音呼叫等等。这个扩展由微软提供。你可以点击这里了解详情。
ESLint
由于 JavaScript 是一种高度灵活的语言,一些小错误可能导致大问题。因此,在处理庞大的代码库时,我们需要一个 linter 和一个 formatter。这个扩展可以帮助你完成此项工作。它可以自动对你的代码进行格式化,还能发现代码里的错误。
遵循 ESLint 规则会让你的代码离良好的规范更近一步。你可以点击这里了解详情。
Paste JSON as Code
作为开发人员,你经常要处理接口。我们都知道 API 中最常用的数据结构是 JSON。为了避免一些可能造成应用程序崩溃的类型错误,我们需要定义类或接口。这个扩展可以根据 JSON 数据生成一个类。
因此,我们可以使用它一键生成类,而不必手动编写类代码,因而节省了时间。这个扩展支持大多数流行的语言。你可以点击这里了解详情。
Peacock
当你在多个工作区进行开发时,这个扩展可以显示已经切换过的工作区以及当前所处的工作区。
你可以点击这里了解详情。
Better Comments
这个扩展可以帮助你在代码中创建更人性化的注释。它可以让你为不同类型的注释(比如待办事项、高亮显示、警报等)设定不同的颜色代码。
强烈建议编写通常遵循的干净且文档化的代码。你可以点击这里了解详情。
Search node_modules
当我们构建组件库或者在不同的应用里使用组件时,我们肯定会对 node modules 做一些修改。这个扩展可以让你快速浏览 node modules 目录中的文件。
你可以点击这里了解详情。
Rest Client
作为开发人员,我们每天都会使用 Postman 来检测来自 API 的响应。这个扩展可以让你直接在 VSCode 中发出 HTTP 请求并查看响应,而无需在两个应用程序之间切换。
你可以点击这里了解详情。