開發者必裝的 5 個 vs code 插件 - 這 5 個插件大幅提高我的工作效率

this.web

一、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
    }
}