[譯] 9 個 VSCode 擴充套件，讓你的程式碼敲的飛起?

原文地址 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中同樣適用。

以上就是我在寫程式碼過程中常用的一些擴充套件，你有沒有一些特別喜歡的提高效率的擴充套件，歡迎留言在評論區。