前端vscode必備外掛（vscode常用外掛推薦）

2023-06-06 17:38:26

20款優質VS Code，讓你的開發效率迅速提升！

Python、AI、大資料

VS Code 現如今已經成為一款炙手可熱的開發工具，它以輕量化、功能強大、易於配置、豐富的外掛備受廣大開發者的喜愛。本文，就再來介紹 5 款提升生產力的 VS Code 外掛。

我曾寫過兩篇有關 VS Code 的文章，

我最終還是選擇了 VS code！
10 款 VS Code 外掛神器，第 7 款超級實用！

受到很多同學的喜愛，也被很多自媒體轉載。

在近幾個月裡，我在試用不同的 VS Code 外掛，通過對比，篩選出一些提高開發效率的 VS Code 外掛，推薦給大家，希望能夠得到大家的喜愛！

1. Error Lens

安裝次數：52645

Error Lens是一款把程式碼檢查（錯誤、警告、語法問題）進行突出顯示的一款外掛。

經常與程式碼打交道的同學都應該清楚，大多數開發工具對於程式碼進行都是通過下劃線的方式進行標識。但是，這樣對於程式碼除錯不夠直接和友好。

Error Lens 通過使診斷更加突出，增強了語言的診斷功能，突出顯示了由該語言生成的診斷所在的整行，並在程式碼行的位置以行方式線上列印了診斷訊息。

它具有如下特性，

更明顯地突出顯示錯誤或警告資訊
將診斷結果附加到包含診斷資訊的任何行的末尾，這意味著你不必上下文切換到問題檢視
狀態列顯示開啟檔案的診斷次數（可以配置）
可以配置設定以控制 ErrorLens 顯示增強診斷的方式
適用於任何程式語言

2. Duplicate action

安裝次數：73975

Duplicate action是一款快速複製並建立檔案、資料夾的 VS Code 外掛。

檔案複製和新建，在開發過程中不像語法檢查這樣普遍，也可以說這項功能在開發過程中使用頻率很小，因此，也很少有人會注意到它帶來的繁瑣。每當我們需要複製並新建一個檔案時，需要經過新建空檔案->複製->貼上的過程。

而通過 Duplicat action 只需要一鍵就可以完成檔案和資料夾的複製。

使用方法有兩種：

滑鼠右鍵選擇檔案，點選“Duplicate file”；
點選F1鍵，選擇“Duplicate file”；

3. Git History

安裝次數：2503915

Git History是一款能夠檢視 git 和檔案歷史記錄的 VS Code 外掛。

相對於前兩款，Git History 的名氣要大很多，功能也更加豐富且常用，它具備如下特性，

以影象話方式詳細展現和搜尋 git 日誌內容
檢視檔案副本
檢視和搜尋檔案歷史
比較分支、commit
...

4. jumpy

安裝次數：194559

jumpy是一款類似於 Atom 同名工具的 VS Code 外掛，它提供快速游標移動（跳轉）的功能。

程式碼之間的跳轉是一項非常常用，且非常影響開發效率的功能。如果程式碼行數較少，我們可以通過滾動滑鼠來移動到指定位置。但是，對於幾百、上千行的程式碼，這樣必然會讓開發者感到崩潰。

當 Jumpy 被啟用時，會在游標周圍的區域建立標識(兩個字母)。然後，只需輸入兩個字母的程式碼就可以跳到那個位置。

5. Path Intellisense

安裝次數：3002830

Path Intellisense是一款自動完成檔名、檔案路徑的 VS Code 外掛。

檔案讀寫是開發過程中經常會接觸到的一項功能，無論是用本地離線檔案進行功能測試，還是開發過程中涉及到靜態檔案。

在以往，需要手動去找到指定的檔案，然後拷貝路徑。這樣的繁瑣過程對於少數檔案處理還可以忍受，如果太多的話就成了一項非常影響效率的事情。

