極速開發神器 — vim

Joe Chang
Coding Hot Pot
Published in
6 min readMay 10, 2023
photo by @hishahadat

最近被推坑開始用vim開發,剛開始幻想自己可以像那些大神一樣,只用鍵盤就能夠在畫面上行雲流水的移動,但實際上剛開始用vim開發的我,只能用慘不忍睹來形容,平常用滑鼠習慣了,現在突然要用鍵盤來取代滑鼠真的很痛苦,coding變得非常卡,甚至比沒有用vim還來得慢,說好的極速開發呢?到現在已經過了一個月了,雖然還沒媳婦熬成婆,但至少開始有那麼一點手感了,一開始只會幾個簡單的基本指令,但隨著遇到不同的開發情境,漸漸地挖掘出更多的指令,但多到我實在記不起來😂,於是決定寫一篇文章來紀錄目前我有用過的 vim指令,希望可以快點變成我的muscle memory

如何開始用vim開發

可以用vim的編輯器,也可以用自己習慣的編輯器,不管你用的是什麼編輯器,基本上都會有vim擴充套件可以支援,因此我是用viscode加上vim擴充套件來開發的

先安裝viscode的vim擴充套件

安裝成功後,就會在viscode的下方看到normal這個狀態,然後你就會發現不能打字了(誤)

切換模式

vim的三大模式:normal(移動)、insert(輸入)、visual(選取)

  • 預設均為normal模式
  • 按下i 進入insert模式
  • 按下v 進入visual選取模式

一開始最痛苦的就是發現自己不能隨心所欲的打字,一定要切換到insert模式才能打字,這是我最不習慣的地方

如何從insert或visual切換為normal模式?可以按esc 或 ctrl+[ 或是自行設定快捷鍵,像我是設定j + k,這樣手就不會離開主要打字區

normal 模式常用指令

====小範圍移動=====

h = 左
j = 下
k = 上
l = 右

h/j/k/l 前面加上數字n,就會重複移動n次

ex: 2jj = 向下移動兩行
20h = 向左移動20的字元

w = 往後移動一個單字,遇到符號會卡住
W = 往後移動一個單字

e = 移動到下一個單字的結尾

b = 往前移動一個單字,遇到符號會卡住
B = 往前移動一個單字

f + a = 也就是find {字母}的意思,移動到該行有a的位置,若有多個a就依序往後找
=====大範圍移動======

shift + { = 向上移動一個段落
shift + } = 向下移動一個段落

gg = 移動到開頭段落
G = 移動到結尾段落

0 = 移到單行最前方
$ = 移到單行最後方

:num = 移動到指定行數
ex. :17 = 會移動到17行

insert 模式常用指令

o = 在當前游標的下方新增一行
O = 在當前游標的上方新增一行

i = 在游標前方輸入
I = 在該行的最前面,進入輸入模式

a = 在游標後方輸入
A = 在該行的最後面,進入輸入模式

s = 刪除當前的文字,進入輸入模式
S = 刪除該行所有文字,進入輸入模式

visual選取模式

按下 v 進入 visual模式

v$ = 從該位置選取到句子的最後一個字
vit = 選取該tag內的內容(不含tag)
vat = 選取該tag內的內容(含tag)
vis or V = 選取整行
vgg = 從當前位置選取到整個檔案的開端
vG = 從當前位置選取到整個檔案的尾端

ctrl + v = 選區塊

y = 複製
p = 貼上

刪除

x = 刪除字元
d = 必須先選取才能刪除
D = 刪掉游標到結尾全部
dw = 刪除單字
dd = 刪除單行
2dd = 刪除兩行
dG = 刪掉後面整段

c = 刪掉文字並且進入insert mode
cw = 替換一個單字
cc = 替換整行
c$ = 替換到結尾的文字 = 大寫C
ciw = 刪除當前的詞,進入輸入模式
ci" = 刪除''的內容,並且可以進入插入模式

di" = 刪除''的內容
dip = 刪除一個段落
dtx = 删除文本直到字符“x”(不包括字符“x”)delete to x
dfx = 删除文本直到字符“x”(包括字符“x”)delete forward x

複製&貼上

y = 複製
yy = 複製單行
2yy = 複製兩行
3yy = 複製三行
...依此類推

y$ = 複製到最後面
y^ = 複製到最前面

y% = 在左括號按下該指令,可以複製括號內所有的內容
[] () {} 都適用

p = 貼上
u = 還原

搜尋

/keyword
輸入完後按下enter
n = 下一個符合條件的
N = 上一個符合條件的


* => 搜尋游標當前所在的文字
ex. 游標停在star這個單字,按下*就會搜尋所有符合star的結果


將全部的101取代為104
:%s/101/104/g

暫存區

"dyy = 複製該行並且存到d的暫存區
"dp = 貼上d暫存區的內容

//暫存區有a-z可以使用

取代

rW = 將字元替換成W單字
~ = 會把小寫替換成大寫,若原本是大寫則會換成小寫

特殊

J = 將游標所在的行與下一行合併
:split = 視窗上下分割
:vsplit = 視窗左右分割

ctrl + w + w = 切換至右側或下方的視窗
ctrl + w + l = 切換至右邊視窗
ctrl + w + h =切換至左邊視窗
xp = 快速交換兩個字元

easymotion

讓你快速移動到想去的地方,首先打開vscode settings json的設定檔加入下面三行,vim leader可以定義成自己喜歡的按鍵

  "vim.easymotion": true,
"vim.leader": ",",
"vim.hlsearch": true,

然後輸入 ,,s 就會看到vscode下面出現這幾個字,代表你成功進入easymotion input

假如我想要跳去第六行的fetch(f的位置)

只要輸入f,就會看到畫面上所有的f都會上色,再輸入對應位置(u)的字母就可以瞬間移動過去了!是不是很方便?

最後如果對vim有興趣的朋友,非常推薦看龍哥的影片,淺顯易懂!

--

--

Joe Chang
Coding Hot Pot

前端工程師,唯有非常努力,才能看起來毫不費力