這裡是我新配置出來的 jaywcjlove/vim-web 一直在打磨中，基本上可以用了。拿出來騙 star 先上圖
安裝
最新版本的Vim 7.4+ 使用(brew install macvim)安裝，vim 版本更新 brew install macvim --override-system-vim
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
$ git clone https://github.com/jaywcjlove/vim-web.git ~/.vim $ ln -s ~/.vim/.vimrc ~/.vimrc # 上面執行完成之後 # 開始下載安裝外掛 $ vim # 在vim中執行 ":PlugInstall" # 上面外掛安裝完成之後執行下面內容 # command-t 檔案搜尋外掛安裝 $ cd ~/.vim/plugged/command-t $ rake make # 搜尋文字內容工具 # 需要安裝 CtrlSF的依賴ripgrep $ brew install ripgrep # 程式碼提示外掛也需要你執行安裝哦，不然沒有效果嘞 cd ~/.vim/plugged/YouCompleteMe ./install.sh # 需要安裝ctags 不然配置沒效果哦 # ctags for Mac $ brew install ctags # ctags for Centos7 $ yum install ctags |
注： 預設已經安裝了前端必備外掛。.vimrc 是控制 vim 行為的配置檔案，位於 ~/.vimrc，不論 vim 視窗外觀、顯示字型，還是操作方式、快捷鍵、外掛屬性均可通過編輯該配置檔案將 vim 調教成最適合你的編輯器。
檢視配置位置
|
1 2 |
# 進入vim輸入下面字元 :echo $MYVIMRC |
外掛管理
這裡面剛開始使用的Vim外掛管理工具VundleVim/Vundle.vim，後面為了大家安裝方便，使用了 junegunn/vim-plug，這個外掛管理工具，俺十分不喜歡，多了個 autoload 目錄，安裝過程也奇醜無比，安裝快速，所以就使用它吧，下面命令更新安裝的 plug.vim，預設已經有了不需要這一步。
|
1 2 |
curl -fLo ~/.vim/autoload/plug.vim --create-dirs \ https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim |
安裝外掛
將配置資訊其加入 ~/.vim/.vimrc 中的call plug#begin() 和 call plug#end() 之間，最後進入 vim 輸入下面命令，摁 enter 進行安裝。
|
1 |
:PlugInstall |
更新外掛
外掛更新頻率較高，差不多每隔一個月你應該看看哪些外掛有推出新版本，批量更新，只需在 vim 中執行下面命令即可。
|
1 |
:PlugUpdate |
解除安裝外掛
先在 .vimrc 中註釋或者刪除對應外掛配置資訊，然後在 vim 中執行下面命令，即可刪除對應外掛。
|
1 |
:PlugClean |
啟動Vim
|
1 |
$ vim |
常用快捷鍵
這裡的快捷鍵是我配置好的可用的。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
;fl # 換出選單列表 nw # 視窗切換 ;lw # 跳轉至右方的視窗 ;hw # 跳轉至左方的視窗 ;kw # 跳轉至上方的子視窗 ;jw # 跳轉至下方的子視窗 # 可以直接在Tab之間切換。 gt # 後一個Tab標籤 gT # 前一個Tab標籤 ;q # 關閉一個標籤 ctrl-f # 下一頁 f 就是`forword` ctrl-b # 上一頁 b 就是`backward` ;t # 通過搜尋檔案開啟檔案 # 快速文字內定位 ;;b # 游標前程式碼定位 ;;e # 游標後程式碼定位 ;;f # 游標後程式碼定位 <搜尋自負> 出現定位資訊 ;;F # 游標前程式碼定位 <搜尋自負> 出現定位資訊 ;ilt # 設定顯示／隱藏標籤列表子視窗(函式列表)的快捷鍵。速記：identifier list by tag 0 # 行首 $ # 行尾 :r ~/git/R.js # 將檔案內容匯入到該檔案中 :!which ls # 找命令不推出vim執行命令 :!date # 檢視編輯時間 :r !date # 將當前編輯時間匯入當前文字游標所在行 U # 選中 - 變大寫 u # 選中 - 變小寫 ~ # 選中 - 變大寫變小寫，小寫變大寫 ;cc # 程式碼註釋"//" ;cm # 程式碼段落註釋"/**/" ;ci # 註釋相反，註釋的取消註釋，沒註釋的註釋 ;cs # 段落註釋，註釋每行前面加"*" ;c$ # 游標開始到行結束的位置註釋 ;cA # 在行尾部新增註釋符"//" ;cu # 取消程式碼註釋 za # 單個程式碼摺疊 zM # 摺疊左右程式碼 zR # 所有程式碼摺疊取消 ;i # 開/關縮排視覺化 > # 程式碼鎖進 - 選中摁尖括號 < # 程式碼鎖進 - 選中摁尖括號 :1,24s/header/www/g # 第1到24行將header替換成www <c-z> # 退出Vim |
基礎使用
inoremap(Insert Mode)就只在插入(insert)模式下生效vnoremap(Visual Mode)只在visual模式下生效nnoremap(Normal Mode)就在normal模式下(狂按esc後的模式)生效- 快捷鍵
<c-y>,標示(Ctrly,)
快捷鍵萬用字元
快捷鍵萬用字元 <leader> 相當於是一個通用的命令符，預設好像是\，你可以在.vimrc中將他改為任意一個按鍵，在我們這個配置我改為了冒號;
|
1 2 |
" 定義快捷鍵的字首，即 <Leader> let mapleader=";" |
插入命令
|
1 2 3 4 5 6 |
a # → 在游標所在字元後插入 A # → 在游標所在字元尾插入 i # → 在游標所在字元前插入 I # → 在游標所在行行首插入 o # → 在游標下插入新行 O # → 在游標上插入新行 |
刪除命令
|
1 2 3 4 5 6 7 |
x # → 刪除關閉所在處字元 nx # → 刪除關閉所在處n個字元 dd # → 刪除游標所在行， ndd # → 刪除n行 dG # → 刪除游標所在行到檔案末尾內容 D # → 刪除游標所在處到行尾內容 :n1,n2d # → 刪除指定範圍的行 如：1,2d |
定位命令
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
:set number #→ 設定行號 簡寫set nu :set nonu #→ 取消行號 gg #→ 到第一行 G #→ 到最後一行 nG #→ 到第n行 :n #→ 到第n行 S #→ 移至行尾 0 #→ 移至行尾 hjkl #→ 前下上後 w #→ 到下一個單詞的開頭 b #→ 與w相反 e #→ 到下一個單詞的結尾。 ge #→ 與e相反 0 #→ 到行頭 ^ #→ 到本行的第一個非blank字元 $ #→ 到行尾 g_ #→ 到本行最後一個不是blank字元的位置。 fa #→ 到下一個為a的字元處，你也可以fs到下一個為s的字元。 t, #→ 到逗號前的第一個字元。逗號可以變成其它字元。 3fa #→ 在當前行查詢第三個出現的a。 F 和 T → 和 f 和 t 一樣，只不過是相反方向。 zz # 將當前行置於螢幕中間（不是轉載…） zt # 將當前行置於螢幕頂端（不是豬頭~） zb # 底端啦~ |
複製剪下
yy和 p 的組合鍵，或者dd和 p 的組合鍵
|
1 2 3 4 5 6 7 |
yy # → 複製當前行 nyy # → 複製當前行以下n行 dd # → 剪下當前行 ndd # → 剪下當前行以下n 行 p、P # → 貼上在當前游標所在行或行上 2dd # → 刪除2行 3p # → 貼上文字3次 |
簡單排版
|
1 2 3 4 5 6 7 8 9 10 |
:ce(nter) # 居中顯示游標所在行 :ri(ght) # 靠右顯示游標所在行 :le(ft) # 靠左顯示游標所在行 J # 將游標所在下一行合併到游標所在行 >> # 游標所在行增加縮排(一個tab) << # 游標所在行減少縮排(一個tab) n>> # 游標所在行開始的n行增加縮排 n<< # 游標所在行開始的n行減少縮排 |
儲存退出
|
1 2 3 4 5 6 |
:w new_filename # → 儲存為指定檔案 :w # → 儲存修改 :wq # → 儲存修改並推出 ZZ # → 快捷鍵，儲存修改並推出 :q! # → 不儲存修改推出 :wq! # → 儲存修改並推出（檔案所有者，root許可權的使用者） |
整頁翻頁
|
1 2 |
ctrl-f # 下一頁 f 就是`forword` ctrl-b # 上一頁 b 就是`backward` |
替換
替換取消
|
1 2 3 4 |
r # → 取代關閉所在處字元 R # → 從游標所在處開始替換字元，摁ESC結束 u # → 取消上一步操作 ctrl + r # → 返回上一步 |
快捷替換
視覺化模式下選中其中一個，接著鍵入 ctrl-n，你會發現第二個該字串也被選中了，持續鍵入 ctrl-n，你可以選中所有相同的字串，把這個功能與 ctrlsf 結合
精確替換
vim 有強大的內容替換命令，進行內容替換操作時，注意：如何指定替換檔案範圍、是否整詞匹配、是否逐一確認後再替換。
|
1 |
:[range]s/{pattern}/{string}/[flags] |
- 如果在當前檔案內替換，[range] 不用指定，預設就在當前檔案內；
- 如果在當前選中區域，[range] 也不用指定，在你鍵入替換命令時，vim 自動將生成如下命令：
:'<,'>s/{pattern}/{string}/[flags] - 你也可以指定行範圍，如，第三行到第五行：
:3,5s/{pattern}/{string}/[flags] - 如果對開啟檔案進行替換，你需要先通過
:bufdo命令顯式告知 vim 範圍，再執行替換； - 如果對工程內所有檔案進行替換，先
:args **/.cpp */*.h告知 vim 範圍，再執行替換；
:21,27s/^/#/g 行首替換#替換（增加）掉
:ab mymail asdf@qq.com 輸入mymail 摁下空格自動替換成asdf@qq.com
開關注釋
;cc，註釋當前選中文字，如果選中的是整行則在每行首新增//，如果選中一行的部分內容則在選中部分前後新增分別/**/；;cu，取消選中文字塊的註釋。
工程檔案選單
自定義快捷鍵
|
1 |
;fl # 顯示檔案選單 file list |
自帶快捷鍵
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
shift+i # 顯示/隱藏隱藏檔案 t # 在新 Tab 中開啟選中檔案/書籤，並跳到新 Tab T # 在新 Tab 中開啟選中檔案/書籤，但不跳到新 Tab i # split 一個新視窗開啟選中檔案，並跳到該視窗 gi # split 一個新視窗開啟選中檔案，但不跳到該視窗 s # vsplit 一個新視窗開啟選中檔案，並跳到該視窗 gs # vsplit 一個新 視窗開啟選中檔案，但不跳到該視窗 ctrl + w + h # 游標 focus 左側樹形目錄 ctrl + w + l # 游標 focus 右側檔案顯示視窗 ctrl + w + w # 游標自動在左右側視窗切換 ctrl + w + r # 移動當前視窗的佈局位置 o # 在已有視窗中開啟檔案、目錄或書籤，並跳到該視窗 go # 在已有視窗 中開啟檔案、目錄或書籤，但不跳到該視窗 ! # 執行當前檔案 O # 遞迴開啟選中 結點下的所有目錄 x # 合攏選中結點的父目錄 X # 遞迴 合攏選中結點下的所有目錄 e # Edit the current dif 雙擊 相當於 NERDTree-o 中鍵 對檔案相當於 NERDTree-i，對目錄相當於 NERDTree-e D # 刪除當前書籤 # P # 跳到根結點 p # 跳到父結點 K # 跳到當前目錄下同級的第一個結點 J # 跳到當前目錄下同級的最後一個結點 k # 跳到當前目錄下同級的前一個結點 j # 跳到當前目錄下同級的後一個結點 C # 將選中目錄或選中檔案的父目錄設為根結點 u # 將當前根結點的父目錄設為根目錄，並變成合攏原根結點 U # 將當前根結點的父目錄設為根目錄，但保持展開原根結點 r # 遞迴重新整理選中目錄 R # 遞迴重新整理根結點 m # 顯示檔案系統選單 cd # 將 CWD 設為選中目錄 I # 切換是否顯示隱藏檔案 f # 切換是否使用檔案過濾器 F # 切換是否顯示檔案 B # 切換是否顯示書籤 # q # 關閉 NerdTree 視窗 ? # 切換是否顯示 Quick Help |
切割視窗
|
1 2 3 |
:new # 水平切割視窗 :split # 水平切割視窗(或者直接輸入 :sp 也可以) :vsplit # 垂直切割( 也可以 :vs ) |
Tab操作
多tab視窗拆分
|
1 2 3 4 5 6 |
:tabnew [++opt選項] ［＋cmd］ 檔案 #建立對指定檔案新的tab :tabc #關閉當前的tab :tabo #關閉所有其他的tab :tabs #檢視所有開啟的tab :tabp #前一個 :tabn #後一個 |
tab切換
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
# 下面為自定義快捷鍵 tnew #新建tab tn #後一個 tab tp #前一個 tab # 視窗切換 nw # 標準模式下： gt , gT #可以直接在tab之間切換。 # 還有很多他命令， 看官大人自己， :help table 吧。 Ctrl+ww # 移動到下一個視窗 # 或者 先按組合鍵ctrl+w ，然後都鬆開，然後通過j/k/h/l(等於vim移動的方向鍵) 來移動大哦哦左/上/下/右的視窗 Ctrl+wj #移動到下方的視窗 Ctrl+wk #移動到上方的視窗 |
HTML操作
便捷操作得益於外掛Emmet.vim。鍵入 div>p#foo$*3>a 然後按快捷鍵 <c-y>, – 表示 <Ctrl-y> 後再按逗號【Ctrly,】。
按大寫的 V 進入 Vim 可視模式，行選取上面三行內容，然後按鍵 <c-y>,，這時 Vim 的命令列會提示 Tags:，鍵入ul>li*，然後按 Enter。
<ctrl+y>d 根據游標位置選中整個標籤
<ctrl+y>D 根據游標位置選中整個標籤內容
<ctrl-y>n 跳轉到下一個編輯點
<ctrl-y>N 跳轉到上一個編輯點
<ctrl-y>i 更新圖片大小
<ctrl-y>m 合併成一行
<ctrl-y>k 移除標籤對
<ctrl-y>j 分割/合併標籤
<ctrl-y>/ 切換註釋
<ctrl-y>a 從 URL 地址生成錨
<ctrl-y>A 從 URL 地址生成引用文字
搜尋查詢
檔案搜尋
搜尋有兩個外掛可以使用 wincent/command-t 和 junegunn/fzf，fzf沒有下載下來，這裡在使用 command-t ，使用的時候記得，進入目錄 cd ~/.vim/plugged/command-t 執行 rake make。
|
1 |
;t # 啟動搜尋檔案 |
搜尋文字內容
dyng/ctrlsf.vim，在外掛完成安裝之後，需要安裝另外的工具，才能執行
|
1 2 3 4 5 6 7 8 9 10 11 |
brew install ripgrep # 上面安裝好了之後，在.vimrc中配置下面內容 # 快捷鍵速記法：search in project let g:ctrlsf_ackprg = 'rg' # 設定快捷鍵 nnoremap <Leader>sp :CtrlSF<CR> # 選中搜尋 - 文字中選中關鍵字 vmap <Leader>sp <Plug>CtrlSFVwordPath # 選中搜尋 - 結果列表 vmap <Leader>sl <Plug>CtrlSFQuickfixVwordPath |
基本使用方法
|
1 2 3 4 |
:CtrlSF pattern dir # 如果後面不帶 dir 則預設是 . 當前目錄搜尋 # 使用 j k h l 瀏覽CtrlSP視窗 使用 Ctrl + j/k 在匹配項中跳轉。 # 使用 q 則退出 CtrlSP視窗 # 使用 p |
快速移動
Lokaltog/vim-easymotion 把滿足條件的位置用 [;A~Za~z] 間的標籤字元標出來，找到你想去的位置再鍵入對應標籤字元即可快速到達。
|
1 2 3 4 |
;;b # 游標前程式碼定位 ;;e # 游標後程式碼定位 ;;f # 游標後程式碼定位 <搜尋自負> 出現定位資訊 ;;F # 游標前程式碼定位 <搜尋自負> 出現定位資訊 |
外掛說明
這裡面所有的外掛，並不是都放到了我的 .vimrc 檔案中 .vimrc 配置檔案中，是我個人喜歡並且習慣的配置。
外掛管理工具
主題風格
- vim-colors-solarized 主題風格素雅 solarized
- molokai 主題風格多彩 molokai
- phd 主題風格復古 phd
使用介面
- Mango A nice color scheme
- VimAirline 美化狀態列偏好設定
- vim-powerline 美化狀態列
- vim-airline 美化狀態列和配置
- vim-airline-themes airline主題
管理專案
- NERDTree Manage your project files
- VimFugitive Git 整合
- VimGitGutter Git 整合，強烈推薦！
- EditorconfigVim Shared coding conventions
- command-t 檔案搜尋
- vim-signature 書籤視覺化的外掛
- BOOKMARKS–Mark-and-Highlight-Full-Lines 它可以讓書籤行高亮
- tagbar 方法地圖導航
- indexer.tar.gz 自動生成標籤並引入
- DfrankUtil 上面外掛，依賴這個外掛
- vimprj 上面外掛，依賴這個外掛
- ctrlsf.vim 上下文外掛，例如搜素到關鍵字，中間縮略，展示一段上下文
- vim-multiple-cursors 多游標編輯功能
程式碼書寫
- NERDCommenter 註釋更容易
- DrawIt ASCII art 風格的註釋
- VimTrailingWhitespace 突出尾隨空格
- Syntastic 語法檢查
- VimEasyAlign 調整部分程式碼
- VimMultipleCursors Write on multiple lines easily
- VimJsBeautify Reformat JavaScript, HTML and JSON files
- VimYankStack Iterate over yanked stack on paste
- VimSurround Quoting and parenthesizing
- YouCompleteMe 鍵而全的、支援模糊搜尋的、高速補全的外掛
- VimForTern Smart JavaScript autocompletion
- VimNode Navigate through node.js code/modules
- VimLint Linter used by syntastic for VimL
- VimLParser VimL parser (required by VimLint)
- emmet-vim 提高HTML和CSS的工作流
- vim-cpp-enhanced-highlight C++ 語法高亮支援
- vim-indent-guides 相同縮排的程式碼關聯起來
- vim-fswitch 介面檔案（MyClass.h）與實現檔案（MyClass.cpp）快捷切換的外掛
- MiniBufExplorer 顯示多個 buffer 對應的 window
- wildfire.vim 快捷鍵選中
<>、[]、{}中間的內容 - gundo.vim 讓你有機會撤銷最近一步或多步操作
- vim-easymotion 快速移動，兩次
<leader>作為字首鍵 - Shougo/neocomplete.vim 強大的自動補全外掛
- vim-instant-markdown 編輯 markdown 文件，自動開啟 firefox 為你顯示 markdown 最終效果
- fcitx.vim 中/英輸入平滑切換
- othree/xml.vim 中/提供快速編寫xml/html的能力，如標籤自動閉合等
- pangloss/vim-javascript 提供js程式碼的智慧縮排，僅使用了他的indent功能
程式碼閱讀
- 語法高亮
- vim-polyglot 支援常見的語法高亮
- VimJson JSON 高亮和隱藏引號
- YaJS JavaScript 語法 (ES5 and ES6)
- vim-css3-syntax CSS3 高亮，包括stylus,Less,Sass
- vim-css-color css高亮顏色
- gko/vim-coloresque css高亮顏色
- ScssSyntax SCSS syntax
- HTML5 HTML5 syntax
- Stylus Stylus 程式碼高亮
- JavaScriptLibrariesSyntax 語法高亮的知名的JS庫
- ultisnips 模板補全外掛
- vim-protodef 根據類宣告自動生成類實現的程式碼框架