VSCode With VIM

September 26, 2021

  • tool

若有任何問題或有錯誤都可以至我的 Blog Github 發 issue 給我。

Preface

馬克斯曾說過:“請專注在提高生產效率,而不是忙身上”,我自己認為,這是接案的一種信仰,坦白說,我自己也無法完全做到,我認為這是一件非常非常難的事情,跟處理機台必須要有固定的 SOP 不同,客戶的需求是會變動的,一些工程師或 PM 可能會說,那就做的”彈性”一點,但是何謂“彈性”,這又是一門有趣的議題了。

所以扣除掉 PM 能跟客戶周旋商討的部分,工程師的實力也沒太大的問題,那要在時限內快速進行交付,可能就需要去使用自己認為最適合自己的工具及熟悉工具的使用,而 vim 我認為是工具界的翹楚,雖然學習曲線一開始偏高,但是熟悉後,就是另一片天空了。

Why VIM? Disadvantage

在推銷一件工具時,我會先希望你知道他的缺點是什麼,以及我自己使用上的經驗。

  • 如果是使用原生 terminal (MacVim, NeoVim) 需要安裝一些套件,要使用 vundle,vim-plugin…等之類的套件來做安裝,也有可能要使用 lua 這程式語言,如果不想太繁瑣,可以直接安裝 vscode 或 jetbrains 的 IDE 然後直接安裝 vim 的套件就行。

  • 因為我不是 windows 用戶,所以不太知道 windows 該如何設定。

  • 一開始的學習曲線偏高,可能要練就不看鍵盤也可以流暢打字的能力,會比較好上手。

  • 中英文切換我認為是 vim 的硬傷,但是使用久之後其實也還好。

  • 有所謂的模式切換 Normal mode, Visual mode, Edit mode,需要去適應,這是 vim 的核心,簡單來說,選擇就是 Visual mode, 更新就是 Edit mode,普通情況位移或著需要額外的功能就是在 Normal mode 底下做事…等。

  • 有時候需頻繁按某些按鍵尤其 esc,畢竟要多按按鈕就是麻煩,要移動就是必須切到 Normal mode 或 Visual mode…等。

  • 自己使用下來,不太適合與 pug (jade) 進行使用,相較於 html,原因是沒有被 tag surround,所以我自己除接案之外都是使用 html 居多,外加現在 IDE 不論是套件的 autocomplete tag 或內建的都很方便,此外我本身除了 vue 也會寫 react 的 jsx 所以還是比較習慣有 tag。

    <!-- surrounding by tag -->
    <div class="hello">Hello</div>
    .hello Hello // <=== not surrounding by tag
  • 自己使用下來,不太適合與 sass 進行使用,相較於 scss、css,原因也是因為沒有 tag surround,但是可以用 V 整行的 Visual mode 去做處理,比起 pug 問題少很多,畢竟 css 就是一行一行的,雖然我自己除接案之外還是偏好使用 scss 居多。

    .hello {
      background-color: orange;
      color: orange;
    
      &::after {
        content: "";
      }
    }
    .hello
      background-color: orange
      color: orange
    
      &::after
        content: ""

Why VIM? Advantage

在以前線上遊戲 MMORPG 還盛行時,尤其是 PVP (Player vs Player),你需要快速施放某個法術給某個特定的使用者,所以可能會去設定很多快捷鍵,方便在遊戲遊玩時去做使用,而 vscode 的 vim 套件已經為大部分的使用者設定好了,那你需要做的就是去熟悉這些快捷鍵。

其實學習 vim 的大部分的人的初衷,就是讓工程師盡量地遠離滑鼠的使用,我自己認為,學成之後,打程式碼的速度是以 logN 的方式在做變化的,尤其是對”接案”非常有益。

下面是我常使用的指令,有點類似 cheat sheet,可以參考一下:


位移

左下上右 位移分別是 h j k l

較高階使用方式,可以將 line number 調整成 relative line number,接著使用 20j 便可以向下跳距離你原先 20 行,相反向上跳就是 20k

如何以單字的方式來進行跳耀,對於 vim 的使用者來說會是 w ,如果是做英文網站,這非常好用!!!

如何以單字的方式向後來進行跳耀,對於 vim 的使用者來說會是 b

如何快速跳到第一行,對於 vim 的使用者來說會是 gg

如何快速跳到最後一行,對於 vim 的使用者來說會是 G (shift+g)

當畫面出現滾輪,你想將你程式碼的位置位移到畫面的中央,對於 vim 的使用者來說會是 zz

如何快速跳到該行最後一個字,對於 vim 的使用者來說會是 $ (shift+4)

如何快速跳到該行第一個字,對於 vim 的使用者來說會是 0


介面

