高見龍

iOS app/Ruby/Rails Developer & Instructor, 喜愛非主流的新玩具 :)

爽爽快快學Vim(3) - Vim Plugins

這一集我來分享一下我自己常在用的 Plugin

內嵌進來的影片可能有點小、有點不清楚,建議直接到Youtube並切換至 HD 畫質觀看。另外也傳了一份到 Vimeo 以及 youku

Plugins

vim-pathogen

好用的 Vim 的套件管理工具。通常 plugin 下載回來之後開一個資料夾整個丟進去就行了,一個 plugin 就放一個資料夾,如果不要的時候就該資料砍掉就行了

vim-powerline

華麗的狀態列

SelectColors

c9s 大大寫的方便小工具 只要執行:SelectColors即可呼叫出快速切換 color scheme 的小分割視窗

snipmate

只要只幾個字母再按下 tab 就可以快速產生 snippets,如果覺得不夠或是有自己慣用的 snippets 也可以自己加

vim-css-color

直接在 Vim 裡顯示 CSS 色碼所代表的顏色

surround

文字編輯的好幫手!

  • 進到visual mode並選取文字後 S 把選取文字加上雙引號
  • cs = 把週圍的雙引號換成單引號
  • cs]) = 把週圍的方括號換成小括號
  • ds = 刪除週圍的雙引號
  • cst = 刪除週圍的tag
  • yss = 把整行加上雙引號
  • yss( = 把整行加上小括號,但小括號與內容會有空格存在
  • yss) = 同上,但不會有空格
  • yss{ = 把整行加上大括號,但大括號與內容會有空格存在
  • yss} = 同上,但不會有空格

vim-indent-object

如果你寫的程式語言是用大括號把程式碼包起來的,你只要按vi{就可以把大括號裡的東西全部選起來。但如果遇到像ruby或python這種不需要大括號的,就可以用得上它。

  • vii 選取相同縮排層級的文字
  • vai 同上,但會連帶上一層級也一併選取

vim-matchit

% 不只可以配對基本的語法,連html的tag也可以比對

vim-ragtag

  • CtrlxEnter = 產生對應的tag,而且中間會加上斷行
  • CtrlxSpace = 同上,但不會加上斷行

NERDtree

樹狀目錄結構列表,讓你可以在檔案跟資料夾中切換

ctrlp

快速找到檔案的好幫手

  • Ctrlp 啟動
  • Ctrlg 關閉
  • 在啟動中按Ctrlf 可換切搜尋模式(共有 File、Buffer 以及 MRU 三種)

vim-wiki

用 Vim 來寫筆記(wiki)

小結

以上,所有的 plugin 在我的 github 上的 vimrc 設定裡應該都找得到。其實我用的 plugin 並不多,使用上大多還是以 Vim 內建的基本操作為主。如果有哪邊有錯的再請前輩、先進不吝指教

預告

眼尖的人可能會發現上面列的都沒有 Ruby 或 Rails 相關的 plugin。是的這些相關的 plugin 都會留到下一集,所以下一集會來分享一下怎麼利用 Vim 在 Ruby/Rails 裡做開發的,還請稍稍期待一下 :)

Happy Programming with Coffeescript

不得不說 JSDC 的主辦單位超用心,還有幫講者加中文字幕:

這是我自己用電腦螢幕錄的:

這是今天我在台灣第一屆的 JavaScript 開發者大會JSDC上用到的投影片。雖然主題跟在去年的 PHPConf Taiwan 的一樣,但因為這回的聽眾可都是熟悉 JavaScript 的,依舊沒辦法用同一招繼續騙吃騙喝(同一招不能對聖鬥士用兩次),加上時間也只有 30 分鐘,所以投影片又幾乎整個敲掉重做。 image View on Speaker Deck | View on Slideshare | Download PDF

原以為 30 分鐘講一百多張投影片會講不完結果就一直衝,衝到最後發現我竟然 20 分鐘就講完了,希望大家還喜歡,有什麼問題,也歡迎諸位前輩先進不吝給予建議,感謝!

爽爽快快學Vim(2)

建議直接到 Youtube 並切換至 HD 畫質觀看。另外也傳了一份到 Vimeo 以及 youku

Vim plugin for other Apps

檔案開啟

vi -o a.rb b.rb 以水平分割視窗同時開啟檔案。

vi -O a.rb b.rb 以垂直分割視窗同時開啟檔案。

vi -p a.rb b.rb 以 tab 視窗同時開啟檔案。

vi http://www.eddie.com.tw 可直接開啟網址並將網頁原始碼讀進 Vim 編輯器。

