一個前端開發工程師的Vim跟IDE一樣

分類：技術 時間:2017-01-13

這里是我新配置出來的 jaywcjlove/vim-web 一直在打磨中，基本上可以用了。拿出來騙 star 先上圖

安裝

最新版本的Vim 7.4 使用( brew install macvim )安裝，vim 版本更新 brew install macvim --override-system-vim 

$ git clone https://github.com/jaywcjlove/vim-web.git ~/.vim
$ ln -s ~/.vim/.vimrc ~/.vimrc

注：默認已經安裝了前端必備插件。 .vimrc 是控制 vim 行為的配置文件，位于 ~/.vimrc，不論 vim 窗口外觀、顯示字體，還是操作方式、快捷鍵、插件屬性均可通過編輯該配置文件將 vim 調教成最適合你的編輯器。

插件管理

這里面使用的Vim插件管理工具 VundleVim/Vundle.vim

安裝插件

將配置信息其加入 ~/.vim/.vimrc 中的 call vundle#begin() 和 call vundle#end() 之間，最后進入 vim 輸入下面命令，摁 enter 進行安裝。 

:PluginInstall

更新插件

插件更新頻率較高，差不多每隔一個月你應該看看哪些插件有推出新版本，批量更新，只需在 vim 中執行下面命令即可。

:PluginUpdate

卸載插件

先在 .vimrc 中注釋或者刪除對應插件配置信息，然后在 vim 中執行下面命令，即可刪除對應插件。

:PluginClean

啟動Vim

$ vim

常用快捷鍵

這里的快捷鍵是我配置好的可用的。

;fl # 換出菜單列表
nw  # 窗口切換
;lw # 跳轉至右方的窗口
;hw # 跳轉至左方的窗口
;kw # 跳轉至上方的子窗口
;jw # 跳轉至下方的子窗口


# 可以直接在Tab之間切換。
gt # 后一個Tab標簽
gT # 前一個Tab標簽
;q # 關閉一個標簽

ctrl-f # 下一頁 f 就是`forword` 
ctrl-b # 上一頁 b 就是`backward`  

;t # 通過搜索文件打開文件

# 高科技定位
;;b # 光標前代碼定位
;;e # 光標后代碼定位
;;f # 光標后代碼定位 lt;搜索自負gt; 出現定位信息
;;F # 光標前代碼定位 lt;搜索自負gt; 出現定位信息

0   # 行首
$   # 行尾

:r ~/git/R.js # 將文件內容導入到該文件中
:!which ls  # 找命令不推出vim運行命令
:!date      # 查看編輯時間
:r !date    # 將當前編輯時間導入當前文本光標所在行

U # 選中 - 變大寫 
u # 選中 - 變小寫
~ # 選中 - 變大寫變小寫，小寫變大寫

;cc # 代碼注釋quot;//quot;
;cm # 代碼段落注釋quot;/**/quot;
;ci # 注釋相反，注釋的取消注釋，沒注釋的注釋
;cs # 段落注釋，注釋每行前面加quot;*quot;
;c$ # 光標開始到行結束的位置注釋
;cA # 在行尾部添加注釋符quot;//quot;
;cu # 取消代碼注釋

za # 單個代碼折疊
zM # 折疊左右代碼
zR # 所有代碼折疊取消

;i  # 開/關縮進可視化
gt;   # 代碼鎖進 - 選中摁尖括號
lt;   # 代碼鎖進 - 選中摁尖括號

:1,24s/header/www/g  # 第1到24行將header替換成www

lt;c-zgt;  # 退出Vim

基礎使用

  • inoremap (Insert Mode)就只在插入(insert)模式下生效

  • vnoremap (Visual Mode)只在visual模式下生效

  • nnoremap (Normal Mode)就在normal模式下(狂按esc后的模式)生效

  • 快捷鍵 lt;c-ygt;, 標示( Ctrl y , )

快捷鍵通配符

快捷鍵通配符 lt;leadergt; 相當于是一個通用的命令符，默認好像是 \ ，你可以在 .vimrc 中將他改為任意一個按鍵，在我們這個配置我改為了冒號 ; 

quot; 定義快捷鍵的前綴，即 lt;Leadergt;
let mapleader=quot;;quot;

插入命令

a # → 在光標所在字符后插入  
A # → 在光標所在字符尾插入  
i # → 在光標所在字符前插入  
I # → 在光標所在行行首插入  
o # → 在光標下插入新行  
O # → 在光標上插入新行

刪除命令

x   # → 刪除關閉所在處字符  
nx  # → 刪除關閉所在處n個字符  
dd  # → 刪除光標所在行，
ndd # → 刪除n行  
dG  # → 刪除光標所在行到文件末尾內容  
D   # → 刪除光標所在處到行尾內容  
:n1,n2d # → 刪除指定范圍的行 如：1,2d

定位命令

: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 的組合鍵 

