五個 Visual Studio Code 的實用技巧與工具 | How-To | Editor 編輯者 #9

五個 Visual Studio Code 的實用工具與技巧 | How-To | Editor 編輯者 #9
Hey 大家好,歡迎收看這一期的 Editor,我是 Aaron。 下面的影片來跟你介紹五個實用的 vscode 技巧跟工具

1. Recommended Extensions

那麼相信很多工程師們第一次接觸 vscode 的時候,會有點迷惘,因為不太知道該裝什麼 Extensions,那麼你除了朋友跟你介紹,或者是可以到 vscode marketplace 上看看 Extension 熱門排行榜來參考之外呢,vscode 也有一個不多人注意到的功能,就是 Recommended Extensions,你只要點一下 Extensions 分頁呢,分頁中有個搜尋框右上方的 … more 按鈕,就可以看到有一個 Show Recommended Extensions,或是使用 Cmd + Shift + P 打開 Command Palette 直接輸入 Show Recommended Extensions 就可以看到 vscode 建議你安裝的 Extensions。

另外 Recommended Extensions 在團隊運作方面還有一個更方便的用法,就是你可以直接在你的專案下設定有哪些推薦的 vscode extensions,你只要打開 Command Palette 輸入 Configure Recommended Extensions,就會開啟專案 workspace 設定中的 extensions.json,然後加入你要推薦的 Extension Id 就可以了。 Extensions id 在哪呢?它就在 Extension 介紹頁中 Extension 名稱的旁邊,只要複製下來就可以了。 有了這個功能,假設今天你的團隊有一個新同事加入,剛好也是用 vscode,當他第一次打開這個專案的資料夾的時候,vscode 就會直接告訴他,這個專案下有推薦的 VScode Extensions,就不用再另外浪費口水了,真的是非常實用的功能。

設定專案 workspace 的 recommended extensions 可以讓開發者第一次開啟專案時查看推薦的 extensions.

2. Better Merge

當你的專案是多人同時進行,雖然 git 的 auto merge 自動合併已經非常強大了,但有時候難免因爲 working tree 的 base commit 變動,auto merge 還是辨識不出來要如何合併同時修改的原始碼,還是有機會產生所謂的 conflict,程式碼衝突,這時候你就必須要開啟編輯器來修復衝突的程式碼,但是我已經看過不只一個工程師,不知道為什麼對於修復衝突有嚴重的障礙,只要有 conflict 就可以看到他們進入一種死循環的狀態。

不過今天介紹你一款 Better Merge Extension,那麼 Better Merge 提供了你一個更為直覺的介面來修復衝突,用醒目明確的顏色標出了衝突的部分,旁邊還有小字卡來提醒你哪些是 current change 哪些是外部的 incoming change,衝突區的上方甚至還設計了 CodeLens Action 來快速的選擇要保留哪部分的 code,簡直就是居家旅行,修復衝突的必備良藥啊。

Better Merge 方便的衝突修復介面

3. Open In Code

接下來要介紹的是 Open In Code。不知道各位如果想快速的用 vscode 開啟一個資料夾,會怎麼做呢?其實 vscode 有提供一個 CLI tool,你只要在 terminal 下輸入 code foldername,就可以直接開啟 folder workspace,不過使用 macOS 的朋友呢,也有很大部分習慣使用 Finder 來管理資料夾,所以也有人開發了一個 Finder toolbar app 來提供快速開啟資料夾的功能,首先你只要安裝這個 app 後,按著 Command 將 Open In Code 這個 app 拖移到 finder 的 toolbar 上,接著在 finder 中打開你的專案資料夾,再點選這個按鈕,就可以快速地用 vscode 打開 finder 裡的資料夾摟!

Open In Code 提供了 Finder 工具列按鈕來快速在 vscode 中開啟資料夾

4. Path IntelliSense

vscode 的 explorer sidebar 其實可以直接複製workspace 下檔案的絕對路徑,但是其實寫程式比較常用的應該是相對路徑,那麼安裝 Path IntelliSense 就可以在輸入路徑時候呢,自動地幫你補完路徑,是不是相當方便呢?

Path IntelliSense 幫助你快速的輸入路徑

5. Copy Relative Path

但是有的時候我們還有機會在 file explorer 中直接尋找檔案,這樣的話呢你可以安裝 Copy Relative Path 這個 Extension,你就可以直接在 vscode 的 File Explorer 中直接複製檔案的相對路徑,不錯吧?

Copy Relative Path 可以直接複製相對路徑

看了以上的介紹,你的 vscode 是不是又更加好用了呢?

今天的影片就到這邊,有任何的問題都歡迎你留言告訴我,如果你喜歡這次的影片可以在下面按個讚跟分享,更別忘了訂閱我們的頻道,編輯者我們下次見!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.