by Brian Gossett on Behanceby Brian Gossett on Behance

很久以前就想寫關於「VS Code 套件」的推薦文章了,畢竟我曾在不止一篇文章中表示自己就是一個 VS Code 工具控。

話雖如此,卻遲遲沒有下筆,原因是這類文章網路上已經有不少,要怎麼寫得有個人特色,無疑是一大挑戰。所以我決定累積一定的 VS Code 使用經驗後,再來分享。

2018 年 4 月左右,是我第一次使用 VS Code,那時它對 Python 的支援還非常陽春,所以在轉職班上課時,我仍以 Jupyter Notebook 和 Spyder 寫 Python。

然而就在此後的短短一年之內,VS Code 對 Python 支援與易用度就從 50 分急速成長到 80 分,進步之快超乎想像,此後 VS Code 就成為我寫 Python 的主要 IDE 了。


前言

關於本文的使用說明書:

  • 主要介紹 VS Code 的「擴充套件(extension)」,雖然 VS Code 尚有不少值得一提的內建功能,但如果要一起講,篇幅就會超載,所以本文只討論套件部分。
  • 不同角色及語言的開發者,常用套件多少會有所差異,本文僅以「Python 後端」為主,所以前端的常用套件比如 Live Server 自然就不會納入。
  • 套件介紹基本不會涉及細節設定,主要還是講套件能做到什麼、解決什麼痛點。或者討論怎麼挑選這類的套件,以及我的看法。
  • 套件是否實用帶有主觀色彩,為了增加讀者參考上的方便與可信度,我會給出從主觀與客觀兩種不同角度的量化指標(下述),以免推薦內容流於我個人的主觀偏好。

推薦度與重要性

每一個套件我都會為它加上我個人認為在開發上的重要性推薦度,以「⭐️」表示,可以想成米其林的一星到三星,兩者的差別如下:

推薦度:「客觀」上我認為別人可能會喜歡、覺得有用的程度。
重要性:「主觀」上對我而言不可或缺的程度。

所以對你來說,參考價值通常是推薦度大於重要性

推薦度

客觀推薦程度:

  • 一星 ⭐️:值得一試。
  • 二星 ⭐️⭐️:誠心推薦。
  • 三星 ⭐️⭐️⭐️:必裝,強力推薦!

重要性

我的主觀感受:

  • 一星 ⭐️:錦上添花,不無小補。
  • 二星 ⭐️⭐️:覺得實用。
  • 三星 ⭐️⭐️⭐️:不能沒有!

前置套件

沒有入列標題的 20 個套件之中,因為這部分比較沒有所謂的推不推薦——它們基本上是必須的。

Python

這個應該不太需要解釋,我記得剛用 VS Code 時,這個套件還不是官方維護。

Pylance

一種 Python language server,可以想成前述 Python 套件的強化補充包,提供更多 Python 相關的實用功能,比如靜態語法分析,詳細功能可參考套件頁面。目前已經是 Python 套件的預設 language server。


佈景主題

編輯器外觀設定。

1. One Dark Pro

對於極度重視編輯器外觀且龜毛的我,佈景主題我前前後後認真試過十幾個,最後還是情歸 One Dark Pro。

雖然試了不少,但前期我主要還是使用 VS Code 的原生深色主題,並透過修改主題的樣式定義 JSON 檔,進一步自訂、客製我偏好的配色,就這樣用了一年半。

後來發現 One Dark Pro,我覺得它的完成度更高!更適合用來當作「改造的基底」,所以改用它,但依舊又花了大量時間修改套件的 JSON 樣式設定檔。

