原文：提高 JavaScript 開(kāi)發(fā)效率的高級(jí) VSCode 擴(kuò)展！

作者：前端小智

Quokka.js

Quokka.js 是一個(gè)用于 JavaScript 和 TypeScript 的實(shí)時(shí)運(yùn)行代碼平臺(tái)。這意味著它會(huì)實(shí)時(shí)運(yùn)行你輸入后的代碼，并在編輯器中顯示各種執(zhí)行結(jié)果，建議親自嘗試一下。

安裝此擴(kuò)展后，可以按Ctrl / Cmd（?）+ Shift + P顯示編輯器的命令選項(xiàng)板，然后鍵入 Quokka 以查看可用命令的列表。選擇并運(yùn)行 “New JavaScript File”命令。你也可以按（?+ K + J）直接打開(kāi)文件。在此文件中輸入的任何內(nèi)容都會(huì)立即執(zhí)行。

Quokka.js類(lèi)似的擴(kuò)展 –

Code Runner – 支持多種語(yǔ)言，如C，C ++，Java，JavaScript，PHP，Python，Perl，Perl 6等。

Runner

括號(hào)配對(duì)著色(Bracket Pair Colorizer) 和 彩虹縮進(jìn)(Indent Rainbow)

花括號(hào)和圓括號(hào)是許多編程語(yǔ)言不可分割的部分，在 JavaScript 等語(yǔ)言中，在一屏代碼中花括號(hào)和園括號(hào)可能有多層嵌套，有些括號(hào)不太容易識(shí)別哪個(gè)對(duì)應(yīng)哪個(gè)，然而卻沒(méi)有簡(jiǎn)單的方法來(lái)識(shí)別這些括號(hào)前后的對(duì)應(yīng)關(guān)系。

括號(hào)配對(duì)著色(Bracket Pair Colorizer) 和 彩虹縮進(jìn)(Indent Rainbow)。這是兩個(gè)不同的擴(kuò)展。然而，他們就像是一對(duì)情侶，可以完美的配合使用。這些擴(kuò)展將為你的編輯器添加一系列顏色，并使代碼塊易于辨別，一旦你習(xí)慣了它們，如果 VSCode 沒(méi)有它們就會(huì)讓人覺(jué)得很平淡。

不使用括號(hào)配對(duì)著色(Bracket Pair Colorizer) 和 彩虹縮進(jìn)(Indent Rainbow)

使用括號(hào)配對(duì)著色(Bracket Pair Colorizer) 和 彩虹縮進(jìn)(Indent Rainbow)后

snippets(代碼片段)

代碼片段是編輯器中的短代碼。因此，可以輸入 imr 并按Tab 來(lái)展開(kāi)該代碼片段，而不是'import React from '。類(lèi)似地，clg 變成了 console.log。

各種各樣的框架和類(lèi)庫(kù)都有很多代碼片段：Javascript，React，Redux，Angular，Vue，Jest。 我個(gè)人認(rèn)為 Javascript 代碼片段非常有用，因?yàn)槲抑饕褂?JS 。

一些很好的代碼片段擴(kuò)展 –

JavaScript (ES6) code snippets

React-Native/React/Redux snippets for es6/es7

React Standard Style code snippets

TODO高亮

通常在進(jìn)行編碼時(shí)，你認(rèn)為可能有更好的方法來(lái)執(zhí)行相同的操作。這時(shí)你留下注釋// TODO: 需要重構(gòu) 或其他相關(guān)的東西。但是你很容易忘記了這個(gè)注釋?zhuān)⒛愕拇a推送到主版本庫(kù)(master) 或者生產(chǎn)環(huán)境(production)。 但是你如果使用 Todo Highlighter（高亮），它會(huì)高亮的顯示并讓你容易看到這個(gè)注釋。

它以明亮的顏色突出代碼中的 “TODO/FIXME” 或代碼任何其他注釋?zhuān)员闶冀K清晰可見(jiàn)。另外還有一個(gè)很好的功能是 List Highlighted annotations ，它會(huì)在控制臺(tái)中列出了所有 TODO。

使用 Todo Highlighter（高亮）類(lèi)似的擴(kuò)展 –

Todo+?—??更強(qiáng)大的 Todo 高亮擴(kuò)展，具有更多功能。

Todo Parser

Import Cost

該擴(kuò)展允許您查看導(dǎo)入模塊的大小，它對(duì) Webpack 中的 bundlers 有很大幫助，你可以查看是導(dǎo)入整個(gè)庫(kù)還是只導(dǎo)入特定的實(shí)用程序。

REST Client

作為 web 開(kāi)發(fā)人員，我們經(jīng)常需要使用 REST api。為了檢查url和檢查響應(yīng)，使用了 Postman 之類(lèi)的工具。但是，既然編輯器可以輕松地完成相同的任務(wù)，為什么還要使用不同的應(yīng)用程序呢? REST Client 它允許你發(fā)送 HTTP 請(qǐng)求并直接在 Visual Studio 代碼中查看響應(yīng)。

自動(dòng)閉合標(biāo)記(Auto Close Tag)和自動(dòng)重命名標(biāo)記(Auto Rename Tag)

