原文地址 Medium - Top JavaScript VSCode Extensions for Faster Development

VSCode 是一个开源跨平台的编辑器，其高速、可扩展、可定制化等一系列特性，已使得 VSCode 成为程序员最喜爱的编辑器之一，尤其是在 Web 开发社区。要是你还没用过，赶紧下载一个试试吧！

VSCode 可用的扩展有成千上万，这里我就列出几个我自己日常用的吧：

`Quokka.js`

Quokka.js可以作为 JavaScript 和 TypeScript 的快速「原型广场」。意思是它可以在你敲代码时就能立即运行你的代码，并在你的编辑器中展示多种运行结果。你来试试吧：

安装完成Quokka.js后，使用Ctrl/Cmd(⌘) + shift + p打开命令面板，键入Quokka来查看可用的命令列表，选中 New JavaScript File 这一项然后回车运行，你也可以通过⌘ + k + j来直接新建一个文件。接下来，你在该文件中键入的任何代码都会被立即执行。

`Bracket Pair Colorizer` & `Indent Rainbow` 🔥🔥

各种括号都是大部分编程语言中不可缺少的一部分。例如在 JavaScript 中，括号一旦多起来就严重缺乏一个简单的机制去将括号的开始和结束进行配对。有了Bracket Pair Colorizer 和 Indent Rainbow两个扩展后事情就容易多了，这俩扩展的组合绝对是天生一对。使用起来既美观又实用，一旦用习惯了，就再难适应没有它们的日子了。

效果如下⬇️

`Snippets`

Snippets是用于编辑器写代码过程的速写方式。比如你经常写的import React from 'react'就可以使用imr然后按 Tab 键来替代。类似的，可以用clg来替代console.log。

该扩展支持各种类型的语法，比如 JavaScript 、React 、Redux 、Angular 、Vue 、Jest 等。由于我个人经常写 JavaScript，所以我发现这个扩展非常实用。

`Todo Highlighter`

你在写一个函数的时候经常会发现可能存在一个更好的方式来实现同样的功能。于是你会留下一个// TODO: Needs Refactoring的注释或者其他形式来表达相同的意思。但是之后你可能会忘记之前的注释然后直接把代码推送到master或者生产环境中去了。有了这个扩展以后也许就能减少这类事的发生了。它能用易辨识的颜色高亮你的 TODOs，效果如下：

`Import Cost`

这个扩展允许你在引入某个模块的时候实时看到它的大小。这个特性对你的打包器有很大帮助。有助于你选择引入整个库或者是指定的单个模块。

`REST Client`

作为一个 Web 开发人员，我们经常需要与各种 REST API 打交道。通常我们是用类似 postman 这种工具来检查 URL 或是接口响应数据的。但是有了REST Client后，我们就能直接在 VSCode 中查看 HTTP 请求和响应了。

`Auto Close Tag` & `Auto Rename Tag`

自从 React 的问世以及它在过去几年中获得的关注来看，JSX 形式的类 HTML 语法现在十分风靡。标签再一次充斥于我们的代码之中。任何 Web 开发人员都会告诉你输入标签很烦。在大多数情况下，我们需要一种能够快速且轻松地生成标签及其子元素的工具。 Emmet 是 VSCode 中内置的一个非常好的扩展。但是有时候，你只想要一些简单的功能。例如自动闭合标签，它在你键入开始标签时自动生成闭合标签。当你更改相同的标签时，闭合标签页会自动更改。这两个扩展就是专门实现这样的功能的。它们在 JSX、XML、PHP、Vue、JavaScript、TypeScript、TSX中同样适用。

以上就是我在写代码过程中常用的一些扩展，你有没有一些特别喜欢的提高效率的扩展，欢迎留言在评论区。