如今，Visual Studio Code無疑是最受歡迎的輕量級程式碼編輯器。 VS Code的強大無疑來自於它的插件市場。多虧了開源社區，VS Code現在幾乎對所有的程式語言、框架和開發技術都有支援。
提供這種支援的方式是多樣的，主要包括了為特定技術提供程式碼片段、語法高亮、Emmet以及智慧提示功能。
以下這篇文章給大家推薦幾個提升 JavaScript 開發效率的進階 VSCode 擴充功能！
Quokka.js
Quokka.js 是 JavaScript 和 TypeScript 的即時運行程式碼平台。這意味著它會即時運行你輸入後的程式碼，並在編輯器中顯示各種執行結果，建議親自嘗試。
安裝此擴充功能後，可以按Ctrl / Cmd（⌘） Shift P顯示編輯器的命令選項板，然後鍵入Quokka 以查看可用命令的列表。選擇並執行 “New JavaScript File”指令。你也可以按（⌘ K J）直接開啟檔案。在此文件中輸入的任何內容都會立即執行。
Quokka.js類似的擴展–
#括號配對著色(Bracket Pair Colorizer) 和彩虹縮排(Indent Rainbow)
花括號和圓括號是許多程式語言不可分割的部分，在JavaScript 等語言中，在一屏程式碼中花括號和園括號可能有多層嵌套，有些括號不太容易辨識哪一個對應哪一個，然而卻沒有簡單的方法來辨識這些括號前後的對應關係。
括號配對著色(Bracket Pair Colorizer) 和 彩虹縮排(Indent Rainbow)。這是兩個不同的擴充。然而，他們就像是一對情侶，可以完美的配合使用。這些擴充將為你的編輯器添加一系列顏色，並使程式碼區塊易於辨別，一旦你習慣了它們，如果 VSCode 沒有它們就會讓人覺得很平淡。
不使用括號配對著色(Bracket Pair Colorizer) 和彩虹縮排(Indent Rainbow)
使用括號配對著色(Bracket Pair Colorizer) 與彩虹縮排(Indent Rainbow)後
snippets(程式碼片段)
#程式碼片段是編輯器中的短程式碼。因此，可以輸入 imr 並按Tab 來展開該程式碼片段，而不是'import React from '。類似地，clg 變成了 console.log。
各種各樣的框架和類別庫都有很多程式碼片段：Javascript，React，Redux，Angular，Vue，Jest。我個人認為 Javascript 程式碼片段非常有用，因為我主要使用 JS 。
一些很好的程式碼片段擴充–
TODO高亮
通常在進行編碼時，你認為可能有更好的方法來執行相同的操作。這時你留下註解// TODO: 需要重構 或其他相關的東西。但是你很容易忘記了這個註釋，並將你的程式碼推送到主版本庫(master) 或生產環境(production)。但是你如果使用 Todo Highlighter（高亮），它會高亮的顯示並讓你容易看到這個註解。
它以明亮的顏色突出程式碼中的 “TODO/FIXME” 或程式碼任何其他註釋，以便始終清晰可見。另外還有一個很好的功能是 List Highlighted annotations ，它會在控制台中列出了所有 TODO。
使用Todo Highlighter（高亮）類似的擴充–
#Import Cost##該擴充功能允許您查看導入模組的大小，它對Webpack 中的bundlers 有很大幫助，你可以查看是導入整個庫還是只導入特定的實用程式。
REST Client
作為 web 開發人員，我們常常需要使用 REST api。為了檢查url和檢查回應，使用了 Postman 之類的工具。但是，既然編輯器可以輕鬆地完成相同的任務，為什麼還要使用不同的應用程式呢?
REST Client
它允許你發送 HTTP 請求並直接在 Visual Studio 程式碼中查看回應。
自動閉合標記(Auto Close Tag)和自動重命名標記(Auto Rename Tag)
自從React的出現以及它在過去幾年獲得的吸引力以來，以JSX 形式出現的類似html 的語法現在非常流行。我們還必須使用 JavaScript 標籤進行編碼。任何web開發人員都會告訴你，輸入標籤是一件痛苦的事。在大多數情況下，我們需要一個能夠快速、輕鬆地產生標籤及其子標籤的工具。 Emmet 是 VSCode 中一個很好的例子，然而，有時候，你只是想要一些簡單明了的東西。例如自動更新標籤，它會在你輸入開始標籤時自動產生結束標籤。當你更改相同的標籤時，關閉標記會自動更改，這兩個擴充就是這樣做的。
它也適用於JSX和許多其他語言，如XML，PHP，Vue，JavaScript，TypeScript，TSX。
在這裡取得這兩個擴充 –
自動封閉標記(Auto Close Tag)
和 自動重新命名標記(Auto Rename Tag)。
類似的擴展–
- #Auto Complete Tag
—結合自動重命名和自動閉合標記的功能。
- Close HTML/XML tag
#GitLens
正如其作者所說，GitLens 增強了Visual Studio Code 中內建的Git 功能，它包含了許多強大的功能，例如透過追蹤程式碼顯示的程式碼作者，提交搜索，歷史記錄和GitLens資源管理器。你可以在此處閱讀這些功能的完整說明。
類似的擴充 –
Git專案管理器(Git Project Manager,GPM)
Git專案管理器(Git Project Manager,GPM)允許你直接從VSCode 視窗開啟一個針對Git儲存庫的新視窗。基本上，你可以打開另一個儲存庫而無需離開VSCode。
安裝此擴充功能後，您必須將 gitProjectManager.baseProjectsFolders 設定為包含 repos 的URL清單。例如：
{
"gitProjectManager.baseProjectsFolders": [
"/home/user/nodeProjects",
"/home/user/personal/pocs"
]
}登入後複製
類似的擴充 –
#Project Manager – 我沒有親自使用它，但它有百萬 安裝。所以建議你一定要看一下。
Indenticator(縮排指示器)
它在視覺上突出顯示目前的縮排數，因此，你可以輕鬆區分在不同層級縮排的各種程式碼區塊。
VSCode Icons
#讓您的編輯更具吸引力的圖示！
類似的擴充–
##Studio Icons
Dracula (Theme)
Dracula
是我最喜歡的主題。
我們可以使用快速鍵來快速的選擇更換主題；
#首先：按下Ctrl k-
然後再按下： Ctrl t
其它推薦
-
#Fira Code — 帶程式設計連體字的等寬字體。愚人碼頭註：clone 專案後，找到 ttf 資料夾，然後安裝該資料夾中的字型檔案。重新啟動 VSCode ，選擇TOOLS -> Options -> Fonts and Colors ，選擇 Fira Code 即可。 -
Live Server — 一個具有靜態和動態頁面的即時重新載入功能的本機開發伺服器。 -
EditorConfig for VS Code### – 此插件嘗試使用.editorconfig檔案中的設定覆蓋使用者/工作區設置，不需要其他或特定於 vscode 的檔案。與任何EditorConfig插件一樣，如果未指定root = true，EditorConfig將繼續在專案外部查找.editorconfig檔。 ###############Prettier for VSCode### — 一個程式碼格式化工具。 ###
Bookmarks – 它可以幫助您在程式碼中導航，輕鬆快速地在重要位置之間移動。不再需要搜尋程式碼，它還支援一組選擇命令，允許您選擇書籤線和書籤線之間的區域，它對日誌檔案分析非常有用。
Path Intellisense — Visual Studio Code插件，可自動填入檔案名稱。
Version Lens — 在Visual Studio程式碼編輯器中顯示npm，jspm，bower，dub和dotnet核心的軟體套件版本資訊。
推薦教學：vscode教學
以上是提高 JavaScript 開發效率的高階 VSCode 擴充功能！的詳細內容。更多資訊請關注PHP中文網其他相關文章！
