vim 的簡介

1. 一小時學不會的 Vim
大家一起從入門到放棄
Fred Hung spreered@gmail.com

2. Vim 的冷知識
● Bram Moolenaar 在 80 年代末期買了一台新電腦，上面沒有他最愛用的編輯器
vi，所以他就自幹一個。
● 本來叫做 Vi IMitation，後來變強後改名叫做 Vi IMproved。
● 最新版本是 VIM 8.0
● 雖然是開源項目，但是因為 Bram 的獨裁造成一些人不爽，所以催生了 neovim
● neovim 有很多很潮的功能

3. Why Vim ?

4. source: https://github.com/amanusk/dotvim

5. 哪裡用的到 Vim
● 在 Terminal 裡面安裝 Vim 或 neovim
● HackMD / Codepen 等線上編輯器其實都有支援 Vim mode
● VScode 本身有 Vim pluging，甚至 neovim plugin 讓 VSCode 可以直接吃
.vimrc
● JetBrain 系列 IDE 也有支援，知名講師 91 哥也有開課以 vim 為基來快速開發

6. 今天會介紹的
● 基礎編輯指令
○ 主要操作模式
○ 開關存擋、游標移動、新增修改刪除、複製貼上、搜尋
● Vim 編輯器世界觀
○ text object
○ buffer / window / tab
● 打造自己的 vimrc
○ basic setting
○ key mapping
○ skin
○ plugin
○ nvim 和 lsp

8. 基礎編輯指令

10. 主要操作模式
normal
mode
insert
mode
visual
mode

11. 主要操作模式
normal
mode
insert
mode
visual
mode
其他所有功能，例如：
- 移動
- 搜尋
- 開關檔
- 設定... 等
文字輸入 文字選取

12. 主要操作模式
normal
mode
insert
mode
visual
mode
i
a
v
V
ctrl - v
esc
esc

