# 6 個 VSCode 推薦套件 | 提高程式撰寫效率 使用了 VSCode 多年,必須說 VSCode 真的好好用,而好用的關鍵除了優雅的介面,還有和套件的相輔相成,這篇文章整理了 6 個我覺得一定要安裝的套件,絕對能大大提升生產力~ ## [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) GitLens 最好用的功能就是可以看到誰在哪個時間、哪個 commit 修改過該行。 ![GitLens](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPM1bhFI-TVOLIt7zYDpeN0IVwSqcQX84SfqP3B3wlfeLOYJ7bKv4WFEcejaBR7aS2c_IPayJ2tP49tPNmeNP6cn-HTPMzeCeJ9fYB7dDgMBsYmKBSdy6B53YD4-zvRtIplbMpgsNSBPxqrX274SCPZQPJrciNA7ujroUPkI4j-TAtHP0/s1600/gitlens.png) ## [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph) Git Graph 會把 Git 轉成圖形化介面,方便追蹤查看歷史版本,還可以使用 GUI 進行 Git 的操作。圖形化介面還可以讓我們清楚的了解各 branch 的關係,以及 local 和 remote 的狀態,而點進每一個 commit 可以看到修改了哪些檔案和修改了什麼。 ![GitGraph](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmWBNXLFy19GT7cZMu_JHDe1O4Cm95NyfYxs5JnmocQmuhV8homHghwOqjTjfMNCzafpR8dl_mQe37Dx_CKpSBVrgOOGx3hx34dPuBLtmimSRGTds621iXufIbFePyrI5D3aSk3Yeq2lX5mjxUdfEBea4ze_gE7Tf-8LKTVvqXFO-ifQc/s1600/git-graph.gif) ## [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced) 開發專案絕不能少的 Readme 幾乎都是用 Markdown 寫的,雖然閱讀 Mardown 不算太難,但用預覽窗格查看絕對更加事半功倍,除了可以避免格式跑掉,閱讀上也更加舒適。 ![MarkdownPreviewEnhanced](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl7oVIJS4zzVZbKq3UG1Jr9FgRxqCFpMdxNrBcmspM4V4wasEkXTdl9Xv1-vX1pH-kuhTFjBSWVxUItzdv3vl7f1tLAg9gqz1cUPkVlYT7zKzu_NZJclWVEm5puJpfX9G4njTdt5EdSqmO6Zy50rHaDd5ShgF-9PI6PnP8yLI_qOpK-2E/s1600/markdown%20demo.gif) ## [Remote Explorer](https://marketplace.visualstudio.com/items?itemName=ms-vscode.remote-explorer) 可以使用 ssh 連線至其他伺服器,開啟後就像在本地用 VSCode 開啟檔案一樣,連 VSCode 的套件都可以使用,完全解決只有文字視窗的不便。 ![RemoteExplorer](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMzIDLYw9nsG9fpT3JMd9XvctKq-NbzDtDq7mLanc6tSGi1B4W-2GvKfaGMzPBjAz-znTqz53FT75LwhoQecj3rotA5yp98lDrW2Os8KbKx6Y94IaHKU1zh35SN0DtnJKT7amS1RBFDXlYaADYVrppRpp3SLgoFEQZLM9okq2IBhKk4DQ/s1600/remote-explorer.png) ## [Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server) 點下按鈕後就可以在 VSCode 預覽 HTML,編輯檔案不需要存檔及重整就會更新到預覽視窗,使用上非常方便,除了預覽之外,其他瀏覽器有的功能也幾乎都能做到,像是 DeTool、開啟其他分頁等等。 ![LivePreview](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgDIuIh-JumBpXgZq0knWR55S8Qs3AKysYBvw_hBwYmzokKgQFbd0vAbutJuhUArtmpFyEiYh78w7xCnX6c8AzJYcKFWuP7JKh49lxnT1IkOF_GnsESHzHPcv7__TtFecXPqwKsPlWFu9R4zQuEpvFz1xszg9fKY3uuWkv-B6d277fTws/s1600/live-preview.gif) ## [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) Live Share 可以將自己的 VSCode 和別人共用,當有需要和其他人共同編輯時,就能像 Google 文件一樣可以看到誰正在編輯哪個部分,除了共用一般的檔案,terminal 和 port 等等也都可以共用。 ![LiveShare](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEB3LKWyPBSIPn70ByzWJTIr1fFCAZ4UppRo76ICDW0ER7qbLA_OCFC5ypEfDHiPFGwZASd_UJl9iHlHt0sJt86y-b4N0EdRZW3RtjQ410c2UKUxmyntmxydOuD0FBiqTyBkJedeMYc0T8eSdovgbslST5ocrle4VmAdJ_Sp9fKd2iMQU/s1600/liveshare.png) 除了上面這幾項也很推薦安裝每個程式語言自己的套件,像是 [python](https://marketplace.visualstudio.com/items?itemName=ms-python.python), [c/c++](https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools) 等等 ## 其他文章推薦 [VSCode 必學快捷鍵 | 寫程式一定要會,讓你輕鬆編輯程式碼](https://showsun63.blogspot.com/2023/02/vscode-hotkey.html) [Markdown 語法大全 | 相見恨晚的筆記和寫作神器](https://showsun63.blogspot.com/2023/06/markdown.html)