其它內容

-

開發者必裝的 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。

TODOTODO-2

這在有很多功能要一一完成時非常方便,不會遺忘自己要做哪些 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,可以看到每個人在什麼時候做了哪些修改。

視覺化 commit 歷史紀錄

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

看到誰更改 code

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

GUI 操作

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

其它功能

還有一些沒列在這裏面,可以說是非常強大的插件,工程師必裝。

推薦指數:⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

小結

今天推薦五個我覺得超讚的 vscode 插件,如果你喜歡這樣的內容,或有甚麼程式、轉職、自學等等相關的疑問,歡迎來我的 IG 直接私訊我~!

那今天就這樣,下次見!

相關系列文章