30 天從 VScode 到 Vim

Feb 4, 2022 | 👀 19 mins | vim config update

2021 年最大的轉變應該就是接觸到了現在的編輯器之神，年初的時候上了資科系蔡銘峰老師開的網路搜索與探勘，第一次看到 Vim 這個編輯器，還有老師跟鬼一樣的操作，讓我默默下定決心要向老師看齊（這堂課又是另一個充實的故事了）；不過自己下去學真的門檻太高，在去年四五月之後就被我暫時擱置在一邊了，直到五月找到實習，七月正式到公司上班之後發現老天，幾乎一半的同事都用 Vim 在開發（包括老闆本人），再加上某個週五的快樂分享會，有位同事分享了他是怎麼從 VScode 轉換到 Vim 上的，我才真正下定決心去把 Vim 學好（畢竟升碩一的暑假也是真的很閒沒錯）

Vim 基本操作

所有基本操作我都是看這組教學影片學的，再搭配蔡老師在課堂上介紹 vgod 的 vim 配置和 cheatsheet，如下圖。

基本上如果每天都有在寫程式，每天都逼自己使用 Vim 的話，大概十幾天之後就能夠熟悉基本的操作，接下來就是處理設定檔與外掛的部分。當初我在設定時也是搞得很頭痛，因為最當初什麼都還不懂時就直接使用 vgod 的設定檔，導致操作真的上手之後很多設定其實不是我要的，於是最後我把設定檔全部刪掉，連 Vim 也重新安裝，才真正開始重新設定我的 Vim。

裝外掛囉！

雖然很像幹話，但在裝外掛的前提是要搞清楚自己想要的功能到底有什麼，不然跟著大家一起亂裝到最後有些功能也許到死都不會用到。像在剛切換到 Vim 之前，我才體會到 VScode 上的 Cmd+P 這個功能有多方便，可以不用從側邊的檔案欄一個一個資料夾慢慢找檔案；像是這樣子的思考方式，可以更快找到想要並且需要的外掛，所以之後我參考了這個影片、並列出了下面幾項我需要的功能，還有對應到我最後找到的外掛：

想要的功能	外掛本人
Tabnine(Auto Complete)	Coc 裡的 Tabnine
Ctrl / 單行/多行註解	NERDCommenter
Ctrl P 尋找檔案	CtrlP
File tree viewer	NERDTree Devicons
Git status	Git Gutter
好看的主題	Airline(優化基本介面) VScode Horizon Theme

而我在 Vim 上使用的外掛管理工具是 Pathogen，因為在安裝時只要把外掛的 github repo clone 到 autoload/ 的資料夾裡就好，不用在 .vimrc 裡新增初始化的設定（當然如果要改外掛初始設定還是得修改）讓我覺得很方便也很好理解。

其他設定

Keymapping

不得不說 Keymapping 真的是很方便的設定，讓我可以完全把在 VScode 上習慣的快速鍵直接搬過來用，這也是一些外掛（像 CtrlP）的運作基礎。舉例來說 nnoremap <Right> <Nop> 的意思是，在 Normal mode 下，<Right> key 要對應成 <Nop> 也就是沒有動作（當初在學基本操作時為了強迫自己記得而設定的），而如果要改在 Visual mode 的 keymapping 的話只需要把 nnoremap 改成 vnoremap 就行了，其中的 nore 代表的則是 no recursive，避免無窮迴圈。

這邊我主要是設定輸入 ( [ ' " 就會自動跳出 ) ] ' "，還有輸入 { 後如果接的是 <Enter> 就自動補上 }，{{ 自動生成成對的大括號 {}

inoremap ( ()<Esc>i
inoremap " ""<Esc>i
inoremap ' ''<Esc>i
inoremap [ []<Esc>i

inoremap {<CR> {<CR>}<Esc>ko
inoremap {{ {}<ESC>i

外掛設定

接下來就是我對外掛設定的 keymapping，這邊真的蠻複雜的，查了一堆資料才把這些設定搞好🥲

NERDTree

Ctrl E 開啟 NERDTree
忽略 node_modules/
在 NERDTree highlight 當前開啟的檔案

nnoremap <C-E> :NERDTreeToggle<CR>
let g:NERDTreeIgnore = ['^node_modules$']
autocmd BufRead * call SyncTree()

NERDTree + CtrlP Sync

在查外掛設定時看到了一個很酷的功能，就是當 NERDTree 是開啟時執行 CtrlP 尋找檔案，當選取檔案開啟後同步更新 NERDTree 的展開結構，這個行為跟 VScode 裡的 Ctrl P 行為幾乎是一模一樣了！不過因為原作者寫的 IsNERDTreeOpen 有點問題，沒辦法正確判斷 NERDTree 是否開啟，後來上網查了一堆資料才改成下面的結果（註解的部分是原作者的 code），不過因為是很久以前改的，我也沒有留連結，只記得是在 StackExchange 上看到的😢（再不寫紀錄啊）

" CtrlP + NERDTree
" sync open file with NERDTree
" Check if NERDTree is open or active
function! IsNERDTreeOpen()
  return exists("g:NERDTree") && g:NERDTree.IsOpen()
  "exists("t:NERDTreeBufName") && (bufwinnr(t:NERDTreeBufName) != -1)
endfunction

" Call NERDTreeFind iff NERDTree is active, current window contains a modifiable
" file, and we're not in vimdiff
function! SyncTree()
  if &modifiable && IsNERDTreeOpen() && strlen(expand('%')) > 0 && !&diff
    NERDTreeFind
    wincmd p
  endif
endfunction

主題設定

這邊選用了從 VScode 搬過來的 Horizon theme，所以 terminal 原生的色彩可能會不夠用，因此會需要將 Vim 設定為 true color，並且使用 iTerm 才能顯示與在 VScode 一樣的顏色。

" Colorscheme
set t_Co=256
colorscheme horizon
" Set true colors
set termguicolors
let &t_8f = "\e[38;2;%lu;%lu;%lum"
let &t_8b = "\e[48;2;%lu;%lu;%lum"
let g:lightline = {'colorscheme' : 'horizon'}

Auto Command

在存檔前自動刪除空白鍵（Rubocop 會抓😀🔪）
開啟 Vim 後自動開啟 NERDTree

" Autocmd: remove space before save
au BufWritePre * :%s/\s\+$//e
" Autocmd: Open NERDTree while opening vim
au VimEnter * NERDTree

基本上這些就是我的 Vim 設定比較特別的地方，前前後後大概花了約一個月的時間上手並且設定完成，在熟悉 Vim 之後真的會覺得介面乾淨很多，不會跳很多要更新外掛、更新 IDE 之類雜七雜八的通知，而且去別的地方編輯到要存檔時真的會習慣要打 :w lol

Reference