每個開發者都應該要會用的編輯器–Vim

經過了上禮拜的 Mac 環境設定後,我們的開發環境開始有模有樣起來了。

但作為一個真正的駭客,我們還缺少了一項東西—Vim 編輯器。

現代的 IDE (Integrated Development Environment)有各式各樣的選擇,除了優雅的 Sublime Text,其他也很熱門的有 VS Code, Atom 等等,JetBrains 出品的系列也是個個品質保證(現在我用的就是他們的 RubyMine),但是 Vim不一樣。

Vim 是大部分系統都有內建的編輯器,所以當你打開一個全新的電腦,或是用任何人的電腦,他們不一定會裝你熟悉的 sublime 或是 vs code,但是一定有 vim 可以用。再者,它可以直接在 terminal 介面裡面操作,當你只是需要快速修改某個檔案,或是握一些簡單的編輯又不想開肥大的 IDE 時,vim 是個非常方便的選擇。

Vim 不只是方便而已—它最大的特點就是讓你的手能夠一直保持在鍵盤之上就能完成所有工作。當你對 vim 的掌握已經爐火純青,就能夠做到「所思即所打」,讓鍵盤跟得上思考的速度。這是 Vim 強大的地方,也是它非常難學的原因。基本上可以把 Vim 看成一個語言,它有自己的語法與邏輯,所以也需要時間來逐漸熟悉。不過是一個編輯器,真的有必要花這個心力去學嗎?相信我,學會了你就知道它的威力有多大了。

而 Vim 強悍到許多現代 IDE 都有支援 Vim mode(Sublime 中的 Vintage Mode、RubyMine 中的 Idea Vim)就知道開發者們還是放不下它。

基本上這篇文章的定位是一個資源的指引,不會有手把手教學,但是絕對會把你安全的送往很多有完整手把手教學的地方。很多都是我一路學過來發現的寶藏。大概分成四個部分:

1. 怎麼開始
2. .vimrc 設定檔
3. 實用的 Vim Plugins/外掛
4. 好(神)資源

一、怎麼開始

Vim 不像其他的編輯器/IDE,一打開就可以用直覺開始使用,記得我第一次用 vim 打開一個新檔案,盯著鍵盤半分鐘後,完全不知道應該怎麼做,只好默默關掉改用 sublime 開。

所以到底要怎麼克服這個真的是有點高的入門門檻呢?

不要看 cheat sheet

https://upload.wikimedia.org/wikipedia/commons/3/34/Cheatsheet_Vim_with_%27programming_Dvorak%27_layout.png

一開始準備要學 Vim 時,第一件事就是去下載一張類似上面的 vim cheat sheet,變成自己的桌面,還跑去圖書館撈了一本 vi/vim editor 的參考手冊,想說這樣有事沒事就會看到,也可以隨時有個參考,看著看著就會記住了,吧?

我錯了。對於一個連上下左右都還需要遲疑一下才知道在哪裡的菜鳥而言,這張密密麻麻的表唯一的作用只有嚇壞自己而已。就像是跟一個劍鞘都還拿不穩的初心者介紹屠龍刀的二十種用法一樣—無福消受啊。Cheat sheet 的特點就是資訊密集度非常高,所以可以讓有經驗的人一眼就知道自己要找的資訊在哪裡,但是如果每一個資訊對你來說都是新的,那你看這張表只會感到疲憊、被淹沒、還有很煩。

寫自己的小抄

這是我後來發現很有效的方法—從最基礎的 y(yank), p(paste), d(delete), c(change) 還有它們的變化,比如說 yy(yank a line), 3dw( → 3 delete word → delete 3 words) 開始寫小抄,一次大概寫 1/3 A4 紙大小就好了。小抄哪裡來?Google 是好幫手。當你發現自己有什麼不會的指令,google,然後把它抄下來。有需要再查也會比較有感。

等第一張夠熟練了,就換下一張,如此你不斷在加強新知識,但是同時可以掌握學習的份量。丟掉前一張小抄換成下一張的時候也是一種證實自己進步了的儀式,成就感/里程碑是保持熱忱萬萬不可或缺的因素啊。

當你對 vim 有一定的熟悉程度後,就可以去看 cheat sheet 了。但是不要看上面那一張,網路上有更好的選擇,這張真的沒有很好看。

沒有「下次再學」這件事

做個有骨氣的人。學 vim 的人應該都有一個原本用得很順手的 IDE 了,練習的時候一定會有時常又強烈的渴望打開那個 IDE 結束這一切苦難—相信我,I’ve been there。只能說,撐下去就是你的,還有網路是你的救星。