Path Intellisense 就可以讓你像補全程式碼一樣去不全檔名，這樣就會大大提升開發過程中的效率。

6. Colorful Comments

Colorful Comments是一款能夠讓你輕鬆建立更加易於閱讀、對使用者更加友好註釋的一款VS Code外掛。

註釋在程式碼中佔據著重要的地位，實現的函式是什麼功能？入參和返回值分別是什麼？

良好的註釋，能夠提升其他團隊開發者的閱讀效率，也能夠減少自己後期維護的成本。

但是，以往的註釋都過於枯燥乏味，顏色單一，沒有區分度。

Colorful Comments讓註釋變得更加豐富多彩，更加易於區分。

使用Colorful Comments時，我們可以用不同的符號來區分註釋的型別，然後VS Code就可以用不同的顏色來區分它們，這樣大大提升了註釋的辨識度。

不同符號和註釋顏色的對應關係如下：

紅色 (!)
藍色 (?)
綠色 (*)
黃色 (^)
粉紅色 (&)
紫色 (~)
深黃 (todo)
灰色 (//)

可以看一下效果：

7. arrr

arrr是一款在前端開發過程中非常高效的一款外掛，它能夠快速把HTML程式碼提取成一個元件。

在開發前端過程中，有很多元件是可以共用的，例如，header、footer等。當然，除了這些之外，視情況而定，在不同系統下總會有很多可以共用的元件。

如果可以共用，那麼就沒有必要在每個頁面都去重複的寫一些HTML，這樣能夠造成巨大的程式碼冗餘。

針對這個問題，我們可以把公共部分提取成一個元件，這樣，在用到的地方直接引入這個元件即可。

arrr就是這樣的一款外掛，使用時只需要選中需要提取成元件的程式碼部分，能夠快速的生成一個元件，並完成匯入部分的程式碼。這樣，就不用開發者再去手動複製、貼上寫一個元件，然後再繁瑣的修改原有程式碼。

8. WakaTime

WakaTime是一款看板外掛，可以用來監控、跟蹤、統計開發者的編碼情況。

每天、每週我都喜歡對自己進行一些總結，我這一天做了什麼？有沒有什麼可量化的指標來衡量我這期間的成果和收穫？

大多數時候都是模模糊糊，結果很不清晰，完成了幾個待辦事項？寫了多少行程式碼？專案進展到什麼程度？這些都需要自己有一個清晰的認識。

資料和圖形是最能夠給人帶來直觀感受和內心衝擊的東西，例如，寫了2000行程式碼、每天平均完成了2個需求、專案進展了45%等等。

WakaTime就是這樣的一款VS Code外掛，它能夠直觀的統計你的程式碼工作量，並且以看板的形式讓你很容易瞭解自己的情況。

使用方法

WakaTime使用時需要一定的配置，首先安裝外掛，然後訪問https://wakatime.com/網站，開啟設定，複製ApiKey，然後回到VS Code中快捷鍵control shift p，搜尋WakaTime:ApiKey，輸入ApiKey確認即可！

9. Rainbow csv

Rainbow csv是一款提升CSV檢視和編輯效率的神器。

CSV這種格式在工作過程中經常會用到，一般我們在做資料相關的工作，CSV常常用於儲存離線資料。

雖然，CSV可以用Excel開啟檢視，但是我個人認為這並不是一個很好的選擇，資料量小的話還可以承受，但是如果資料量達到上萬或者幾十萬，用Excel就很臃腫卡頓了，而且Excel預設還會修改資料中的一些格式，這一點非常令人反感。

如果使用Sublime、VS Code這些文字編輯器的話，就不用忍受格式和卡頓的問題了。

但是，隨之而來的問題的就是可讀性差，列無法對齊，很難區分到底每一列的對應關係。

Rainbow csv提供了幾項強大的特性輕鬆解決VS Code在CSV檔案中遇到的問題：

高亮，輕鬆區分每一列
懸浮，能夠區分每一列的標題頭資訊
自動檢查CSV檔案一致性
列模式編輯
能夠用空格對齊
能夠用類SQL語言搜尋查詢

10. 100 Days of Code

100 Days of Code是一款用於設定並達到目標，提升開發技能的一款VS Code外掛。

我們經常會看到各種各樣的100天挑戰，挑戰持續鍛鍊100天、挑戰內容持續輸出100天...

而100 Days of Code就是一款讓你挑戰開發100天，提升開發技能的一款外掛。

它具有如下特性：

跟蹤進度：記錄每日進度，指標和里程碑，以檢視100天內的進度
收集里程碑：在編碼和解鎖徽章，看到一路成就
儀表板：快速檢視整個挑戰中的總體里程碑進度，最近的日誌和總體編碼時間
備份資料：建立一個免費的軟體帳戶，能夠將挑戰情況備份下來

100天的程式碼外掛基於Code Time構建，Code Time是強大的時間跟蹤外掛，由70,000多名開發人員組成的社羣提供支援。

11. Codelf

安裝次數：2萬

在電腦科學中只有兩件難事:快取失效和命名。

我對這句話深有同感，當開發專案時，命名一直都是一種讓我痛苦的事情。我想，應該不止我一個人有這樣的感覺。

可是，命名又是開發過程中一項非常重要的事情，例如，一個好的函式命名，能夠讓你瞬間明白它實現的功能，這樣就節省了很大一部分時間琢磨一段程式碼到底是什麼含義。

所以，每當開發過程中遇到要命名的變數、函式、類時我就不得不停下開發，苦思冥想半天。

但是，CodeIf的出現讓這個問題迎刃而解，它通過搜尋GitHub, Bitbucket, GitLab來找到真實的使用變數名，為你提供一些高頻使用的詞彙，同時為你標明使用的語言、程式碼連結。

可以直接在網頁上搜尋要命令的詞彙，當然，它不僅有網頁版，也支援VS Code, Atom, Sublime, WebStorm等開發工具。

在VS Code中，Extensions->搜尋“CodeIf”即可完成安裝。

使用時只需要選中變數名，然後右鍵選擇CodeIf就可以跳轉到網頁，顯示候選命名。

12. local history

安裝次數：14萬

修改程式碼之後想找回歷史程式碼怎麼辦？

在使用Pycharm、IDEA時可以直接檢視本地歷史程式碼，然後輕鬆恢復之前某個版本。但是，VS Code預設是不支援local history的，所以，僅憑Ctrl z撤銷操作時不行的。何況，撤銷操作是把前面步驟所有的操作都撤銷了，其中有很多是我們不需要的。

但是，為VS Code配合上local history，所有問問題就迎刃而解了。

安裝這款外掛之後在側邊欄會出現LOCAL HISTORY的字樣，每當我們儲存更改時，它都會備份一份歷史檔案，當我們需要恢復之前版本時，只需要點選一下對應的檔案即可。此外，它還會在編輯框顯示對比詳情，能夠讓你對修改位置一目瞭然。

13. Partial Diff

安裝次數：19萬

檔案比較是一種即常用有實用的一項功能，例如，我們想檢視哪裡修改了程式碼、檢視輸出的日誌資訊有什麼區別等等，如果用肉眼逐個詞的去分辨，顯然是無法承受的。

提起檔案比較，我首先想到的就是Beyond Compare，這是一款好用的工具，但是，僅憑收費這一點就把很多人拒之門外了。

還好，VS Code外掛庫裡有Partial Diff這款神奇的外掛，選中一程式碼，右鍵Select Text for Compare，選中另外一部分程式碼，右鍵Compare Text with Previous Selection即可。

14. TODO Tree

安裝次數：40萬

我在此前多篇文章中提到過，習慣使用TODO、FIXME標籤是一個非常好的習慣。

當我們發現某塊程式碼需要修改，或者某塊程式碼需要以後進一步完善，如果能夠給它做一個標記，那麼後續定位到對應位置是一件非常輕鬆高效的事情。

關於TODO標籤，很多作者都推薦過TODO Highlight這款外掛，但是，我更加推薦使用TODO Tree。

雖然很多標籤工具能夠實現TODO標籤高亮，但問題是“我們怎麼快速定位到對應的標籤？”逐個的開啟檔案去尋找顯然是很麻煩的，效率並沒有得到太大的提升。

TODO Tree則不同，它不僅可以實現標籤高亮，還可以在活動欄新增一個選項卡，它能夠以不同檢視展示我們標記的位置，單擊對應標籤就能夠快速定位到指定位置。

15. vscode-icons

安裝次數：466萬

一個好的編輯介面能夠讓開發過程心情舒暢，甚至可以提升開發效率。

顯然，VS Code預設的圖示是達不到這種程度的。

但是，配合vscode-icons這款外掛就不同了，它具有以下特性，

自定義圖示
自動檢測專案
自定義配置

它不僅能夠給資料夾、檔案新增上舒適的圖示，而且可以自動檢測專案，根據專案不同功能配上不同圖示，例如，git、Markdown、配置項、工具類等等。

16. Better Comments

安裝次數：66萬

是不是覺得註釋資訊千篇一律？

Better Comments這款外掛可以讓VS Code註釋資訊更加人性化。

它可以根據告警、查詢、TODO、高亮等標記對註釋進行不同的展示。此外，還可以對註釋掉的程式碼進行樣式設定。

您想要的任何其他註釋樣式都可以在設定中指定

17. Bracket Pair Colorizer

安裝次數：250萬

當你看到上述示例中這樣包含多層巢狀的括號時，是不是覺得很凌亂？至少，我是這樣的，每當看到這樣複雜巢狀括號時，尤其程式碼行數多起來以後，就很難確定哪些是處於同一層次的。不弄明白層次結構，當然閱讀程式碼也會麻煩很多。

Bracket Pair Colorizer這款外掛可以給()、[]、{}這些常用括號顯示不同顏色，當點選對應括號時能夠用線段直接連結到一起，讓層次結構一目瞭然。除此之外，它還支援使用者自定義符號。

這款神器的確解決了我的痛點。

18. Better Align

安裝次數：10萬

整潔的程式碼，是一個優秀程式設計師必須要做到的。當我們閱讀那些大型公司開源的程式碼時，會發現，它的設計模式、它的程式設計規範都讓人讚歎不已。

Better Align就是這樣一款能夠實現程式碼規範的工具，它主要用於程式碼的上下對齊。

它能夠用冒號（：）、賦值（=， =，-=，*=，/=）和箭頭（=>）對齊程式碼。

使用方法：Ctrl Shift p輸入“Align”確認即可。

19. change-case

安裝次數：24萬

識別符號和命名規則是學習一門語言最基本，也是必須要了解的一項。

不同語言對變數名、函式名、類名的命名要求不同，有的是駝峰、有的是下劃線...但是，不管是什麼要求，都有一個共性--命名很重要。

有些程式語言甚至對命名嚴格到如果不按規範要求，執行時會直接報錯。

而change-case就是一款快速修改當前選定內容或當前單詞的命名的外掛。

使用方法：Ctrl Shift p輸入“change”然後選擇要修改的格式即可。

20. Markdown All in One

安裝次數：119萬

Markdown對於開發者而言，應該是一種常用的文件書寫方式，雖然我在獨立Markdown文件書寫時習慣於使用Typora，但是對於開發過程中涉及到的API介面文件、README，我還是習慣於使用VS Code。

Markdown All in One這款外掛可以實現媲美Typora的Markdown編輯體驗，它具備如下特性，

豐富的快捷鍵
TOC標籤
數學公式
自動完成
列表編輯
輸出HTML同時轉PDF
Github風格文件
......

這款外掛真正做到了All in One。