摘要：前端折騰記自從換了一個鍵盤之后，對的熱情遞增，終于找一個時間，靜下心來折騰一下，在下使用著實蛋疼，不過前端開發(fā)要求不高，之前用，其實也沒用到什么牛逼的插件，將就著用吧。

自從換了一個poker鍵盤之后，對vim的熱情遞增，終于找一個時間，靜下心來折騰一下vim，在window下使用vim著實蛋疼，不過前端開發(fā)要求不高，之前用sublime，vscode其實也沒用到什么牛逼的插件，將就著用吧。

在gvim下載exe文件，直接在window安裝即可

在windows下，vim的配置文件為_vimrc，在所安裝的vim的目錄下，將_vimrc打開之后，刪除里面的內(nèi)容，之后黏貼一下的配置，重新打開vim即可看到一個比較美觀的界面了

set tags+=~/.vim/tags
syntax enable
syntax on
set cursorline
hi CursorLine  cterm=NONE   ctermbg=darkred ctermfg=white
hi CursorColumn cterm=NONE ctermbg=darkred ctermfg=white
filetype plugin indent on
set t_Co=256
set background=dark  "dark light "can switch it to find which is look pretty
set nocompatible                 "some plugin need it
set hlsearch                     "highlight the search
set incsearch                    "move to fit position after one char input
set nobackup                     "won"t produce the backup file when save file
set nowritebackup                "won"t produce the backup file when save file
set noswapfile                   "won"t use swapfile
set hidden                       "can open other file when a file is not saved
set ruler                        "show ruler at the right bottom
set nowrap                       "disable auto newline
set laststatus=2                 "status bar will show anytime
set updatetime=200               "tagbar response 800ms
set showmatch matchtime=0        "show the other bracket
set wmnu wildmode=longest:full   "when in command mode can use auto complete same as bash
set expandtab tabstop=4          "expand the tab to 4 space
set si ai ci cinkeys-=0# cinoptions=g0,:0   "some indent rules
set shiftwidth=4                 "make the indent 4 length
set softtabstop=4                "backspace can del 4 space
set lcs=eol:$,tab:|            "display tab to green line
set backspace=indent,eol,start   "better backspace
set fileencodings=utf-8,cp936    "auto test the file is uft-8 or cp936
set fileformats=unix,dos,mac     "line feed different in different mode
set completeopt=menuone,longest
set relativenumber

set guifont=Consolas:h14 "設置字體
set clipboard=unnamed "使用windows的剪貼板

set foldmethod=syntax "用語法高亮來定義折疊
set foldlevel=100   "啟動vim時不要自動折疊代碼
set foldcolumn=5    "設置折疊欄的寬度

在此處推薦一個主題gruvbox，安裝方法為：

下載文件gruvbox，將其命名為gruvbox.vim

將文件拷貝到vim安裝目錄下的vimfiles -> colors文件夾下

在_vimrc上添加一行配置colorscheme gruvbox, 重啟之后即可看到效果

依此方法類推，在windows下安裝主題配色都是這樣的方法步驟。

在windows下安裝vundle比較麻煩，分為三步，vundle安裝插件的原理依賴于git和curl，因此需要在windows安裝這兩種工具

chocolatey是windows下實用的包管理器，類似于ubuntu下的apt-get，安裝步驟如下：

在windows下打開cmd，黏貼以下命令，回車執(zhí)行，即可安裝chocolatey，這里注意要使用管理員權(quán)限。

 @"%SystemRoot%System32WindowsPowerShellv1.0powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString("https://chocolatey.org/install.ps1"))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%chocolateyin" 

如果電腦里面有了git或者curl就可以不用重復安裝了，利用上一步安裝的包管理工具chocolatey，我們只需要在cmd下執(zhí)行以下命令即可完成git或者curl的安裝，非常方便

choco install -y git
choco install -y curl

這里同樣需要管理員權(quán)限

完成上面的步驟之后，終于可以安裝Vundle，在Vim的安裝目錄下，找到vimfiles，在該目錄下創(chuàng)建bundle文件夾，進入bundler文件夾中，執(zhí)行以下命令

git clone https://github.com/gmarik/vundle

clone下來的文件夾為vundle，我們將其重命名為Vundle.vim，有以下的目錄結(jié)構(gòu)：

Vim安裝目錄

+--- vimfiles
    +--- bundle
        +--- vundle
            +--- autoload

首先，添加一個環(huán)境變量VIM到windows下，配置

VIM = VIM的安裝目錄

之后，配置_vimrc，打開之后，在原有的配置基礎(chǔ)上添加

"插件管理
set rtp+=$VIM/vimfiles/bundle/Vundle.vim/
call vundle#begin()

" 可以在此次安裝插件
Plugin "VundleVim/Vundle.vim"

call vundle#end()
filetype plugin indent on

配置環(huán)境變量的原因是因為通過$VIM變量可以直接找到VIM的安裝根目錄，注意在windows下路徑之間使用/而不是

此時重新打開vim，在normal模式下，運行命令:BundleInstall，可以看到命令成功執(zhí)行，即表示成功安裝vundle

Vundle安裝插件通過配置文件有兩種形式

在vundle#begin()和vundle#end()之間，配置行Plugin "插件名稱"

直接配置一行Bundle "插件名稱"

在normal模式下，運行

:PluginInstall

或者

:BundleInstall

都是一樣的安裝所有的插件

常用命令參考：

:BundleInstall // 安裝插件
:BundleInstall! // 更新插件
:BundleClean // 卸載插件

這一部分會不定期更新，用到什么安裝什么

在windows下安裝插件大部分時候需要重新啟動vim，很尷尬！

如果想多安裝的插件有更多的了解可以自行搜索vim+插件名，一般在github就可以直接搜索到。

安裝的插件叫vim-airline, 安裝步驟如下：

配置_vimrc, 添加以下配置，參考上面vundle安裝插件的常識

Plugin "vim-airline/vim-airline"
Plugin "vim-airline/vim-airline-themes"

執(zhí)行:BundleInstall，安裝之后重新啟動即可

邊欄文件管理，不用多介紹，直接在配置_vimrc，使用:BundleInstall即可

Bundle "scrooloose/nerdtree"

配置快捷鍵，按F2開關(guān)邊欄，瀏覽文件

" nerdTree快捷鍵映射
let NERDTreeWinPos="left"
let NERDTreeWinSize=30
map  :NERDTreeToggle

前端開發(fā)經(jīng)常使用到的插件，安裝還是配置_vimrc，使用:BundleInstall即可

Bundle "mattn/emmet-vim"

配置emmet的快捷鍵ctrl+tab，并且使其只在特定的文件類型下才生效，多帶帶設置tab不科學，經(jīng)常使用tab進行縮進的

" 設置emmet快捷
let g:user_emmet_expandabbr_key = ""
let g:user_emmet_settings = {"indentation": "    "}
let g:user_emmet_install_global = 0
autocmd FileType html,css EmmetInstall

在用不到emmet的時候，可以使用vim-closetag進行自動關(guān)閉html、xml標簽，在html文件比較大的情況下還是蠻實用的，配置如下

Plugin "alvan/vim-closetag"

安裝markdown插件，可以支持markdown的語法，如果需要預覽則要安裝額外安裝其他的插件

配置_vimrc，使用:BundleInstall

" markdown插件
Plugin "godlygeek/tabular"
Plugin "plasticboy/vim-markdown"

配置_vimrc，再執(zhí)行:PluginInstall，注意，需要有npm的支持，即在電腦上安裝node環(huán)境

Plugin "maksimr/vim-jsbeautify"

設置快捷鍵，配置_vimrc

map  :call JsBeautify()

即可使用ctrl+f的快捷鍵格式化文件

在vim中，快速查找并打開該文件，使用ctrlp.vim，配置_vimrc，使用Vundle進行安裝即可

Plugin "ctrlpvim/ctrlp.vim"

配置快捷鍵，ctrl+p，打開搜索欄，可以瀏覽當前文件夾的文件，也可以快速打開文件

let g:ctrlp_map = ""
let g:ctrlp_cmd = "CtrlP"

當分隔多個窗口的時候，即使用:vsp filename指令時，可以插件szw/vim-maximizer，進行窗口的最大最小化，很方便

Plugin "szw/vim-maximizer"

配置F3為快捷鍵，配置如下

nnoremap  :MaximizerToggle
vnoremap  :MaximizerTogglegv
inoremap  :MaximizerToggle

在windows下，全局搜索是一個很麻煩的事情，這里決定使用vim自帶的vimgrep，但是這個命令使用起來比較麻煩，因此使用了插件vim-easygrep，同樣使用Vundle進行安裝

Plugin "dkprice/vim-easygrep"

vim-easygrep有一些默認的快捷鍵，例如

vv 可以在當前目錄下全局搜索指針選擇的單詞

例如我們要全局搜索一段字符串str-star，可以在可視模式下通過光標移動選擇該字符串，之后按下快捷鍵 vv，即完成字符串的搜索，很方便

當然，我們也可以直接進行全局搜索，使用指令

:Grep 搜索字符串

全局替換也可以

:Replace [target] [replacement]

實現(xiàn)代碼的快速注釋，使用的是插件scrooloose/nerdcommenter，配置如下

Plugin "scrooloose/nerdcommenter"

有默認的快捷方式：

注釋當前行：cc

toggle注釋：c

配置了注釋時空出一個字符

let g:NERDSpaceDelims = 1

安裝了插件javascript-libraries-syntax.vim，配置如下

Bundle "javascript-libraries-syntax.vim"

安裝之后，可以設置識別的js庫函數(shù)，進行語法高亮

let g:used_javascript_libs = "jquery,requirejs"

快速移動光標的插件easymotion，安裝配置如下

Plugin "easymotion/vim-easymotion"

開啟快速移動的模式 w

輸入高亮的字母可以調(diào)到對應的位置

這里使用的插件是jlanzarotta/bufexplorer，依舊是使用vundle進行安裝，配置如下

Plugin "jlanzarotta/bufexplorer"

配置快捷鍵F8，瀏覽當前打開的文件列表，配置如下

nnoremap  :BufExplorer

注意要在normal模式下

歡迎關(guān)注window-vim，入坑之后繼續(xù)將會持續(xù)更新。