從寫小東西開始

一個對我很有幫助的方式是從寫小東西開始。這個小東西最好原本就是你生活中會使用的一部份、比較沒有時間壓力、格式醜一點之類的沒有什麼關係的,對我來說就是筆記了。反正做筆記的時候最低要求就是該記下來的字有記下來,還不會分行?沒關係之後再說。還不會移動文字?沒關係之後再說。總之就是先讓自己習慣使用 vim 這個環境,還有練習在小抄上面的指令。side project 也是個合適的選擇。總之,讓它出現在你生活中,慢慢練習,總有一天你會發現你越來越不用思考就能夠順暢的使用 vim 了。

呼應之前說的,把 vim 當成一個語言,多用自然就會了。

二、Vim 環境設定:.vimrc

vim 很厲害的一點是它是一個 highly configurable 的編輯器,你可以對它做各式各樣的設定,為你自己刻出一個量身打造的工具。Vim 本身不會附帶 config file,你要自己創造一個檔名叫做 .vimrc 的檔案放在 home directory 底下。(順帶一提,通常開頭是 . 的檔案都是系統設定檔,預設是看不到,可以在命令列用 ls -a 看到。)

既然每個人都有自己獨特的設定檔,要怎麼開始建立自己的 .vimrc 呢?當然這時候就是去參照各方大神的 .vimrc 的時間了。vgod 的跟 amix 的可以做個起手式。好吧既然你都問了,我就也放上我的做個參考。

不過建議先不要把自己的 .vimrc 弄得太複雜,可以先看過一遍大概知道有哪些常見的選擇,但是最好是碰到什麼需求再去一點一點慢慢加,這樣也會對那些設定有更清楚的暸解。

三、實用的 Vim Plugins

在現代 IDE 各種酷炫功能的虎視眈眈之下,Vim 這個被很多人嫌古老的編輯器當然不甘示弱地出了很多厲害的外掛,不輸那些 IDE 功能,只怕還更好。Vim Awesome 是一個集大成的網頁,可以上去挑選自由取用。以下介紹幾個自己現在比較常用的。

Vundle

網址:https://github.com/VundleVim/Vundle.vim

Vundle 是一個幫你管 plugin 的 plugin—它的工作是自動下載、安裝與管理你的 Vim plugins。相信我,你想要的。裝好 Vundle 之後下面介紹的所有 plugins 一次裝完絕對五分鐘之內搞定。

Vundle plugin list example

這是目前我在 .vimrc 中插件的示意圖。基本上你想要裝什麼插件只要加上一行 Plugin '<the plugin>'然後按 : 開啟命令行,跑 PluginInstall就好了。既然安裝方式都一樣,下面就不特別說安裝方式了。

Vim Surround

網址:https://github.com/tpope/vim-surround

Vim Surround 是處理一切有關 brackets ,包含 [], {} ,(), “”, ‘’的或是 backtick `` 的好工具。最厲害的是它整合了 vim 的 object 觀念,也就是你可以指定要對這個句子、這個字還是這個字直到這行行尾做括號,去除括號還是換一種括號。簡言之—是的它也需要一小段時間習慣,但是絕對值得投資!

The NERDTree

網址:https://github.com/scrooloose/nerdtree

我最喜歡 sublime 的地方就是它有一個資料夾結構的 sidebar,非常簡潔滑順,讓你可以在專案底下優雅地滑來滑去。 NERDTree 提供了一個相似的功能:

NERDTree example

Vim 預設是不支援滑鼠的,所以如果想用滑鼠滾目錄的話,在 .vimrc 中加入

set mouse=a   " 開啟 mouse-reporting 功能
let g:NERDTreeMouseMode=3 " optional: 單鍵點擊就可以打開資料夾/檔案

Instant Markdown

網址:https://github.com/suan/vim-instant-markdown

前面提到我一開始是先用做筆記的方式來練 vim 手感,筆記都用 markdown 格式寫,很好的地方是 只要在 .vimrc 裡面加上 syntax enable 就可以自動有 syntax hightlighting,反而勝過用 word 寫還要自己調自行顏色等等的麻煩。

Instant Markdown 則是更進一步,讓你一邊寫一邊就可以看到它實際被 render 出來的樣子。滿好玩的。

Instant Markdown live rendering

CtrlP

網址:https://github.com/ctrlpvim/ctrlp.vim

