其它內容
-開發者必裝的 5 個 vs code 插件 - 這 5 個插件大幅提高我的工作效率
一、Codeium
Codeium 簡單說就是免費版的 Github Copilot,可以在 vscode 下載,登陸。
雖然是免費的,但功能依然強大。可以直接在 vscode 讓他解釋 code、生文檔。

當然也有程式碼補全功能。他會根據上下文,推測你接下來要打什麼 code,讓我從 ctrl + c 工程師變成 tab 工程師。

也可以直接在 vscode 裡開聊天窗詢問他,這樣好處是不用在 vs code 和 chatGPT 來回切換視窗。
例如我請他稍微解釋一段 code 在幹嘛。

雖然他的自動補全不一定百分百精準,但光是提供思路,或是幫你自動打好一些基本的變數宣告就非常方便了。
推薦指數:⭐⭐⭐⭐⭐
二、Project Manager
Project Manager 是超簡單粗暴的插件,也是我使用率最高的插件,可以幫你管理多個專案,可以直接開啟設定好的專案。

我們也可以使用標籤來管理多個專案,像我分成案子、個人、以及公司專案。
我們也能隨意地重新命名或刪除各個專案,讓我覺得最方便的是,他也支援直接開新視窗打開專案,這在我想參考其他專案的程式寫法時超方便。
推薦指數:⭐⭐⭐⭐⭐
三、Better Comments
Better Comments 讓我們可以在程式碼中各種樣式的註解,這在想透過註解做一些警告時非常方便。
透過 Better Comments,我們可以將註釋分類為:
- 強調
- 警告
- 疑問
- 待辦事項

我們也可以在 vscode 的設定裡,針對註解進行樣式設置。
"better-comments.tags": [
{
"tag": "!",
"color": "#FF2D00",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "?",
"color": "#3498DB",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
]
推薦指數:⭐⭐⭐⭐
四、Todo Tree
Todo Tree 能夠在 vscode 裡新增代辦事項,他會自動抓到所有有 // TODO
的註解,並記錄在側邊欄。
例如下面我新增了 TODO: make it responsive,之後在側邊欄就能直接找到這邊的 code。


這在有很多功能要一一完成時非常方便,不會遺忘自己要做哪些 Feature,也能快速定位到相關的程式碼。
和 Better Comments 一樣,我們可以調整樣式,例如新增 FIXME
等關鍵詞來記錄,並更改 FIXME
在側邊欄的 icon,和顏色
"todo-tree.highlights.defaultHighlight": {
"icon": "alert",
"type": "text",
"foreground": "red",
"background": "white",
"opacity": 50,
"iconColour": "blue"
},
"todo-tree.highlights.customHighlight": {
"TODO": {
"icon": "check",
"type": "line"
},
"FIXME": {
"foreground": "black",
"iconColour": "yellow",
"gutterIcon": true
}
}
推薦指數:⭐⭐⭐⭐
五、GitLens
最後一個是只要你有使用 Git 你就應該要安裝的插件 GitLens,非常多強大且視覺化的 Git 功能,例如視覺化 git commit,可以看到每個人在什麼時候做了哪些修改。

也能直接在 code 上看到是誰更改了程式碼。

或是用 GUI 操作 git add、commit、push、stash 等等操作。

更多的功能可以參考以下圖片。

還有一些沒列在這裏面,可以說是非常強大的插件,工程師必裝。
推薦指數:⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
小結
今天推薦五個我覺得超讚的 vscode 插件,如果你喜歡這樣的內容,或有甚麼程式、轉職、自學等等相關的疑問,歡迎來我的 IG 直接私訊我~!
那今天就這樣,下次見!