yy    # → 復制當前行  
nyy   # → 復制當前行以下n行  
dd    # → 剪切當前行  
ndd   # → 剪切當前行以下n 行  
p、P  # → 粘貼在當前光標所在行或行上  
2dd   # → 刪除2行  
3p    # → 粘貼文本3次

簡單排版

:ce(nter)  # 居中顯示光標所在行
:ri(ght)   # 靠右顯示光標所在行
:le(ft)    # 靠左顯示光標所在行
J          # 將光標所在下一行合并到光標所在行

gt;gt;         # 光標所在行增加縮進(一個tab)
lt;lt;         # 光標所在行減少縮進(一個tab)

ngt;gt;        # 光標所在行開始的n行增加縮進
nlt;lt;        # 光標所在行開始的n行減少縮進

保存退出

:w new_filename     # → 保存為指定文件  
:w   # → 保存修改  
:wq  # → 保存修改并推出  
ZZ   # → 快捷鍵，保存修改并推出  
:q!  # → 不保存修改推出  
:wq! # → 保存修改并推出（文件所有者，root權限的用戶）

整頁翻頁

ctrl-f # 下一頁 f 就是`forword` 
ctrl-b # 上一頁 b 就是`backward`

替換

替換取消

r # → 取代關閉所在處字符  
R # → 從光標所在處開始替換字符，摁ESC結束  
u # → 取消上一步操作  
ctrl   r # → 返回上一步

快捷替換

可視化模式下選中其中一個，接著鍵入 ctrl-n，你會發現第二個該字符串也被選中了，持續鍵入 ctrl-n，你可以選中所有相同的字符串，把這個功能與 ctrlsf 結合

精確替換

vim 有強大的內容替換命令，進行內容替換操作時，注意：如何指定替換文件范圍、是否整詞匹配、是否逐一確認后再替換。

:[range]s/{pattern}/{string}/[flags]

  • 如果在當前文件內替換，[range] 不用指定，默認就在當前文件內；

  • 如果在當前選中區域，[range] 也不用指定，在你鍵入替換命令時，vim 自動將生成如下命令： :'lt;,'gt;s/{pattern}/{string}/[flags]

  • 你也可以指定行范圍，如，第三行到第五行： :3,5s/{pattern}/{string}/[flags]

  • 如果對打開文件進行替換，你需要先通過 :bufdo 命令顯式告知 vim 范圍，再執行替換；

  • 如果對工程內所有文件進行替換，先 :args **/.cpp */*.h 告知 vim 范圍，再執行替換；

:21,27s/^/#/g 行首替換 # 替換（增加）掉

:ab mymail [email protected] 輸入 mymail 摁下空格自動替換成 [email protected]

開關注釋

  • ;cc ，注釋當前選中文本，如果選中的是整行則在每行首添加 // ，如果選中一行的部分內容則在選中部分前后添加分別 /**/ ；

  • ;cu ，取消選中文本塊的注釋。

工程文件菜單

自定義快捷鍵

;fl          # 顯示文件菜單 file list

自帶快捷鍵

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

切割窗口

:new      # 水平切割窗口
:split    # 水平切割窗口(或者直接輸入   :sp  也可以)
:vsplit   # 垂直切割( 也可以  :vs  )

Tab操作

多tab窗口拆分

:tabnew [  opt選項] ［＋cmd］ 文件            #建立對指定文件新的tab
:tabc      #關閉當前的tab
:tabo      #關閉所有其他的tab
:tabs      #查看所有打開的tab
:tabp      #前一個
:tabn      #后一個

tab切換

# 下面為自定義快捷鍵
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 。鍵入 divgt;p#foo$*3gt;a 然后按快捷鍵 lt;c-ygt;, – 表示 lt;Ctrl-ygt; 后再按逗號【 Ctrl y , 】。

按大寫的 V 進入 Vim 可視模式，行選取上面三行內容，然后按鍵 lt;c-ygt;,，這時 Vim 的命令行會提示 Tags:，鍵入ulgt;li*，然后按 Enter。

lt;ctrl ygt;d 根據光標位置選中整個標簽

lt;ctrl ygt;D 根據光標位置選中整個標簽內容

lt;ctrl-ygt;n 跳轉到下一個編輯點

lt;ctrl-ygt;N 跳轉到上一個編輯點

lt;ctrl-ygt;i 更新圖片大小

lt;ctrl-ygt;m 合并成一行

lt;ctrl-ygt;k 移除標簽對

lt;ctrl-ygt;j 分割/合并標簽

lt;ctrl-ygt;/ 切換注釋

lt;ctrl-ygt;a 從 URL 地址生成錨

lt;ctrl-ygt;A 從 URL 地址生成引用文本

插件說明

這里面所有的插件，并不是都放到了我的 .vimrc 文件中 .vimrc 配置文件中，是我個人喜歡并且習慣的配置。

主題風格

使用界面

管理項目

代碼書寫

代碼閱讀

參考資料


Tags: Vim 前端開發 開發工具

文章來源：https://segmentfault.com/a/1190000008097357

ads
ads
相關文章
ads

相關文章

ad