對前端開發人員有用的 VS 代碼擴展

我們在文本編輯器上花費了很多時間，並且時不時地遇到那些讓我們慢下來的令人沮喪的小問題。 也許找到正確的文件需要太長時間，或者找到一個匹配的右括號本身就變成了一個冗長的冒險。

讓我們永遠解決所有這些煩惱。 在這篇文章中，我們研究了用於前端開發的有用的 VS Code 擴展，從精細的生產力助推器到高級調試助手。

目錄

您將在下面找到您可能需要的特定擴展的快速跳轉。 向下滾動查看一般概述。 或者跳過目錄。

• 自動化日誌消息
• 捆綁大小
• 代碼格式化
• 代碼截圖
• 代碼片段（React、Vue、TypeScript）
• 自定義片段
• 註釋
• 調試
• 開發工具
• 文件工具
• 文件標籤和標籤
• 文件夾圖標
• 用於編碼的字體
• 吉特
• Git 歷史
• 突出顯示註釋
• 突出顯示括號和標籤
• 突出顯示有害字符
• 突出顯示縮進
• 突出顯示堆疊上下文
• 突出顯示工作區
• 智能代碼
• 入職
• 快速打開 GitHub
• 寵物
• 快速 JS/TS 原型設計
• 遠程 SSH 訪問
• Sass 編譯
• 技巧和竅門

自動化日誌消息

當涉及到日誌消息時，turbo-console-log 擴展會為您提供支持。 它使編寫有意義的日誌消息的操作自動化並自動插入它們。

您需要做的就是選擇要調試的變量，按Ctrl + Alt + L ，日誌消息將插入下一行。 鍵盤快捷鍵可讓您評論、取消評論或刪除當前文檔中的所有日誌消息。

控制捆綁包大小

我們都知道性能很重要，但在實踐中，當您在編寫代碼的過程中不忘記它可能是一個很大的挑戰。 為了控制你的包大小，導入成本擴展可以讓你立即知道你是否將一個大包導入到你的項目中。

Import Cost 不是捆綁包分析工具，但其構建的目的是幫助您在將性能瓶頸發送給用戶之前找到可能的性能瓶頸。 為此，它會在您導入第三方庫時在您的代碼行旁邊顯示導入的第三方庫的大小，從而為您提供即時反饋。 一個得心應手的小幫手。

代碼格式化，自動化

編寫代碼時，很多時間都花在了格式化上。 Prettier 為您自動完成任務。 它刪除了所有原始樣式並確保輸出的代碼符合一致的樣式。

Prettier 解析您的代碼並使用自己的規則重新格式化它，考慮最大行長度並在必要時包裝代碼。 您決定是否要將其應用於所有語言，或者您可以定義您喜歡手動格式化的語言。 對於難以找到通用風格指南的團隊來說，這也是一個很好的解決方案。

有用的代碼片段（React、Vue、TypeScript、jQuery）

您是否厭倦了一遍又一遍地輸入您經常需要的片段，總是從頭開始？ 這裡有一些方便的小幫手來減輕工作。 對於 Vue，請務必查看 Sarah Drasner 的 Vue.js VS Code Snippets 擴展。 它是為實際使用而構建的，專注於開發人員的人體工程學，而不是對 API 定義進行編目。

Burke Holland 為您提供了一系列基本的 React 片段和命令，這些都是他從日常 React 使用中選擇的。 如果您正在尋找 Angular 代碼片段，John Papa 已經為您提供了保障。 他的擴展為你的 VS Code 設置添加了用於 TypeScript 和 HTML 的 Angular 片段。

這兩個也可能派上用場：Charalampos Karypidis 的 JavaScript 代碼片段擴展包含 ES6 語法的片段，並支持 JavaScript 和 TypeScript。 最後但同樣重要的是，Don Jayamanne 的 jQuery 代碼片段包含 130 多個 jQuery 片段。 安裝後，只需鍵入jq即可獲取所有這些列表。

說到片段：如果您更喜歡一個好的片段庫而不是自己從頭開始定義它們，那麼這些集合會得到您的支持：

• 輔助功能片段
• ES7 React/Redux/GraphQL/React-Native
• CSS
• CSS 網格
• HTML
• 節點.js
• JavaScript (ES6)
• 角 10
• Vue.js + 打字稿
• WordPress
• WordPress 古騰堡
• PHP
• PHP 工具
• 苗條
• TensorFlow

編寫自己的代碼片段

有很多針對不同語言的代碼片段插件，但是你有沒有想過如何在 VS Code 中定義自己的代碼片段？ Maurice Borgmeier 總結了您開始時需要知道的一切。