如何快速的新增視窗(pane)在右邊 :vsp (vertical split pane 的縮寫)

如何快速的新增視窗(pane)在下方 :sp (split pane 的縮寫)

如何在不同的 pane 之間進行跳耀?可以使用 ctrl+w ctrl+w,如果是向左可以使用 ctrl+w ctrl+h,向右可以使用 ctrl+w ctrl+l,依此類推


模式

如何回歸 Normal mode,對於 vim 的使用者來說會是 esc (左上角 esc,沒錯就是 esc 那顆按鈕)

如何切換至 Visual mode,對於 vim 的使用者來說會是 v,變可以使用 h j k l 來拖拉想選取的位置

如何切換至 Visual mode 並選擇整行,對於 vim 的使用來說會是 V (shift+v)

如何切換至 Edit mode,對於 vim 的使用者來說會是 i


快捷鍵

如何快速將 div 內的文字刪除或取代掉呢? 對於 vim 的使用者來說答案會是 cit (change in tag 的縮寫) 會直接進入 Edit mode 或著 dit (delete in tag 的縮寫) 會維持在 Visual mode

<div>hello world</div>

如何快速將 a tag 換成 button 呢? 對於 vim 的使用者來說會是 cst< (change surrounding tag 的縮寫)

<a>Link</a>

如何修改單個字?對於 vim 的使用者來說會是 s

如何快速刪掉整行,對於 vim 的使用者來說會是 dd

如果想刪除多行,可以使用 number + dd,舉例:2dd

如何複製文字呢?先按 v 切入 visual mode,用 h j k l 位移選取想要複製的文字,接著 y (yank 的縮寫),按 p 貼上(paste 縮寫)

如何複製”單字”呢?先按 v 切入 visual mode,用 w 位移選取想要複製的文字,接著 y (yank 的縮寫),按 p 貼上(paste 縮寫)

如何快速複製”整行”,對於 vim 的使用者來說會是 yyp

如何重複上一步驟,對於 vim 的使用者來說會是 .

如何回復上一步驟,對於 vim 的使用者來說會是 u (undo)

如何搜尋某個單子 / 後面接單字,舉例來說我要搜尋 className,那我就會 /className 去做搜尋,搜尋到後按 enter,接著便可以按 n (next occurance 的縮寫) 去找尋你要搜尋的究竟是哪個 className,大寫的 N 則是反向搜尋。

如何插入字到該行最後的位置,並轉換到 Insert mode?對於 vim 的使用者來說會是 A

如何註解程式碼,如果是使用類似 VSCode 可以進入 visual mode 直接使用 cmd + / 去註解,如果是使用 vim 可以進入區塊 visual mode 快捷鍵是 ctrl + v 接著使用 shift + i 進入輸入模式,最後輸入 // 去註解,去註解則是使用 ctrl + v 選取好後用 d 去刪除註解


Vscode

cmd + shift + e 可切到資料夾的樹狀區,便可以使用 j k 進行位移,並選擇你要開啟哪個檔案。

先用 v 切入 visual mode,接著使用 S+< (surrounding tag) 並輸入想環繞的 tag 名稱,假設我輸入 div,便可以將 <h1>hello</h1> 變成 <div><h1>hello</h1></div>


Conclusion

我認為工程師就是不斷讓自己精進,那精進的方式有很多種,你如果對前端藝術有興趣,你可能就會朝 p5.js,three.js,pixi.js,GSAP,甚至去學習 blender 或著 VR 去做精進,亦或著是你喜歡較深的類似用 JavaScript 寫框架,處理效能,使用網站做工具,你可能就會往底層下去摸索,又或著你對我所提的都沒興趣,你的選擇就會朝較廣泛的方向去做學習,學習後端,雲服務…等,但不論是哪種,當你開始要寫程式碼時,vim 就會是你的好夥伴。

去學習對自己有易的工具,我認為是每個工程師所要面對的問題。就像有些人會在網路上大戰 vue 還是 react 究竟哪個好,我個人認為沒有對錯,只要符合使用場景,用得好,就是好的框架。

如果有新增或遺忘的部分我之後有空也會補上,有任何問題都歡迎寄信給我,網路上也有一些人分享有關 vim 的文章或快捷鍵,如果有興趣我都推薦去閱讀看看,畢竟就是他們使用上的心得。

題外話:像 Apple 這種硬邦邦公司 xcode IDE 在 2021 也為 vim 進行妥協了,在新的 beta 版本,你也同樣可以使用 vim 寫 swift 在 xcode 內,算是對 vim 使用者的福音。


Mayvis Chen
你好,我是 Mayvis Chen
住在台北,會點前端,會點後端,熱愛分享新知及愛喝奶茶的全端打雜工程師。