其它內容
-開發者必裝的 5 個 vs code 插件 - 這 5 個插件大幅提高我的工作效率
一、Codeium
Codeium 簡單說就是免費版的 Github Copilot,可以在 vscode 下載,登陸。
雖然是免費的,但功能依然強大。可以直接在 vscode 讓他解釋 code、生文檔。
![產生文檔](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fy2uwkfdt%2Fproduction%2F8f579316b561a7154467f4d1b615eae0e4af94e8-911x323.png%3Fw%3D911%26h%3D323%26q%3D80%26fit%3Dmax%26auto%3Dformat&w=1920&q=80)
當然也有程式碼補全功能。他會根據上下文,推測你接下來要打什麼 code,讓我從 ctrl + c 工程師變成 tab 工程師。
![程式碼補全](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fy2uwkfdt%2Fproduction%2Ff6cce49dbecd3b1929bb0d95cf8d6c95104cdff9-589x276.png%3Fw%3D589%26h%3D276%26q%3D80%26fit%3Dmax%26auto%3Dformat&w=1200&q=80)
也可以直接在 vscode 裡開聊天窗詢問他,這樣好處是不用在 vs code 和 chatGPT 來回切換視窗。
例如我請他稍微解釋一段 code 在幹嘛。
![解釋](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fy2uwkfdt%2Fproduction%2F2d7628ce8c321496c88b2740ab085c5695ed930d-810x383.png%3Fw%3D810%26h%3D383%26q%3D80%26fit%3Dmax%26auto%3Dformat&w=1920&q=80)
雖然他的自動補全不一定百分百精準,但光是提供思路,或是幫你自動打好一些基本的變數宣告就非常方便了。
推薦指數:⭐⭐⭐⭐⭐
二、Project Manager
Project Manager 是超簡單粗暴的插件,也是我使用率最高的插件,可以幫你管理多個專案,可以直接開啟設定好的專案。
![專案管理](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fy2uwkfdt%2Fproduction%2Fec76f1c1bfdce4abdc9a7cf8c1fdc67d4602e19f-711x384.png%3Fw%3D711%26h%3D384%26q%3D80%26fit%3Dmax%26auto%3Dformat&w=1920&q=80)
我們也可以使用標籤來管理多個專案,像我分成案子、個人、以及公司專案。
我們也能隨意地重新命名或刪除各個專案,讓我覺得最方便的是,他也支援直接開新視窗打開專案,這在我想參考其他專案的程式寫法時超方便。
推薦指數:⭐⭐⭐⭐⭐
三、Better Comments
Better Comments 讓我們可以在程式碼中各種樣式的註解,這在想透過註解做一些警告時非常方便。
透過 Better Comments,我們可以將註釋分類為:
- 強調
- 警告
- 疑問
- 待辦事項
![各種註解樣式](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fy2uwkfdt%2Fproduction%2Febf903ca645840fe26d77eef721a140311513cec-459x414.png%3Fw%3D459%26h%3D414%26q%3D80%26fit%3Dmax%26auto%3Dformat&w=1080&q=80)
我們也可以在 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。
![TODO](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fy2uwkfdt%2Fproduction%2Fe7f6733c52204addae35f3d0d003620b7364e42d-907x505.png%3Fw%3D907%26h%3D505%26q%3D80%26fit%3Dmax%26auto%3Dformat&w=1920&q=80)
![TODO-2](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fy2uwkfdt%2Fproduction%2Fa07a093dac294fa6d069da5d458b099ebfc2e8f8-646x465.png%3Fw%3D646%26h%3D465%26q%3D80%26fit%3Dmax%26auto%3Dformat&w=1920&q=80)
這在有很多功能要一一完成時非常方便,不會遺忘自己要做哪些 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 歷史紀錄](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fy2uwkfdt%2Fproduction%2F15133f6d15bb4f9b7d931e2943525570ab385626-1821x738.png%3Fw%3D1821%26h%3D738%26q%3D80%26fit%3Dmax%26auto%3Dformat&w=3840&q=80)
也能直接在 code 上看到是誰更改了程式碼。
![看到誰更改 code](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fy2uwkfdt%2Fproduction%2Fa28a7e0565fc3ac5bfba06d2c45448ad172bea2e-1119x431.png%3Fw%3D1119%26h%3D431%26q%3D80%26fit%3Dmax%26auto%3Dformat&w=3840&q=80)
或是用 GUI 操作 git add、commit、push、stash 等等操作。
![GUI 操作](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fy2uwkfdt%2Fproduction%2F0740dc2697a3e0e15530935287f9575ddbd4c090-512x245.png%3Fw%3D512%26h%3D245%26q%3D80%26fit%3Dmax%26auto%3Dformat&w=1080&q=80)
更多的功能可以參考以下圖片。
![其它功能](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fy2uwkfdt%2Fproduction%2F4897266128d130344c5ce4a4aa1740bbde97a125-1155x560.png%3Fw%3D1155%26h%3D560%26q%3D80%26fit%3Dmax%26auto%3Dformat&w=3840&q=80)
還有一些沒列在這裏面,可以說是非常強大的插件,工程師必裝。
推薦指數:⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
小結
今天推薦五個我覺得超讚的 vscode 插件,如果你喜歡這樣的內容,或有甚麼程式、轉職、自學等等相關的疑問,歡迎來我的 IG 直接私訊我~!
那今天就這樣,下次見!