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

時間  2019-11-05
標籤 一個 前端 開發 工程師 vim ide 同樣 欄目 Unix 简体版
原文   原文鏈接

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

圖片描述

安裝

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

查看配置位置

# 進入vim輸入下面字符
:echo $MYVIMRC

下載vim-web

將插件以及配置下載到 ~/.vim/ 目錄中，這個目錄是存放全部插件和配置的地方。vimscript是vim本身的一套腳本語言，經過這種腳本語言能夠實現與 vim 交互，達到功能擴展的目的。一組 vimscript 就是一個 vim 插件，vim 的不少功能都由各式插件實現。html

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

下載安裝插件

安裝~/.vimrc 中配置的插件，這個過程須要很長時間。前端

# 上面執行完成以後
# 開始下載安裝插件
$ vim # 在vim中運行 ":PlugInstall"

安裝依賴

部分插件須要安裝一些軟件，vim的部分插件才起做用。html5

# 上面插件安裝完成以後執行下面內容
# command-t 文件搜索插件安裝
$ cd ~/.vim/plugged/command-t 
$ rake make

# 搜索文本內容工具
# 須要安裝 CtrlSF的依賴ripgrep
$ brew install ripgrep

# 代碼提示插件也須要你運行安裝哦，否則沒有效果嘞
$ cd ~/.vim/plugged/YouCompleteMe
$ ./install.py
# or 新版腳本過期了，推薦上面腳本
$ ./install.sh 

# 須要安裝ctags 否則配置沒效果哦
# ctags for Mac
$ brew install ctags
# ctags for Centos7
$ yum install ctags

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

界面字體設置node

vim-powerline狀態欄主題，界面箭頭須要安裝Powerline字體 （在我Mac上安裝的是Sauce Code Powerline字體），下載安裝完成以後，還須要你在命令行工具中設置該字體。python

在iTerm2中設置方法：Command+, 進入偏好設置（Preferences）=> Profiles => Default(本身的主題配置) => Non-ASCII Font => Change Font(選擇字體)css3

插件管理

這裏面剛開始使用的Vim插件管理工具VundleVim/Vundle.vim，後面爲了你們安裝方便，使用了 junegunn/vim-plug，這個插件管理工具，俺十分不喜歡，多了個 autoload 目錄，安裝過程也奇醜無比，安裝快速，因此就使用它吧，下面命令更新安裝的 plug.vim，默認已經有了不須要這一步。git

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 進行安裝。

:PlugInstall

更新插件

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

:PlugUpdate

卸載插件

先在 .vimrc 中註釋或者刪除對應插件配置信息，而後在 vim 中執行下面命令，便可刪除對應插件。

:PlugClean

啓動Vim

$ vim

Vim理解

這部分來源 一塊兒來講 Vim 語

動詞

動詞表明瞭咱們打算對文本進行什麼樣的操做。例如：

d # 表示刪除delete
r # 表示替換replace
c # 表示修改change
y # 表示複製yank
v # 表示選取visual select

名詞

名詞表明瞭咱們即將處理的文本。Vim 中有一個專門的術語叫作 [文本對象] text object，下面是一些文本對象的示例：

w # 表示一個單詞word
s # 表示一個句子sentence
p # 表示一個段落paragraph
t # 表示一個 HTML 標籤tag
引號或者各類括號所包含的文本稱做一個文本塊。

介詞

介詞界定了待編輯文本的範圍或者位置。

i # 表示在...以內 inside
a # 表示環繞... around
t # 表示到...位置前 to
f # 表示到...位置上 forward

數詞

數詞指定了待編輯文本對象的數量，從這個角度而言，數詞也能夠看做是一種介詞。引入數詞以後，文本編輯命令的語法就升級成了下面這樣：

動詞 介詞/數詞 名詞

下面是幾個例子：

c3w  # 修改三個單詞：change three words
d2w  # 刪除兩個單詞：delete two words

另外，數詞也能夠修飾動詞，表示將操做執行 n 次。因而，咱們又有了下面的語法：

數詞 動詞 名詞

請看示例：

2dw # 兩次刪除單詞（等價於刪除兩個單詞）: twice delete word
3x  # 三次刪除字符（等價於刪除三個字符）：three times delete character

組詞爲句

有了這些基本的語言元素，咱們就能夠着手構造一些簡單的命令了。文本編輯命令的基本語法以下：

動詞 介詞 名詞

下面是一些例子（若是熟悉了上面的概念，你將會看到這些例子很是容易理解），請親自在 Vim 中試驗一番。

dip # 刪除一個段落: delete inside paragraph
vis # 選取一個句子: visual select inside sentence
ciw # 修改一個單詞: change inside word
caw # 修改一個單詞: change around word
dtx # 刪除文本直到字符「x」（不包括字符「x」）: delete to x
dfx # 刪除文本直到字符「x」（包括字符「x」）: delete forward x

經常使用快捷鍵

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

;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 # 選中 - 變小寫
~ # 選中 - 變大寫變小寫，小寫變大寫

# 列選中編輯
Ctrl+v   # 進入選中模式，`hjkl`方向鍵選擇片區
Shift＋i # 進入列選擇批量編輯

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

;sp # 選中搜索 - 文本中選中關鍵字
    # normal模式下 選中搜索 - 文本中選中關鍵字
;sl # 選中搜索 - 結果列表

# 多光標編輯
Shift+n # 選中下一個相同字符
Shift+k # 跳過當前選中的字符

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,)

  • 快捷鍵<S-n> 表示(Shiftn)

快捷鍵通配符

快捷鍵通配符 <leader> 至關因而一個通用的命令符，默認好像是\，你能夠在.vimrc中將他改成任意一個按鍵，在咱們這個配置我改成了冒號;

" 定義快捷鍵的前綴，即 <Leader>
let mapleader=";"

插入命令

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次

多光標編輯

藉助 vim-multiple-cursors 實現多光標編輯功能。首先選中一個單詞，而後使用快捷鍵Shift+n，就會選中下一個如出一轍的字符，Shift+k跳過選中，而後你能夠進行編輯了。默認這個插件快捷鍵是Ctrl+n，可能會衝突，單在我這裏沒有衝突，操做Shift+n快捷鍵更舒服，你能夠配置本身的快捷鍵

let g:multi_cursor_next_key='<S-n>'
let g:multi_cursor_skip_key='<S-k>'

簡單排版

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

>>         # 光標所在行增長縮進(一個tab)
<<         # 光標所在行減小縮進(一個tab)

n>>        # 光標所在行開始的n行增長縮進
n<<        # 光標所在行開始的n行減小縮進

刷新重載打開的文件

:e  # 刷新當前文件
:e! # 強制刷新當前文件

保存退出

: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 自動將生成以下命令：:'<,'>s/{pattern}/{string}/[flags]

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

  • 若是對打開文件進行替換，你須要先經過 :bufdo 命令顯式告知 vim 範圍，再執行替換；

  • 若是對工程內全部文件進行替換，先 :args **/.cpp */*.h 告知 vim 範圍，再執行替換；

  • 替換當前行第一個 vivian/ 爲 sky/，# 做爲分隔符 :s #vivian/#sky/#

  • :%s/vivian/sky/g（等同於 :g/vivian/s//sky/g） 替換每一行中全部 vivian 爲 sky

  • :n,$s/vivian/sky/g 替換第 n 行開始到最後一行中每一行全部 vivian 爲 sky

:21,27s/^/#/g 行首替換#替換（增長）掉
:ab mymail asdf@qq.com 輸入mymail 摁下空格自動替換成asdf@qq.com

開關注釋

  • ;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。鍵入 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 地址生成引用文本

代碼片斷補全

讓vim 自動完成相同的代碼片段，好比 if-else、switch。UltiSnips 這個插件能夠幫助咱們完成這項艱鉅的工做。UltiSnips 有一套本身的代碼模板語法規則，以下：

snippet if "if statement" i
if (${1:/* condition */}) { 
    ${2:TODO} 
} 
endsnippet

新版 UltiSnips 並未自帶預約義的代碼模板，你能夠從 honza/vim-snippets 獲取各種語言豐富的代碼模板，這種模版我將它存放到 ~/.vim/mysnippets/ 目錄裏面，而後在配置中指定名字，同時修改出發快捷鍵，由於默認的快捷鍵與YCM插件衝突，須要在配置中更改。以下：

let g:UltiSnipsSnippetDirectories=["mysnippets"] " 配置目錄
let g:UltiSnipsExpandTrigger="<leader><tab>"     " 配置快捷鍵
let g:UltiSnipsJumpForwardTrigger="<leader><tab>"    " 配向前跳轉快捷鍵
let g:UltiSnipsJumpBackwardTrigger="<leader><s-tab>" " 配向後跳轉快捷鍵

搜索查找

文件搜索

搜索有兩個插件可使用 wincent/command-t 和 junegunn/fzf，fzf沒有下載下來，這裏在使用 command-t ，使用的時候記得，進入目錄 cd ~/.vim/plugged/command-t 運行 rake make。

;t # 啓動搜索文件

搜索文本內容

dyng/ctrlsf.vim，在插件完成安裝以後，須要安裝另外的工具，才能運行

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

基本使用方法

;sp  # 搜索快捷鍵
:CtrlSF pattern dir  # 若是後面不帶 dir 則默認是 . 當前目錄搜索 
# 使用 j k h l 瀏覽CtrlSP窗口  使用 Ctrl + j/k 在匹配項中跳轉。
# 使用 q 則退出 CtrlSP窗口
# 使用 p

基本搜索，這種搜索不須要依賴任何插件，輸入 / 再輸入須要搜索的內容，摁 Enter 鍵，將會高亮全部搜索的內容，在英文狀態下摁 n 字母鍵向下查找

/搜索內容

# 切換 向上和向下搜索
# 輸入 / 摁 Enter鍵，再摁 n 字母鍵向，下查找
# 輸入 ? 摁 Enter鍵，再摁 n 字母鍵向，上查找

快速移動

Lokaltog/vim-easymotion 把知足條件的位置用 [;A~Za~z] 間的標籤字符標出來，找到你想去的位置再鍵入對應標籤字符便可快速到達。

;;b # 光標前代碼定位
;;e # 光標後代碼定位
;;f # 光標後代碼定位 <搜索自負> 出現定位信息
;;F # 光標前代碼定位 <搜索自負> 出現定位信息

插件列表

這裏面全部的插件，並非都放到了個人 .vimrc 文件中 .vimrc 配置文件中，是我我的喜歡而且習慣的配置。

插件管理工具

主題風格

使用界面

管理項目

代碼書寫

代碼閱讀

錯誤處理

YouCompleteMe unavailable: dlopen(/usr/local/Cellar/python/2.7.13/Frameworks/Python.framework/Versions/2.7/lib/python2.7/lib-dynload/_io.so, 2): Symbol not found:
__PyCodecInfo_GetIncrementalDecoder
  Referenced from: /usr/local/Cellar/python/2.7.13/Frameworks/Python.framework/Versions/2.7/lib/python2.7/lib-dynload/_io.so
  Expected in: flat namespace
 in /usr/local/Cellar/python/2.7.13/Frameworks/Python.framework/Versions/2.7/lib/python2.7/lib-dynload/_io.so
Press ENTER or type command to continue

參考資料

其它人的vimrc配置

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程