關於該主題的另一篇精彩文章來自 Rob O'Leary。 他深入探討了何時以及為什麼使用代碼片段，仔細研究了不同類型的代碼片段，VS Code 如何處理它們，當然，最後但並非最不重要的是，如何編寫自己的代碼片段。

代碼截圖，花式方式

老實說，拍攝漂亮的代碼截圖可能是一個挑戰。 Polacode 就是為了改變這一點。

Polacode 被描述為“代碼的寶麗來”，可讓您直接在 VS Code 中截取和編輯代碼的屏幕截圖。 您可以通過拖動角來調整代碼容器的大小並使用命令來控製圖像外觀。 一個很好的解決方案，可以讓你花費這麼多小時的代碼在最好的光線下閃耀——例如在博客文章或演示文稿中。

人性化評論

你如何處理評論？ 如果您的代碼需要大量解釋，最好讓那些通常呈灰色顯示的註釋更人性化，這樣如果註釋提醒您注意已棄用的方法，則更容易一目了然，例如，或者如果這是你的隊友留給你的待辦事項。

VS Code 擴展 Better Comments 可幫助您做到這一點，將註釋分類為警報、查詢、待辦事項、突出顯示等。 註釋掉的代碼也可以設置樣式以明確它不應該存在。

VS Code 中的 Chrome 調試

您是否使用 Chrome 並在調試時發現自己在瀏覽器和編輯器之間來回切換？ 然後你可能想試試 VS Code Chrome 調試器。 它可以幫助您直接從 VS Code 調試在 Chrome 中運行的客戶端 JavaScript 代碼。

調試器通過其 Chrome 調試器協議連接到 Chrome，它將瀏覽器中加載的文件映射到您在 VS Code 中打開的文件。 因此，無需離開編輯器，您就可以在源代碼中設置斷點，設置要監視的變量，並在調試時查看完整的調用堆棧。 一個讓你的調試程序更簡單的小工具。

用於 VSCode 擴展的 DevTools

將 DevTools 集成到您的代碼編輯器中，這樣您就不需要在兩者之間來回切換，這不是很酷嗎？ 如果您使用的是 VSCode 和 Edge，則可以通過一個小擴展來實現。

該擴展在 VSCode 中顯示了瀏覽器的元素和網絡工具，使您能夠查看運行時 HTML 結構、更改樣式和佈局、執行診斷和調試項目 - 無需離開編輯器。 順便說一句，Rachel Weil 幾週前在舊金山 SmashingConf 上分享了一些使用基於 Chromium 的瀏覽器（如 Edge 和 Chrome）的便捷 DevTools 技巧。 請務必收聽錄音，讓您的 DevTools 技能更上一層樓。

VS Code 的文件管理工具

很多時間通常花在組織和管理文件上。 File Utils 使任務更方便。

該擴展使您能夠使用少量命令創建、複製、移動、重命名和刪除文件和目錄。 它還支持大括號擴展，可以自動生成任意字符串來設置您的文檔結構。

在編輯器中向文件添加標籤

在大型項目中，要查找組件的一個特定變體，或者只是正確的文件，您需要知道您實際要查找的文件。 但是，如果您可以為特定文件添加書籤或標籤，這樣您就可以更快地找到它們呢？

File Ops VS Code Extension 允許您標記和別名文件，然後在它們之間快速切換。 您還可以快速列出所有標籤以防忘記它們，查看當前目錄中的所有文件並在同一文件夾中的 .css 和 .js 文件之間切換。 您還可以觀看視頻，了解它是如何工作的。 現在它會派上用場！

VS Code 中的文件夾圖標

VS Code中的自定義文件和文件夾圖標？ 是的，請！ 為了幫助您更輕鬆地操作您的工作區，即使涉及大量文件和文件夾，VS Code Icons 團隊也發布了一個擴展，可以為您的編輯器帶來圖標。 從“access”到“zip”，從“Android”到“www”，集合一定有你需要的文件和文件夾圖標。

項目特定的圖標切換功能和項目自動檢測將自動檢測您在工作區中打開的項目類型，並提示您相應地切換圖標。 如果您願意，也可以使用自定義圖標。

用於編碼的等寬字體

編程字體無疑是排版中的主力軍。 它們需要提供出色的可讀性，支持快速文本掃描，並防止眼睛疲勞，即使開發人員查看代碼數小時也是如此。 為了幫助您找到滿足您需求的編程字體，Chris Coyier 策劃了Coding Fonts ，選擇了 30 多種（大部分是免費的）等寬字體，它們都符合此標準。

為了更容易做出決定，每種字體都附有簡短的描述、所有字符的概述，以及日夜模式下的 HTML、CSS 和 JavaScript 代碼示例。 Mostafa Gaafar 為開發人員維護了一個類似的字體列表，還可以選擇查看不同配色方案的代碼示例。 要將自定義字體添加到 VS Code，您需要在“設置”中定義字體。