Sublime Text 有一個非常強的功能:fuzzy search。按下 Ctrl+P (Windows)/Cmd+P(Mac) 打下任何關鍵字,演算法就會馬上計算,去你當前目錄裡面搜相符程度最高的檔案給你,非常便利的一項工具。比如說我今天想開 posts_controller.rb 這個檔案,我只要打開 Cmd+P,隨意打個 post con 它就會出現在選項第一個了。

Vim 的 CtrlP 就是這個功能。CtrlP 設定好之後,在 .vimrc 中加入下面三行

let g:ctrlp_map = '<c-p>'
let g:ctrlp_cmd = 'CtrlP'
let g:ctrlp_working_path_mode = 'ra'

就可以開始用了。

CtrlP example

只是雖然功能是有的,還是有些限制,比如說目前還不支援空白(也就是說不能打 post con)不管怎麼樣,這已經是一個很厲害的工具了。

這邊有一個 hack(來自這裡),CtrlP 預設使用 grep 來搜索,我們可以把它改成下面的 ack,會讓表現更好。在 .vimrc 加上:

if executable('ag')
" Use Ag over Grep
set grepprg=ag\ --nogroup\ --nocolor
" Use ag in CtrlP for listing files.
let g:ctrlp_user_command = 'ag %s -l --nocolor -g ""'
" Ag is fast enough that CtrlP doesn't need to cache
let g:ctrlp_use_caching = 0
endif

Ack.vim

網址:https://github.com/mileszs/ack.vim

簡言之就是一個升級版的 grep。在 sublime 裡面就是 Ctrl+Shift+F 目錄搜索的功能。這個更好的是還可以整合 The Silver Searcher(比 ack 更加輕量化/速度更快),只要在 .vimrc 中加入

let g:ackprg = 'ag --nogroup --nocolor --column'

就好了。真的很強大。

ack.vim + the silver searcher example

Nerd Commenter

網址:https://github.com/scrooloose/nerdcommenter

這是一個讓你輕鬆處理 comment 的工具。原本我是用 tcomment,但是它讓我的 vim key mapping 變得很亂,加上了很多我絕對用不到的快捷鍵(快捷鍵污染 — 不 OK),所以後來就捨棄 tcomment 改用 Nerd Commenter。Nerd Commenter 的優點是它預設所有 mapping 都是用 <leader> 來管理,對我而言乾淨整潔多了,而且可以跟其他插件的快捷鍵一起管理。

還有很多

除了這邊提到的,還有很多像是 vim-fugitive, vim-ruby, supertab, vim-easymotion, youcompleteme 提供許多便利好用的功能。當然,插件一定會一定程度影響到 vim 的反應時間,所以有需要的再裝就好,不然就跟那些一次所有東西都包給你的 IDE 沒有什麼差別了是吧。比如說對現在的我而言,最常使用到 vim 的是拿來寫簡單的 C 跟 markdown files,寫 Ruby 的話我會用 Rubymine 或是 Sublime Text,所以基本上沒有裝什麼 language-specific 的插件。

四、好(神)資源

下面列出我學習 vim 以來搜刮到的好資源,全部都很推薦,尤其新手一定會受益良多:

Vim 的哲學

這是一個系列,事實上是寫這篇文章時偶然發現的,寫得真好。裡面除了教你從頭開始熟悉 Vim 之外,也有很多很棒的分享,就算不是 vim 新手一定也會有收穫的。

Learn Vim for the Last Time

雖然滿長的,但是是滿好的入門教材。

Vim Fandom

基本上這個不太需要介紹,因為你只要常用 google 搜 vim 相關的資源就會常常看到這個網站。總之這是一個算是滿厲害的論壇吧,基本上帶著問題進來絕對不會空手而返的。

Vim Galore

一個非常詳細,從頭開始帶你暸解 vim 的指引。很厲害也很實用。

進階資源

下面是進階一點的資源,給那些真的有心要把 vim 磨成自己專屬的 IDE 的一個參考:

忠告:見好就收,適可而止

Vim 是一個越挖會陷越深的坑,寫這篇的時候每次順手查個引用資料都會再度被拉走,等回過神來半小時又過去了……當然,前期開始學的時候需要一點耐心,而當你有基本掌握 vim 的能力的時候,就會越來越享受它的威力,然後開始花大把大把的時間在你的 .vimrc 裡面(唉)。總之,這個年代久遠的編輯器在現在一個比一個強悍的 IDE 出現還能歷久不衰,並且在每次「哪個 IDE 最強」的論戰中一定會被捧出來,絕對是有它的原因的。

好了不說了,我要繼續修我的 .vimrc 了。

文章同步發表於 Medium


  • Find me at