VSCode 如何提高我的寫扣效率

2015 年 6 月 6 日

筆者最初也是用 Vim，但後來漸漸覺得 Vim 不只是一編輯器，而是一種盡量少用滑鼠的精神 ，而且 VSCode 有超好看的圖形介面，所以就換過來了

換到 VSCode 後我還是繼續用 VSCode Vim ，他支援 Vim 中大部分的快捷鍵，用自己熟悉的指令在畫面中飛來飛去就覺得心情很好XD

除了快捷鍵之外他也支援 easymotion、sneak、surround 等等常見的 Vim plugin，如果你也是 Vim 的愛用者，不妨試試 VSCode 的 Vim extension

這是 VSCode 最強大的功能之一，有時在 trace code 會需要看看某 function 的實作，那就可以用 Go To Definition 跳過去

如果有裝 Vim extension 可以直接用 gd 跳過去、 -O 跳回來，完全不用滑鼠，超方便 der

有時候只想大概看看某 function，那就用 peek 偷看一下，這個動作在 VSCode 裡面叫 peekDefinition ，我自己是把快捷鍵設為 d

Breadcrumb 是麵包屑的意思，在編輯器裡面指的是檔案的導航（如下圖），在設定裡面把 “breadcrumbs.enabled” 設為 true 就有了，關於 Breadcrumb 的快捷鍵可以參考之前的 Release Notes

有了 breadcrumb 後就可以在各個 function 之間跳來跳去，不用再自己上下滑，也完全不用滑鼠

除了在檔案內導航，也可以跳到上層的資料夾跟檔案，要跳回來只要用 Vim 的 -O 就可以了（vim 好棒 :tada:）

如果跟我一樣是從 Vim 過來的，應該很習慣用 nerdtree 開啟檔案，在 VSCode 裡面也可以用 --E 切換到 explorer，完全不需要滑鼠

Bookmarks 這個 extension 可以讓你在檔案內做記號（注意左邊的藍色標籤），然後上下跳來跳去，不用自己上下滑，超好用～

也可以看到現在整個專案內有哪些書籤

Todo Tree 也是一個 extension，跟上面提到的 Bookmarks 有點類似，他會幫你把程式碼中的關鍵字 highlight 起來（我是設定 TODO 跟 FIXME ），然後旁邊 sidebar 也可以看到所有的標籤

// TODO: 記得要實作某某功能，結果一年後還在這裡

如果你有在寫 Go，那每天寫個 20 次 if err != nil {} 應該不為過，善用 snippet 每次省下一秒鐘，一年下來就省下兩個小時

console.log 也是三不五時都在寫，花點時間訂個 snippet 吧～

有時候一個檔案內有太多 function 不好讀，那就把他折疊起來吧

我的快捷鍵是 zc 跟，在 VSCode 的指令分別是 fold 跟 unfold

這時命名就顯得很重要了，要做到 光看 function name 就知道在做什麼 ，那折疊起來就不會影響閱讀

筆者身為 Git 的重度使用者，一天不用 Git 就覺得渾身不對勁，光是內建的 Git 當然滿足不了我，所以下面會介紹兩個更強大的 Git extension

Gitlens 可以讓你回顧過去某個 commit 的修改內容，根本 trace code 神器（筆者我還在尋找更好看的 diff 配色，如果有請推薦我～）

Gitlens 也有提供 git blame 的功能，讓你在發現 bug 的第一時間找到是哪個蠢同事寫的

結果發現是自己 :sweat_smile:

另一個 extension Git Graph 則是補足了分枝圖的部分，因為他的圖實在太精美了，這也是我離不開 VSCode 的主要原因之一XD

演道网