機翻自 Nazere Wright 的 《10 Visual Studio Code Extensions for Productive Web Development》。
Visual Studio Code可以說是軟件開發人員最流行，最廣泛采用的代碼編輯器。Visual Studio Code 具有廣泛的擴展，這些擴展擴展了代碼編輯器的功能。
作為軟件開發人員，提高工作效率的關鍵之一是最大限度地提高代碼編輯器的功能。Visual Studio Code本身具有大量功能。使用不帶擴展的代碼編輯器甚至可能足以完成手頭的任務。然而，軟件用例已經變得更加復雜和利基。在這種情況下，擴展可以幫助提高開發環境的質量。
您可能不需要或使用下面的所有擴展程序。但是，這就是Visual Studio Code作為通用代碼編輯器的美妙之處。這些擴展中的每一個的用法將根據您手頭的任務而有所不同。
JAVAScript (ES6) Code Snippets
JavaScript （ES6） Code Snippets 是任何類型 JavaScript 的非常有用的擴展。這包括TypeScript和主要的JavaScript框架。
該擴展為常見任務（如導入整個模塊、導入模塊的一部分和需要包）提供代碼段。此外，還有大量代碼段可用于快速創建命名導出、構造函數和許多更常見的 ES6 任務。所有代碼段都以分號自動進行。
您可以在此處找到代碼段參考。
ESLint
ESLint 是一個 JavaScript linter，它會自動突出顯示 JavaScript 代碼中的語法錯誤。Visual Studio Code已經為原生JavaScript內置了Intellisense。但是，ESLint 允許您將這些 linting 功能引入主要框架，如 Vue、Angular 和 React。
ESLint 會突出顯示代碼中的錯誤，還可以自動解決錯誤。最后，ESLint 可以集成到您的版本控制工作流中。這將確保所有貢獻者都遵循代碼庫中的一致約定。
Auto Close Tag
你有沒有使用Visual Studio Code來創建一個帶有html的靜態網站？如果是這樣，您知道有時為DOM樹中的每個元素編寫打開和關閉HTML標記是非常重復的。
自動關閉標記擴展通過自動關閉 HTML（和 XML）標記來解決此問題。添加標記后，光標將位于開始標記和結束標記之間。這有助于快速創建子元素或添加文本內容。此擴展也支持諸如 之類的自關閉標記。<input />
Prettier
此擴展是軟件開發人員的必備功能。老實說，我無法想象在不使用Prettier的情況下編寫JavaScript，HTML或css。Prettier 是一種代碼格式擴展，它強制實施一致的編寫風格，例如設置最大行長度，并在必要時包裝代碼。總體而言，Prettier旨在使您的代碼在每次保存到文件時更清晰。
Fast Arrow
你使用JavaScript ES6箭頭函數嗎？如果是這樣，此擴展程序將對您非常有幫助。快速箭頭提供了一組代碼段，這些代碼段將自動創建箭頭函數。根據您使用的代碼段，光標將顯示在箭頭函數的不同區域。
可用的快速箭頭代碼段
fa— 使用此代碼段時，將創建一個箭頭函數，您的光標將從函數的正文區域開始。
faa— 將創建一個箭頭函數。光標將出現在函數的括號內，以便您可以指定任何函數參數。
fai— 將創建一個內聯箭頭函數。光標將出現在函數的右括號之后。
far— 具有預定義參數的箭頭函數。如果您正在使用 Promises 或從外部 API 獲取任何數據，則此代碼段非常有用。response
Rainbow Brackets
處理較大的JavaScript文件可能非常棘手。如果您正在使用包含大量左括號和右括號（和括號）的函數，您可能會對特定符號（函數，if語句等）的開始和結束位置感到困惑。
彩虹支架擴展可以減輕搜索函數的壓力，尋找匹配的支架。當您在特定函數中向下移動括號級別時，括號集的顏色將與上一個括號集的顏色不同。這為您提供了文件中函數或語句范圍的絕佳可視化指示器。
Live Server
Live Server擴展允許開發人員通過Visual Studio Code啟動本地開發服務器。這就像在安裝后單擊編輯器右下角顯示的按鈕一樣簡單。此外，服務器還具有實時重新加載功能。這意味著，一旦您對文件進行更改并保存，您的網頁將自動重新加載。Go Live
對于可能不想使用 Node.js 或 Python/ target=_blank class=infotextkey>Python 設置本地服務器而只想使用靜態 Web 文件的開發人員，此擴展非常有用。
Path Intellisense
作為Web開發人員，在處理HTML文件時，我們知道會有很多其他文件（JS，CSS）將加載到當前文件中。這包括可能位于項目其他目錄中的 CSS 和 JavaScript 文件。
隨著項目大小的不斷增加，在加載外部文件時指定正確的路徑名將變得更加麻煩。這就是Path Intellisense拯救一天的地方！Path Intellisense 在將文件加載到 HTML 中或需要 JavaScript 中的文件時自動完成文件路徑。
有時您可能會忘記某個文件的位置。當 Path Intellisense 可以為您執行此操作時，為什么要花時間在源代碼中搜索此文件？
Polacode
你有沒有想過創建代碼片段的漂亮屏幕截圖？您可以使用 Polacode 擴展在 Visual Studio Code 中完成此操作。
Polacode實際上是你的代碼的寶麗來。捕獲源代碼的高質量圖像，并使用漂亮的字體格式化代碼。
安裝后，您可以在 mac 或 windows 上按鍵以打開 VS Code 命令面板。鍵入編輯器中顯示的文本輸入。選擇第一個選項。第二個窗口將出現在源代碼旁邊。接下來，轉到您的文件并突出顯示要捕獲并粘貼到Polacode窗口中的代碼段。最后，您可以調整圖像大小并將其保存到計算機。command + shift + pctrl + shift + ppolacode>
GitLens
本機 VS Code 附帶 Git 版本控制功能。但是，GitLens 是一個可以豐富版本控制體驗的擴展。GitLens 非常適合具有許多開發人員貢獻的大型項目。
一目了然，您將在文件的每一行上獲得一些有用的版本控制信息。您可以看到誰是文件中特定行的作者。這為所有貢獻的開發人員提供了誰添加了什么的知識。如果代碼發生沖突，開發人員會收到直接的通信線路。
一個好的建議是將以下行添加到 VS Code 設置中。這將刪除每行上顯示的分散注意力的批注。
"gitlens.currentLine.enabled": false
- 1.
結論
在本文中，我們回顧了 10 個最佳的 Visual Studio Code 擴展，這些擴展可在開發 Web 應用程序時提高工作效率。還有更多的擴展涵蓋了大量的用例。這顯示了Visual Studio Code作為通用代碼編輯器的美妙之處。
