用於高效 Web 開發的十個 Visual Studio 代碼擴展

語言: CN / TW / HK

作為軟件開發人員,提高工作效率的關鍵之一是最大限度地提高代碼編輯器的功能。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 設置本地服務器而只想使用靜態 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

結論

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