作為軟件開發(fā)人員，提高工作效率的關鍵之一是最大限度地提高代碼編輯器的功能。Visual Studio Code本身具有大量功能。使用不帶擴展的代碼編輯器甚至可能足以完成手頭的任務。然而，軟件用例已經(jīng)變得更加復雜和利基。在這種情況下，擴展可以幫助提高開發(fā)環(huán)境的質(zhì)量。

您可能不需要或使用下面的所有擴展程序。但是，這就是Visual Studio Code作為通用代碼編輯器的美妙之處。這些擴展中的每一個的用法將根據(jù)您手頭的任務而有所不同。

JavaScript (ES6) Code Snippets

JavaScript （ES6） Code Snippets 是任何類型 JavaScript 的非常有用的擴展。這包括TypeScript和主要的JavaScript框架。

該擴展為常見任務（如導入整個模塊、導入模塊的一部分和需要包）提供代碼段。此外，還有大量代碼段可用于快速創(chuàng)建命名導出、構(gòu)造函數(shù)和許多更常見的 ES6 任務。所有代碼段都以分號自動進行。

您可以在此處找到代碼段參考。

ESLint

ESLint 是一個 JavaScript linter，它會自動突出顯示 JavaScript 代碼中的語法錯誤。Visual Studio Code已經(jīng)為原生JavaScript內(nèi)置了Intellisense。但是，ESLint 允許您將這些 linting 功能引入主要框架，如 Vue、Angular 和 React。

ESLint 會突出顯示代碼中的錯誤，還可以自動解決錯誤。最后，ESLint 可以集成到您的版本控制工作流中。這將確保所有貢獻者都遵循代碼庫中的一致約定。

Auto Close Tag

你有沒有使用Visual Studio Code來創(chuàng)建一個帶有HTML的靜態(tài)網(wǎng)站？如果是這樣，您知道有時為DOM樹中的每個元素編寫打開和關閉HTML標記是非常重復的。

自動關閉標記擴展通過自動關閉 HTML（和 XML）標記來解決此問題。添加標記后，光標將位于開始標記和結(jié)束標記之間。這有助于快速創(chuàng)建子元素或添加文本內(nèi)容。此擴展也支持諸如 之類的自關閉標記。<input />

Prettier

此擴展是軟件開發(fā)人員的必備功能。老實說，我無法想象在不使用Prettier的情況下編寫JavaScript，HTML或CSS。Prettier 是一種代碼格式擴展，它強制實施一致的編寫風格，例如設置最大行長度，并在必要時包裝代碼。總體而言，Prettier旨在使您的代碼在每次保存到文件時更清晰。

Fast Arrow

你使用JavaScript ES6箭頭函數(shù)嗎？如果是這樣，此擴展程序?qū)δ浅Ｓ袔椭？焖偌^提供了一組代碼段，這些代碼段將自動創(chuàng)建箭頭函數(shù)。根據(jù)您使用的代碼段，光標將顯示在箭頭函數(shù)的不同區(qū)域。

可用的快速箭頭代碼段

fa— 使用此代碼段時，將創(chuàng)建一個箭頭函數(shù)，您的光標將從函數(shù)的正文區(qū)域開始。

faa— 將創(chuàng)建一個箭頭函數(shù)。光標將出現(xiàn)在函數(shù)的括號內(nèi)，以便您可以指定任何函數(shù)參數(shù)。

fai— 將創(chuàng)建一個內(nèi)聯(lián)箭頭函數(shù)。光標將出現(xiàn)在函數(shù)的右括號之后。

far— 具有預定義參數(shù)的箭頭函數(shù)。如果您正在使用 Promises 或從外部 API 獲取任何數(shù)據(jù)，則此代碼段非常有用。response

Rainbow Brackets

處理較大的JavaScript文件可能非常棘手。如果您正在使用包含大量左括號和右括號（和括號）的函數(shù)，您可能會對特定符號（函數(shù)，if語句等）的開始和結(jié)束位置感到困惑。

彩虹支架擴展可以減輕搜索函數(shù)的壓力，尋找匹配的支架。當您在特定函數(shù)中向下移動括號級別時，括號集的顏色將與上一個括號集的顏色不同。這為您提供了文件中函數(shù)或語句范圍的絕佳可視化指示器。

Live Server

Live Server擴展允許開發(fā)人員通過Visual Studio Code啟動本地開發(fā)服務器。這就像在安裝后單擊編輯器右下角顯示的按鈕一樣簡單。此外，服務器還具有實時重新加載功能。這意味著，一旦您對文件進行更改并保存，您的網(wǎng)頁將自動重新加載。Go Live

對于可能不想使用 Node.js 或 Python 設置本地服務器而只想使用靜態(tài) Web 文件的開發(fā)人員，此擴展非常有用。

Path Intellisense

作為Web開發(fā)人員，在處理HTML文件時，我們知道會有很多其他文件（JS，CSS）將加載到當前文件中。這包括可能位于項目其他目錄中的 CSS 和 JavaScript 文件。

隨著項目大小的不斷增加，在加載外部文件時指定正確的路徑名將變得更加麻煩。這就是Path Intellisense拯救一天的地方！Path Intellisense 在將文件加載到 HTML 中或需要 JavaScript 中的文件時自動完成文件路徑。

有時您可能會忘記某個文件的位置。當 Path Intellisense 可以為您執(zhí)行此操作時，為什么要花時間在源代碼中搜索此文件？

Polacode

你有沒有想過創(chuàng)建代碼片段的漂亮屏幕截圖？您可以使用 Polacode 擴展在 Visual Studio Code 中完成此操作。

Polacode實際上是你的代碼的寶麗來。捕獲源代碼的高質(zhì)量圖像，并使用漂亮的字體格式化代碼。

安裝后，您可以在 Mac 或 Windows 上按鍵以打開 VS Code 命令面板。鍵入編輯器中顯示的文本輸入。選擇第一個選項。第二個窗口將出現(xiàn)在源代碼旁邊。接下來，轉(zhuǎn)到您的文件并突出顯示要捕獲并粘貼到Polacode窗口中的代碼段。最后，您可以調(diào)整圖像大小并將其保存到計算機。command + shift + pctrl + shift + ppolacode>

GitLens

本機 VS Code 附帶 Git 版本控制功能。但是，GitLens 是一個可以豐富版本控制體驗的擴展。GitLens 非常適合具有許多開發(fā)人員貢獻的大型項目。

一目了然，您將在文件的每一行上獲得一些有用的版本控制信息。您可以看到誰是文件中特定行的作者。這為所有貢獻的開發(fā)人員提供了誰添加了什么的知識。如果代碼發(fā)生沖突，開發(fā)人員會收到直接的通信線路。

一個好的建議是將以下行添加到 VS Code 設置中。這將刪除每行上顯示的分散注意力的批注。

"gitlens.currentLine.enabled": false

結(jié)論

在本文中，我們回顧了 10 個最佳的 Visual Studio Code 擴展，這些擴展可在開發(fā) Web 應用程序時提高工作效率。還有更多的擴展涵蓋了大量的用例。這顯示了Visual Studio Code作為通用代碼編輯器的美妙之處。