Git 增壓

增強 VS Code 中內置的 Git 功能的一個有用擴展是 GitLens。 為了更好地理解您正在處理的代碼，GitLens 可讓您一瞥誰、為什麼以及何時更改了行或代碼塊。

該擴展一目了然地可視化代碼作者身份，幫助您無縫導航和探索 Git 存儲庫，通過比較命令獲得有價值的見解等等。 無需離開編輯器，您需要了解的有關代碼庫的所有信息都觸手可及。

VS Code 中的 Git 歷史

查看和搜索 git log 以及圖形和詳細信息、查看您正在處理的文件的先前副本、搜索歷史記錄、比較分支和提交——這些只是 Git History 擴展提供的一些簡化功能您的工作流程。

說到 Git：在使用 Git 時，另一個值得仔細研究的 VS Code 擴展是 Git Graph：它可以讓您查看存儲庫的 Git 圖並輕鬆地從圖中執行 Git 操作。

突出顯示代碼中的註釋

您是否有時會忘記查看您在編碼時添加的待辦事項？ TODO Highlight 擴展程序會提醒您在發佈到生產環境之前需要注意一些註釋或事情。

關鍵字TODO和FIXME是預先配置的，但您可以根據自己的喜好自定義配置。 命令會在您的代碼中或作為所有註釋的列表突出顯示打開的註釋。 一個很棒的小提醒。

突出顯示匹配的括號和標籤

激烈的編碼會議會使眼睛疲勞，因此任何有助於提高視覺清晰度的東西都是受歡迎的幫手。 要在使用 VS Code 時將語法高亮提升到一個新的水平，您可能需要查看 Bracket Pair Colorizer。 擴展識別匹配的括號 - 以您定義的顏色。

現在您已經完全控制了括號，另一個需要注意的小細節是匹配開始和結束標籤。 VS Code 已經帶有標籤匹配功能，但它是相當基礎的。 突出顯示匹配標籤擴展可以更徹底地完成工作，匹配任何地方的標籤——從標籤屬性到內部字符串——甚至在狀態欄中突出顯示從標籤到標籤的路徑。 廣泛的樣式選項可讓您自定義標籤的突出顯示方式。 官方支持 HTML 和 JSX。

揭示有害角色

零寬度空格和非連接符、不間斷空格、左右雙引號——編碼時，某些字符可能是有害的，因為它們不可見或看起來像合法字符。 Gremlins Tracker 會為您找到它們。

Gremlins Tracker 使用配色方案來提醒您有害、潛在有害和危害較小的字符。 包含此類字符的行標有 Gremlins 圖標，將光標移到該字符上會提示您可能存在問題。 如果您願意，您可以添加新的 gremlins 字符或為特定語言覆蓋它們。

突出顯示縮進

縮進是確保您的代碼可以被快速掃描的關鍵。 Indent-Rainbow 是一個方便的小插件，可以使縮進更具可讀性。 它為文本前面的縮進著色，每一步交替使用四種不同的顏色，並標記那些縮進不是製表符大小倍數的行。

雖然錯誤突出顯示很有用，但在某些情況下它可能會妨礙您。 例如，在處理 RegEx 模式時。 幸運的是，Indent-Rainbow 可以讓你關閉錯誤突出顯示，就像評論行一樣，如果你願意，你甚至可以跳過整個語言。

可視化堆疊上下文

使用z-index時，您是否難以發現堆疊上下文？ 你不是一個人！ 如果您有時發現自己在一個元素上將z-index設置為十億並且它沒有按照您的堆疊順序向前移動，那麼 CSS Stacking Contexts 適合您。

該擴展使堆疊上下文在 CSS 和 SCSS 中可見，因此您可以在編寫z-index聲明時自信地使用小值。 此外，它還會告訴您z-index聲明何時無效並提供快速修復。

自定義顏色來區分工作區

如果您經常打開多個 VS Code 實例並且難以區分它們，Peacock 可能值得仔細研究一下：該擴展巧妙地改變了您工作區的顏色主題。

但是，Peacock 不僅在同時處理多個項目時大放異彩。 當您使用 VS Live Share 或 VS Code 的遠程功能並且您想要快速識別您的編輯器時，它也會派上用場。

IntelliSense：人工智能輔助開發功能

IntelliCode 擴展在 Visual Studio Code 中為 Python、TypeScript/JavaScript 和 Java 開發人員提供 AI 輔助開發功能，並基於對代碼上下文的理解與機器學習相結合的見解。

該擴展提供 AI 輔助 IntelliSense，在完成列表頂部顯示為您的代碼上下文推薦的自動完成項。 當涉及到重載時，它不會循環按字母順序排列的成員列表，而是首先向您顯示最相關的一個。 不再需要自己搜索列表。

