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

6 min readMay 5, 2017

五個 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，簡直就是居家旅行，修復衝突的必備良藥啊。

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 裡的資料夾摟！