不過,現在已經不需要這麼做了!而是改為透過editor.tokenColorCustomizations這個settings.json中的設定,來進行編輯器外觀的顏色調整,大致如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"editor.tokenColorCustomizations": {
"[One Dark Pro]": {
"textMateRules": [
{
"name": "Classes與繼承類別",
"scope": [
"support.class",
"entity.name.type.class",
"entity.other.inherited-class"
],
"settings": {
"foreground": "#d78532"
}
},
...

更多資訊可參考官方文件,不得不提醒,改這個真的很耗時!😂

我挑選佈景主題大概有下列三點考量,這部分僅供參考:

  1. 深色優先:淺色藍光比較多啦 XD。
  2. 耐看優先於好看:具體的指標是配色不要太過鮮豔、華麗——第一眼很美,看久了會有點累。
  3. 對比別太高:會傷眼!所以深色主題也要選擇深灰或深藍底,而不是純黑底。

總的來說,對於主題這樣涉及主觀審美的東西,並不存在相對最好的選擇,但如果考慮到上述三個要件都必須符合,我會推薦 One Dark Pro。

推薦度:⭐️⭐️
重要性:⭐️⭐️⭐️

2. file-icons

最多人下載的是 Material Icon Theme,但我個人覺得顏色太鮮豔,視覺上有點眼花撩亂,這個主題則使用更多明度、彩度都較低的「暗色系」配置,低調而實用。

推薦度:⭐️⭐️
重要性:⭐️⭐️


Git 版控

VS Code 本來就整合了 Git 功能,已經相當方便,不過有下列兩個套件更是如虎添翼。

3. GitLens

對我來說最有用的功能,已經寫成〈VS Code 使用 GitLens 比較不同分支差異 + SourceTree 做法〉這篇文章。其餘功能我也不算常用,但僅僅這一項就已經足夠重要。

推薦度:⭐️⭐️⭐️
重要性:⭐️⭐️⭐️

4. Git Graph

要看分支的圖形,可以下 git 指令並透過大量 flag 參數來美化輸出,但通常我還是用 SourceTree 這類 GUI 軟體來查看。

不過連線到遠端 VM 上進行開發時,因為只能透過 CLI 或 VS Code 作操 Git,此時就非常需要這個套件了。它可以呈現類似 SourceTree 的分支圖形,方便查看,還可以做一些基本操作。

推薦度:⭐️
重要性:⭐️⭐️


後端與設定檔

後端作業相關套件,其中最強大的無疑是 Remote - SSH。

5. ENV

讓「環境變數設定檔」比如.env有 syntax highlight,後端開發肯定少不了。最多人下載的是 DotENV,而我選用 ENV 是因為它的渲染效果(顏色)比較符合我的期待。

推薦度:⭐️
重要性:⭐️

6. YAML

YAML 檔的 syntax highlight,主要是給docker-compose.yml使用,由 Red Hat 公司開發維護。

推薦度:⭐️
重要性:⭐️

7. TOML Language Support

YAML 完就是 TOML 了,主要給 Poetry 的pyproject.toml使用。

推薦度:⭐️
重要性:⭐️

8. MongoDB for VS Code

由 MongoDB 公司發行的 MongoDB client for VS Code。

SQL 資料庫我習慣透過一般的 GUI client 進行連線(我用 TablePlus,事實上它竟然也支援 MongoDB),因為能方便操作簡單的欄位資料過濾、修改與刪除。而 MongoDB 目前只以查看、確認數據的需求為主,使用官方出的這個套件已經足夠。

資料內容會顯示在 VS Code 分頁中資料內容會顯示在 VS Code 分頁中

推薦度:⭐️⭐️
重要性:⭐️⭐️

9. Remote - SSH

VS Code Remote Development 三劍客中的 Remote SSH,對我而言絕對是 2019 年 VS Code 最重要的更新,沒有之一。

終於可以在遠端 VM 上使用 VS Code 進行遠端連線開發!這個功能就是神!同時大幅降低了學習 Vim 的必要性?😝

尤其雲端服務供應商的各種整合服務比如雲端資料庫,如果要從本地主機連接,基於資安考量與限制,有時連線的環境設定相當麻煩,更別說還要再整合其它服務。

此時連到雲端上的 VM,透過 VS Code GUI 在 VM 上直接進行開發,真的方便很多。因為 VM 對這些整合服務的存取,通常不太需要特別設定權限。

且 VS Code 的使用體驗與本機幾乎沒有差異,就是神!

推薦度:⭐️⭐️⭐️
重要性:⭐️⭐️⭐️


排版與視覺化

程式碼呈現與版面相關。

10. TODO Highlight

可以對「TODO、FIXME」這類特殊註解的關鍵字加以凸顯,關鍵字內容與樣式皆可自訂,開發很常用,至於這些註解幾時能因實現而被拿掉,就不得而知了。😎

推薦度:⭐️⭐️
重要性:⭐️⭐️

11. Trailing Spaces

在函式或類別中,常常需要使用空行來區分程式碼的邏輯段落,以增加可讀性。而這些空行,理論上必須是「完全的空行」,意思是不能帶有與函式、類別內相同的排縮。

這個套件可以幫你檢測這些不必要的排縮空白,以及行末空白,並有自動刪除功能。

上圖的第一個紅色區塊,即是多餘的縮排。第二個紅色區塊則是多餘的行末空白。

話說回來,上述兩種多餘空白,圖中都有 Flake8 的黃色波浪底線提示,在使用 yapf、black 等 formatter 執行格式化時,也會一併刪除,所以如果你本來就有良好的格式化習慣,例如像我一樣每寫完一行就想格式化一次 😳,或許就不需要它了。

推薦度:⭐️
重要性:⭐️

12. Rainbow CSV

讓 csv 檔的每一欄位有不同的顏色,方便檢視,以前處理資料比較常用。

推薦度:⭐️
重要性:⭐️


測試與除錯

單元測試相關。

13. Coverage Gutters

單元測試必備,必備!

執行完一輪單元測試後,我們肯定需要知曉目前的「測試覆蓋率」。在 Python 中,我們有 Coverage.py 這個套件可以協助產出測試覆蓋率報告:可直接標準輸出(stdout)到 CLI,或儲存為檔案,比如htmlxmljson。或兩者兼具。

輸出時通常會設定一併記載「未被測試的程式碼行別」,方便確認究竟是哪個檔案的哪幾行造成覆蓋率不足。

測試覆蓋率報告的主角,無疑就是這些未被執行的程式行測試覆蓋率報告的主角,無疑就是這些未被執行的程式行

可以想像,對開發者而言,最理想的測試覆蓋率呈現方式,肯定是直接整合到編輯器的程式碼頁面!讓你完全不用一邊看著輸出報告,一邊比對編輯器中當前程式檔的哪幾行程式沒有被執行。

Coverage Gutters 就是為你實現這個願望的神兵利器!並支援多種語言。它會自動讀取前述套件產出的覆蓋率報告檔,並以此為依據,將覆蓋率狀態標識直接渲染到編輯器上,真是太直觀,太方便了!😭

綠色為測試已覆蓋,紅色為未覆蓋,顏色可自訂綠色為測試已覆蓋,紅色為未覆蓋,顏色可自訂

預設只會顯示最左邊的顏色提示,單行顏色提示要額外開啟,以免常駐時在視覺上過於干擾。

推薦度:⭐️⭐️⭐️
重要性:⭐️⭐️⭐️

14. Code Spell Checker

幫你檢測拼字錯誤,廣為人知的套件,畢竟寫程式,甚至是寫文章也好,很難完全不拼錯字。

大部分的 typo 都不會造成程式的執行問題,但偶爾也會產生難以糾錯的窘境。偏偏像 typo 這類的錯誤,往往是人類最難主動發現的——尤其是開發者自己。

還是靠機器最保險。

而且,程式碼中如果有 typo,容易帶給人一種粗心、不專業的印象,所以即使是小錯也要盡可能避免。

推薦度:⭐️⭐️
重要性:⭐️⭐️


AI 輔助寫扣

目前常見的「AI」套件大概只能幫你自動產生一些重複雜較高的程式碼。

15. IntelliCode

微軟官方出品,在「AI」一詞還沒有這麼氾濫以前,這個套件還是很有代表性的。

能預測你接下來要呼叫的函式或方法等等,就跟手機中文輸入法的那些猜測模式類似,用久了會猜得更準。

本套件的推薦度與重要性依照你是否額外安裝了下面的 Tabnine 而所有差異。

已安裝 Tabnine(必要性下降,但我還是會一起使用):

推薦度:⭐️
重要性:⭐️

未安裝 Tabnine(只用 IntelliCode 也不失為一種簡潔):

推薦度:⭐️⭐️
重要性:⭐️⭐️

16. Tabnine

一樣是猜測你接下來要打的內容,不過是基於 GPT-2 的套件,付費和免費的訓練資料集有差別,我沒付錢,用起來的感覺差不多就是……比上面的 IntelliCode 強一點。

它預測的範圍、程式碼句子要長於 IntelliCode。換句話說,如果 IntelliCode 預測的是你的下一步,那 Tabnine 可以直接預測你的下二、三步,確實可以省下更多力氣。

如下圖所示,上半部是 Tabnine 的預測(較長),下半部則是 IntelliCode。

雖然偶爾才會有讓我感到亮眼的預測內容,但聊勝於無。

它的一個附帶缺點是:比較吃記憶體。

推薦度:⭐️⭐️
重要性:⭐️⭐️

17. autoDocstring

自動產生符合 PEP 257 慣例的 docstring 結構,讓你只需要填寫核心內容而不必苦惱打字與排版,文件有多種格式可選:

我目前工作都採用 google 格式。

說真的,在我看來,無論程式寫得如何簡潔易讀,對一些比較複雜的函式或類別而言,docstring 終究是不可少的。因為文字的詮釋能力和程式碼相比,絕不在同一個層次,相信這也是為何 docstring 會有屬於自己的獨立 PEP 加以規範的理由。

推薦度:⭐️⭐️
重要性:⭐️⭐️


其他

沒有明確分類的套件,放這裡。

18. Sublime Text Keymap and Settings Importer

雖然沒真的用過 Sublime Text 寫程式,但它的鍵盤快捷鍵配置也稱得上遠近馳名。我最常用的是複製、選取與刪除游標所在的當前行。

Sublime Text 的快捷鍵大全可參考這個,但肯定不是每一項都能在 VS Code 上運作,使用上主要還是以「編輯類」(即上述頁面中的「Editing」)的快捷鍵功能為主。

推薦度:⭐️⭐️
重要性:⭐️⭐️

19. Markdown Image

曾在〈Notion + VS Code:我的 Hexo Markdown 寫作工作流〉中推薦過,只要透過快鍵捷在編輯器中貼上圖片,這個套件就能自動幫你把圖片上傳到圖床比如 imgur,並在 Markdown 文件直接插入上傳後的圖片網址,真是太讚了!

對於以 Markdown 寫作的人實屬必備,但是對一般人而言可能就不太重要。

推薦度:⭐️
重要性:⭐️⭐️⭐️

20. Chinese (Traditional) Language Pack for Visual Studio Code

Last but not least,繁體中文化,裝一下還是比較舒服的。

推薦度:⭐️
重要性:⭐️


補充:曾經的輝煌

很長一段時間都是必裝套件,直到 VS Code 將其主要功能直接加以內建。

Bracket Pair Colorizer 2

可參考〈VS Code 開啟效能提升 1 萬倍的「內建」bracket pair colorization〉。

Settings Sync

同步 VS Code 設定,包括安裝的套件以及settings.json等,超級重要!畢竟這些設定實在太多了,如果換台機器就要重新來過,真的會「起肖」。

套件本身已不再更新,現在使用內建的 Settings Sync 功能即可。