為您的代碼庫錄製引導式入職培訓

龐大的代碼庫會讓人感到恐懼。 CodeTour 試圖改變這一點。 該擴展允許您直接在編輯器中記錄和回放代碼庫的引導演練。 將其視為一個目錄，可以更輕鬆地加入或重新加入新項目或功能區域、可視化錯誤報告或了解代碼審查的上下文。

要創建代碼瀏覽，您可以註釋代碼行（支持 Markdown）並根據需要導航任意數量的文件，並且記錄器會捕獲序列。 遊覽可以簽入回購或導出到“遊覽”文件，以便任何人都可以重播它而無需克隆任何代碼。 便利！

一秒鐘從 GitHub 到 VS Code

一旦你在 GitHub 上發現了一段代碼，如果你想立即開始在你的項目中使用它怎麼辦？ 您可以使用 Github1s，而不是克隆 repo 並找到您需要的文件。 只需在 URL 中的github後添加1s ，按 Enter，repo 或單個文件將直接在 VS Code 中打開。

您還可以使用書籤在github.com和github1s.com之間快速切換，訪問私有存儲庫，並且項目頁面上還列出了許多瀏覽器擴展。 如果您需要替代方案，Gitpod 是一個稍微高級一點的選項，它還允許您啟動在線開發環境、運行並行工作區並協作處理代碼庫。

VS 代碼的寵物

曾經想增強你的 VS 代碼編輯器嗎？ 那麼，添加一隻貓、狗、蛇、橡皮鴨，甚至是好的 ol' Clippy 怎麼樣？ 您需要做的就是安裝 vscode-pets 並運行vscode-pets.start命令以查看面板。 一旦你選擇了一隻寵物，它的皮毛顏色和大小，向後靠，看著它們與你互動！

從扔球和和你的寵物玩接球（運行vscode-pets.throw-ball ）到添加額外的寵物（運行vscode-pets.spawn-pet ），你的編碼工作流程一定不會無聊！ 創作者 Anthony Shaw 對想法和討論持開放態度，並隨時歡迎反饋。

加速 JavaScript / TypeScript 原型設計

如果您正在尋找一種方法來加快您的 JavaScript 原型製作過程，那麼 Quokka 就是您的最佳選擇。 快速原型設計遊樂場位於您的編輯器中，並為原型設計、學習和測試 JavaScript 和 TypeScript 提供了速度提升。

當您鍵入時，運行時值會更新並顯示在您的代碼旁邊的 IDE 中。 為了讓您立即啟動並運行，無需配置，您只需打開一個新的 Quokka 文件即可開始試驗。 原型製作快樂！

使用遠程機器作為您的開發環境

出於多種原因，您可能希望使用帶有 SSH 服務器的遠程計算機作為開發環境。 因為您需要比本地機器更快或更專業的硬件，例如，或者調試在其他地方運行的應用程序，例如客戶站點或云中的應用程序。 為了簡化開發和故障排除，Remote - SSH 擴展可以幫助您做到這一點。

該擴展直接在遠程機器上運行命令和其他擴展，因此您的機器上不需要任何源代碼。 相反，您可以像往常一樣打開遠程計算機上的任何文件夾並使用它，充分利用 VS Code 的完整功能集。 便利！

實時編譯 Sass

帶有實時瀏覽器重新加載的實時 Sass 編譯器？ Live Sass 擴展已為您服務。 它可以幫助您實時編譯/轉換您的 SASS/SCSS 文件為 CSS 文件。

功能包括自定義導出 CSS 的文件位置及其樣式和擴展名，有一個快速狀態欄控件，您可以在設置中排除特定文件夾，並且還支持自動前綴。

沒人願意告訴你的技巧和竅門

你真的充分利用了 VS Code 提供的強大功能嗎？ Burke Holland 和 Sarah Drasner 聲稱你沒有，所以為了改變這一點，他們分享了關於 VS Code 的所有最好的東西，沒有人願意告訴你。

從使用正確大小的圖像自動更新 HTML img標籤到在編碼或記錄點以從應用程序中記錄信息時使用字體連字以提高可讀性，“VS Code 可以做到這一點嗎？！” 具有36 個有價值的提示，可讓您的工作流程更加高效。

包起來

實際上有數百個 VS Code 擴展，我們希望這裡列出的一些擴展對您的日常工作很有用——最重要的是可以幫助您避免一些耗時的例行任務。 祝大家編碼愉快！

延伸閱讀

• CSS 審計工具
• CSS 生成器
• SVG 生成器
• HTML 電子郵件工具和模板
• 原版 JavaScript 代碼片段
• 可訪問的前端組件
• 另外，訂閱我們的時事通訊不要錯過下一個。