自從React的出現(xiàn)以及它在過(guò)去幾年獲得的吸引力以來(lái)，以 JSX 形式出現(xiàn)的類(lèi)似 html 的語(yǔ)法現(xiàn)在非常流行。我們還必須使用 JavaScript 標(biāo)簽進(jìn)行編碼。任何web開(kāi)發(fā)人員都會(huì)告訴你，輸入標(biāo)簽是一件痛苦的事情。在大多數(shù)情況下，我們需要一個(gè)能夠快速、輕松地生成標(biāo)簽及其子標(biāo)簽的工具。Emmet 是 VSCode 中一個(gè)很好的例子，然而，有時(shí)候，你只是想要一些簡(jiǎn)單明了的東西。例如自動(dòng)更新標(biāo)簽，它在你輸入開(kāi)始標(biāo)簽時(shí)自動(dòng)生成結(jié)束標(biāo)簽。當(dāng)你更改相同的標(biāo)簽時(shí)，關(guān)閉標(biāo)記會(huì)自動(dòng)更改，這兩個(gè)擴(kuò)展就是這樣做的。

它還適用于JSX和許多其他語(yǔ)言，如XML，PHP，Vue，JavaScript，TypeScript，TSX。

在這里獲取這兩個(gè)擴(kuò)展 – 自動(dòng)閉合標(biāo)記(Auto Close Tag) 和 自動(dòng)重命名標(biāo)記(Auto Rename Tag)。

類(lèi)似的擴(kuò)展 –

Auto Complete Tag?—??結(jié)合自動(dòng)重命名和自動(dòng)閉合標(biāo)記的功能。

Close HTML/XML tag

GitLens

正如其作者所說(shuō)，GitLens 增強(qiáng)了 Visual Studio Code 中內(nèi)置的 Git 功能，它包含了許多強(qiáng)大的功能，例如通過(guò)跟蹤代碼顯示的代碼作者，提交搜索，歷史記錄和GitLens資源管理器。你可以在此處閱讀這些功能的完整說(shuō)明。

類(lèi)似的擴(kuò)展 –

Git History?—?顯示提交歷史的精美圖表等等。推薦。

Git Blame??— 它允許您在狀態(tài)欄中查看當(dāng)前所選行的Git Blame信息。 GitLens也提供了類(lèi)似的功能。

Git Indicators — 它允許你查看受影響的文件以及狀態(tài)欄中添加或刪除的行數(shù)。

Open in GitHub / Bitbucket / Gitlab / VisualStudio.com ! — 它允許您使用單個(gè)命令在瀏覽器中打開(kāi)repo。

Git項(xiàng)目管理器(Git Project Manager,GPM)

Git項(xiàng)目管理器(Git Project Manager,GPM)允許你直接從 VSCode 窗口打開(kāi)一個(gè)針對(duì)Git存儲(chǔ)庫(kù)的新窗口。 基本上，你可以打開(kāi)另一個(gè)存儲(chǔ)庫(kù)而無(wú)需離開(kāi)VSCode。

安裝此擴(kuò)展后，您必須將 gitProjectManager.baseProjectsFolders 設(shè)置為包含 repos 的URL列表。例如：

{ ? ?"gitProjectManager.baseProjectsFolders": [ ? ? ? ?"/home/user/nodeProjects", ? ? ? ?"/home/user/personal/pocs" ? ?]} 

類(lèi)似的擴(kuò)展 –

Project Manager – 我沒(méi)有親自使用它，但它有百萬(wàn)+安裝。所以建議你一定要看一下。

Indenticator(縮進(jìn)指示器)

它在視覺(jué)上突出顯示當(dāng)前的縮進(jìn)個(gè)數(shù)，因此，你可以輕松區(qū)分在不同級(jí)別縮進(jìn)的各種代碼塊。

VSCode Icons

使您的編輯更具吸引力的圖標(biāo)！

類(lèi)似的擴(kuò)展 –

VSCode Great Icons

Studio Icons

Dracula (Theme)

Dracula 是我最喜歡的主題。

我們可以使用快捷鍵來(lái)快速的選擇更換主題；

首先：按下 Ctrl + k

然后再按下：Ctrl + t

其它推薦

Fira Code?—?帶編程連體字的等寬字體。 愚人碼頭注：clone 項(xiàng)目后，找到 ttf 文件夾，然后安裝該文件夾中的字體文件。重新啟動(dòng) VSCode ，選擇TOOLS -> Options -> Fonts and Colors ，選擇 Fira Code 即可。

Live Server?—?一個(gè)具有靜態(tài)和動(dòng)態(tài)頁(yè)面的實(shí)時(shí)重新加載功能的本地開(kāi)發(fā)服務(wù)器。

EditorConfig for VS Code – 此插件嘗試使用.editorconfig文件中的設(shè)置覆蓋用戶/工作區(qū)設(shè)置，不需要其他或特定于 vscode 的文件。與任何EditorConfig插件一樣，如果未指定root = true，EditorConfig將繼續(xù)在項(xiàng)目外部查找.editorconfig文件。

Prettier for VSCode?—?一個(gè)代碼格式化工具。

Bookmarks – 它可以幫助您在代碼中導(dǎo)航，輕松快速地在重要位置之間移動(dòng)。不再需要搜索代碼，它還支持一組選擇命令，允許您選擇書(shū)簽線和書(shū)簽線之間的區(qū)域，它對(duì)日志文件分析非常有用。

Path Intellisense?—?Visual Studio Code插件，可自動(dòng)填充文件名。

Version Lens?—?在Visual Studio代碼編輯器中顯示npm，jspm，bower，dub和dotnet核心的軟件包版本信息。

關(guān)注公眾號(hào)【grain先森】，回復(fù)關(guān)鍵詞 【18福利】，獲取為你準(zhǔn)備的年終福利，更多關(guān)鍵詞玩法期待你的探索~