編輯

部份在 shell 指令在 insert mode也適用,例如CtrlwCtrlu

r 取代目前游標所在字元,R 連續取代。

J 組合游標所在的這行與下一行, 3J 將連續3行都組合起來。

Ctrlv 進入 visual block 模式。

視窗

:new 新增一個水平分割視窗, :vnew 新增一個垂直分割視窗。

Ctrlw hjkl 可在分割視窗間切換。

:bp 上一個已經開啟的檔案,:bn 下一個已經開啟的檔案。

:ls 查看目前 buffer 裡有哪些檔案。

:bd 關閉一個已經開啟的 buffer。

:b3 切換至在 buffer 裡編號為 3 號的檔案。

:b test.rb 切換至在 buffer 裡檔名為 test.rb 的檔案。

:tab ba 可將開啟的 buffer 轉以 tab 展開。

小結

咬字跟口條還是像在含魯蛋,有待加強。下一集將會跟大家分享一些我自己工作上有在用的 vim plugin,以及簡單的說明 vimrc 裡的一些設定。另外,如果內容有哪邊講錯的,還請先進、前輩們不吝指導 :)

爽爽快快學Vim(1)

建議直接到 youtube 並切換至 HD 畫質觀看。另外也傳了一份到 vimeo 以及 youku

影片內提到的相關連結:

shell指令

Ctrll: 清除畫面

Ctrlw: 一次刪除一個字(word)

Ctrlu: 刪除一整行

Ctrlr: 搜尋 history

Vim

mode 切換

ia 進入insert mode, i = insert, a = append

在insert mode按下 EscCtrl+[ 回到normal mode

在normal mode按下 vV 進入到visual mode

在visual mode按下 EscCtrl+[ 回到normal mode

游標移動

h j k l 移動游標

wW 往後跳一個字(word), bB 往前跳一個字(word)。

0 將游標跳回行首, $ 則是跳至行尾。

f 會找到該行的下一個雙引號,fx 會找到該行下一個英文字母"x",以此類推;大寫 F 則是反向。

t 會找到該行的下一個雙引號的前一個位置,tx 會找到該行下一個英文字母"x"的前一個位置,以此類推;大寫 T 則是反向。

{ 往上一個段落移動;} 往下一個段落移動

vit 選取目前游標所在的這個標籤(tag),例如<div>hello</div>則會選取hellovat 則會連帶標籤一起選取,例如<div>hello</div>則會選取<div>hello</div>

vi 選取目前游標所在的這個雙引號內的內容,例如"hello world"則會選取hello worldva 則會連雙引號一起選取。其中雙引號也可以替換成單引號、小括號等符號,功能一樣是選取該符號內的文字。

viw 選取目前游標所在的這個字(word)。

gg 游標跳至整個檔案的第一行;G 游標跳至檔案的最後一行

zt 將目前游標所在位置的內容拉至螢幕的上方;zb 將目前游標所在位置的內容拉至螢幕的下方;zz 將目前游標所在位置的內容拉至螢幕的正中間;

/ 搜尋,搜尋到結果後n可跳至下一個;N可跳至上個。

* 直接搜尋符合游標所在的字(word)

編輯

i 進入insert mode,I 游標直接跳至行首,並進入insert mode

a 進入insert mode,A 游標直接跳至行末,並進入insert mode

D 刪除游標所在位置之後的所有內容

C 同上,並直接進入insert mode

x 刪除一個字元

. 重複上一個動作

dd 刪除一整行

3dd 刪除3行

yy 複製游標所在位置的一整行

3yy 從游標處往下複製3行,包含游標所在的那一行

p 貼上內容;4p 從目前游標的所在處貼上內容4次

= 格式整理,gg=G 整份文件格式自動整理

dwdiw 刪除游標所在的那一個字(word)

cwciw 刪除游標所在的一個字(word)並直接進入insert mode

> 增加縮排;< 減少縮排

常用命令

:w 寫入檔案

:q 離開Vim,若加上!則為強制離開

:tabe 開新tab

gt 切換至下一個tab;gT 切換至上一個tab。(在我的vimrc裡有分別對應到F7跟F8鍵)

:new 新增水平分割視窗;:vnew 新增垂直分割視窗。

其它

Ctrlz 把vim放至背景工作;fg指令則是將vim從背景工作撿回來。

如果沒有意外或被其它工作中斷,應該可以繼續錄下去。發音的部份感覺咬字像含顆魯蛋一樣,無意義的贅字還是很多,有待加強。內容有不對的地方,再請不吝前輩們給予指教。

推薦閱讀