13. 主要操作模式 - 鍵盤設定
Ctrl 很重要，所以要改位置
🤯 Esc 可以被 Ctrl - [ 或 Ctrl - c 取代
😵 Mac 可以去設定 Ctrl 跟 Cap 互換

14. 開關存擋
開 (n) :e filename
關 (n) :q
存 (n) :w

15. 游標移動
h ← j ↓ k ↑ l →
> 用遊戲練習：Vim adventure

16. 游標移動
(normal mode)
跳字往前 w / W / e / E
跳字往後 b / B
行首 0 / ^
行尾 $
頁首 gg
頁尾 G

17. 游標移動
(normal mode)
跳行 {number}G
往上跳 number 行 {number}k
往下跳 number 行 {number}j
(開啟行數的設定 :nu )

18. 游標移動 - 單行跳字
(normal mode)
在這一行往前/後跳某字 f[字母] /F[字母]
繼續往前跳 ;
往前一個跳 ,

19. 新增修改刪除
以下從 normal mode 到 insert mode
insert i / I
append a / A
插入下一行 o
插入上一行 O
插入上一行 O

20. 新增修改刪除
刪除 x
取代 r
(從 visual mode 選取後) 刪除 d
刪除一整行 dd
(從 visual mode 選取後) 刪除後進入 insert mode c

21. 錯了怎辦
undo u
redo <C-r>

22. Visual mode 選取
單字 v
整行 V
Block <C-v>
🤯 Tips <C-v> 選完後按 I 可以整段插入

23. 工程師必備
(v 選完後) yank 複製 y
put 貼上 p
複製整行 yy
🤯 Tips “[a-Z] 放在前面，可以選擇複製到哪個暫存器。 例如 “ay “ap
🤯 Tips [number] 放在前面，可以選擇往下複製哪幾行。 例如 10y

24. 搜尋
(以下都在 normal mode 輸入)
往下搜尋 /
往上搜尋 ?
繼續搜尋同一個字 n / N
直接搜尋游標所在字 #

26. Call To Action
Editor 先改成 Vim mode
Caps lock 換成 Ctrl
印出 cheat sheet 貼在螢幕下方

27. Vim 編輯器的世界觀

28. Text object
文字區塊是個物件，常用的區塊如：
● 字 w / W
● 段落 p
● 各種括號 ‘ ‘ / “ “ / [ ] / { } / < >
● Tag t

29. Text object - 連續技
v i w
動作 i / a 裡外 text object

30. Text object - 連續技
yat
ci”
da[

31. Buffer
● “A buffer is an area of Vim's memory used to hold text read from a file. In
addition, an empty buffer with no associated file can be created to allow the
entry of text.”
● 可以想像成「instance of file」

32. Buffer
列出所有 buffers :ls :buffers
關閉 buffer :bd
Navigate buffers
往前 :bp
往後 :bn
跳到第幾個 :b{number}
前一個 <C-^>

33. 插播：跳轉位置
:h jumps
往前跳躍點 <C-o>
往後跳躍點 <C-i>

34. Window
● “A window is a viewport on a buffer”
● 可以水平分割 / 垂直分割

35. Window
新水平視窗 :new {filename} :sp[lite] <C-w>+s
新垂直視窗 :vnew {filename} :vsp[lite] <C-w>+v
關閉視窗 <C-w>+c
游標跳視窗 <C-w> 加上 w / h / j / k / l

36. Window
ref: https://www.barbarianmeetscoding.com/boost-your-coding-fu-with-vscode-and-vim/splitting-windows/

37. Window
ref: https://technotales.wordpress.com/2010/04/29/vim-splits-a-guide-to-doing-exactly-what-you-want/

38. Tab
“A tab page is a collection of windows.”

39. Tab
開啟 :tabe {filename}
移動 gt / gT
把 buffer 全部展開成 tab :tab ba

41. Vim 的編輯習慣不一樣
一般編輯器開新的檔案 = new tab ，Vim 開新的檔案 = new buffer
一般編輯器 tab 在分割視窗裡面，Vim 的分割視窗在 tab 裡面
Vim 把 tab 關掉 buffer 不一定會關掉，多個 tab / window 可以呈現同一個
buffer

42. https://dev.to/iggredible/using-buffers-windows-and-tabs-efficiently-in-vim-56jc

43. 打造自己的 vimrc

44. 你絕對記不得接下來講的東西
但我們的目標是看得懂別人的 vimrc

45. 基礎設定
● 在 normal mode 下面輸入 :[設定的指令]
● 或是在 ~/.vimrc 寫上要設定的指令
● :source ~/.vimrc 或編輯當下 :source % 重新讀取 vimrc
● :h [command] will save you
● :set 列出已經設定項目，:set all 列出所有項目

46. 基礎設定 - 範例
set number “開啓行數
set hlsearch “搜尋 highlight
set incsearch “增量搜尋
set wrap “換行

47. 基礎設定 - 顏色
:filetype on
:filetype indent on
:filetype plugin on
:colorscheme [schem name]
:colorscheme <C-d> 列出所有 scheme
👉 awesome vim colorscheme 可以把 scheme 檔案放在 ~/.vim/color 下擴充

48. Key mapping
介紹請查👉 :h map-overview
● 可以將按鍵對應到指令或者其他按鍵，例如：
:imap a b
● 不同模式下都可以以設定：
map nmap vmap imap
● 通常都會用 noremap 系列設定，避免循環參照

49. Key mapping - key-notation
介紹請查👉 :h key-notaion
● 例如 <CR> 代表 Enter，<Nop> 代表空，<C-*> 代表 Ctrl 加上 *
● <leader> 代表 leader key，是個擴充鍵
● 在 vimrc 用 let mapleader = "," 來設定

50. auto command
通常會搭配某個事件，自動完成某件事情
介紹請查👉 :h autocmd
介紹請查👉 :h event
例如：存擋後自動清除尾巴空白
:au[tocmd] BufWritePre * :%s/s+$//e

51. 整理 vimrc
:h vimfile Vim 會去讀取幾個預設的位置，可以用來整理我們龐大的 .vimrc

52. 整理 vimrc - 預設讀取位置
Mac 的話，在 ~/.vim/ 下，可以這樣整理你的設定檔
filetype.vim filetypes by file name |new-filetype|
scripts.vim filetypes by file contents |new-filetype-scripts|
autoload/ automatically loaded scripts |autoload-functions|
colors/ color scheme files |:colorscheme|
keymap/ key mapping files |mbyte-keymap|
lang/ menu translations |:menutrans|
pack/ packages |:packadd|
plugin/ plugin scripts |write-plugin|
… and more
🔍NOTE: neovim 的預設位置不一樣，但應該是可以無痛使用Vim 原本的路徑

53. Plugin
裝了 plugin 你的 Vim 就圓滿了
● Git 相關操作
● File browsing
● Fuzzy search
● autocompelete
and more ….

54. Plugin
三大主要的 vim plugin manager
● Pathogen
● Vundle
● vim-plug 👈 我用這個

55. Fred 五星推薦 Vim plungin ⭐⭐⭐⭐⭐
讓你的 Vim 更人模人樣
Plug 'vim-airline/vim-airline'
Plug 'vim-airline/vim-airline-themes'
Plug 'scrooloose/nerdtree'
Plug 'morhetz/gruvbox'
Plug 'ryanoasis/vim-devicons'
Plug 'jeffkreeftmeijer/vim-numbertoggle'

56. Fred 五星推薦 Vim plungin ⭐⭐⭐⭐⭐
寫 Code 必備
Plug 'tpope/vim-surround' 快速換掉括號
Plug 'tpope/vim-repeat'
Plug 'tomtom/tcomment_vim' 快速 comment
通靈需要你
Plug 'ctrlpvim/ctrlp.vim' 找檔名
👉 或 'nvim-telescope/telescope.nvim' 或 fzf
Plug 'mileszs/ack.vim' 全域搜尋
👉 我有把 grep 換成 ag

57. Fred 五星推薦 Vim plungin ⭐⭐⭐⭐⭐
Git
Plug 'Xuyuanp/nerdtree-git-plugin'
Plug 'tpope/vim-fugitive'
其他程式語言相關
Plug 'vim-ruby/vim-ruby'
Plug 'tpope/vim-rails'
Plug 'thoughtbot/vim-rspec'
Plug 'fatih/vim-go'
Plug 'pangloss/vim-javascript'
Plug 'maxmellon/vim-jsx-pretty'

58. 👀觀摩 vimrc
mosky’s vimrc
龍哥的 vimrc
ThePrimeagon
Spreered aka Fred
Thoughbot

59. 推薦學習資源
高見龍 - 即將失傳的古老技藝 Vim 本投影片參考資料之 ㄧ
ThePrimeagen youtube channel 神經病 Netflix 工程師很好笑
Mosky’s Vim tips： basic search replace
寫給 VSCode 用戶的 Vim 入坑指南

60. neovim 和 LSP
1. Why neovim?
2. what is LSP?
3. How to use lsp?