28

VSCode 如何提高我的寫扣效率

 5 years ago
source link: https://www.tuicool.com/articles/i2Qbyi6
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Vim

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

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

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

EbyMNrz.png!webJVVj6jn.png!web

Goto/Peek Definition

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

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

IR7Rz2u.jpgN3uu6fn.gif

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

UjEfUza.jpgea6Rzma.gif

Breadcrumb

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

EZ7BFrA.png!web

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

EjqEFvb.jpgEBFNbmZ.gif

除了在檔案內導航,也可以跳到上層的資料夾跟檔案,要跳回來只要用 Vim 的 <ctrl>-O 就可以了(vim 好棒 :tada:)

rIVNF3m.jpge2MFBjQ.gif

Explorer

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

yAVRbmn.jpgJnMNjeZ.gif

Bookmarks

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

7neeaq3.jpgA3uM3ei.gif

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

jIB3A3a.png!webUrQ7Rf3.png!web

TODO & FIXME

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

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

zYVn2aR.png!webJzeaYbv.png!web

Snippets

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

ZfEneyr.jpgniaE3iv.gif

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

mUJviiV.jpgFzI7Njz.gif

Folding

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

我的快捷鍵是 zc<space> ,在 VSCode 的指令分別是 foldunfold

z2aUJbU.jpgiAZNJnE.gif

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

Git Graph & Gitlens

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

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

3YBFbeA.png!webaimmiab.png!web

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

結果發現是自己 :sweat_smile:

2AriI3r.png!webYfm2eqJ.png!web

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

N7z6j23.png!webNrQvEvb.png!web

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK