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

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

JavaScript (ES6) Code Snippets

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

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

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

ESLint

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

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

Auto Close Tag

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

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

Prettier

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

Fast Arrow

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

可用的快速箭頭代碼段

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

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

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

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

Rainbow Brackets

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

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

Live Server

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

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

Path Intellisense

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

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

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

Polacode

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

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

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

GitLens

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

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

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

"gitlens.currentLine.enabled": false

結(jié)論

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