window環境下搭建vim前端開發環境

前端 window vim 折騰記

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

1. 下載gvim與基本配置

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

在windows下，vim的配置文件爲_vimrc，在所安裝的vim的目錄下，將_vimrc打開以後，刪除裏面的內容，以後黏貼一下的配置，從新打開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    "設置摺疊欄的寬度

1.1 主題推薦

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

1. 下載文件gruvbox，將其命名爲gruvbox.vim
2. 將文件拷貝到vim安裝目錄下的vimfiles -> colors文件夾下
3. 在_vimrc上添加一行配置colorscheme gruvbox, 重啓以後便可看到效果

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

2. 安裝Vundle插件管理器

在windows下安裝vundle比較麻煩，分爲三步，vundle安裝插件的原理依賴於git和curl，所以須要在windows安裝這兩種工具

2.1 安裝chocolatey

chocolatey是windows下實用的包管理器，相似於ubuntu下的apt-get，安裝步驟以下：

在windows下打開cmd，黏貼如下命令，回車執行，便可安裝chocolatey，這裏注意要使用管理員權限。

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

2.2 安裝git和curl

若是電腦裏面有了git或者curl就能夠不用重複安裝了，利用上一步安裝的包管理工具chocolatey，咱們只須要在cmd下執行如下命令便可完成git或者curl的安裝，很是方便

choco install -y git
choco install -y curl

這裏一樣須要管理員權限

2.3 安裝Vundle

完成上面的步驟以後，終於能夠安裝Vundle，在Vim的安裝目錄下，找到vimfiles，在該目錄下建立bundle文件夾，進入bundler文件夾中，執行如下命令

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

clone下來的文件夾爲vundle，咱們將其重命名爲Vundle.vim，有如下的目錄結構：

Vim安裝目錄

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

2.4 配置vimrc

首先，添加一個環境變量VIM到windows下，配置

VIM = VIM的安裝目錄

以後，配置_vimrc，打開以後，在原有的配置基礎上添加

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

" 能夠在這次安裝插件
Plugin 'VundleVim/Vundle.vim'

call vundle#end()
filetype plugin indent on

配置環境變量的緣由是由於經過$VIM變量能夠直接找到VIM的安裝根目錄，注意在windows下路徑之間使用/而不是\

此時從新打開vim，在normal模式下，運行命令:BundleInstall，能夠看到命令成功執行，即表示成功安裝vundle

2.5 Vundle的幾點常識

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

1. 在vundle#begin()和vundle#end()之間，配置行Plugin '插件名稱'
2. 直接配置一行Bundle '插件名稱'

在normal模式下，運行

:PluginInstall

或者

:BundleInstall

都是同樣的安裝全部的插件

經常使用命令參考：

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

3 經常使用插件與用法

這一部分會不按期更新，用到什麼安裝什麼

在windows下安裝插件大部分時候須要從新啓動vim，很尷尬！

若是想多安裝的插件有更多的瞭解能夠自行搜索vim+插件名，通常在github就能夠直接搜索到。

3.1 美觀底部狀態欄

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

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

   Plugin 'vim-airline/vim-airline'
   Plugin 'vim-airline/vim-airline-themes'

2. 執行:BundleInstall，安裝以後從新啓動便可

3.2 nerdTree

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

Bundle 'scrooloose/nerdtree'

配置快捷鍵，按F2開關邊欄，瀏覽文件

" nerdTree快捷鍵映射
let NERDTreeWinPos='left'
let NERDTreeWinSize=30
map <F2> :NERDTreeToggle<CR>

3.3 emmet / vim-closetag

前端開發常常使用到的插件，安裝仍是配置_vimrc，使用:BundleInstall便可

Bundle 'mattn/emmet-vim'

配置emmet的快捷鍵ctrl+tab，而且使其只在特定的文件類型下才生效，單獨設置tab不科學，常常使用tab進行縮進的

" 設置emmet快捷
let g:user_emmet_expandabbr_key = '<c-tab>'
let g:user_emmet_settings = {'indentation': '    '}
let g:user_emmet_install_global = 0
autocmd FileType html,css EmmetInstall

在用不到emmet的時候，可使用vim-closetag進行自動關閉html、xml標籤，在html文件比較大的狀況下仍是蠻實用的，配置以下

Plugin 'alvan/vim-closetag'

3.4 markdown

安裝markdown插件，能夠支持markdown的語法，若是須要預覽則要安裝額外安裝其餘的插件

配置_vimrc，使用:BundleInstall

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

3.5 js/css/html/json 格式化

配置_vimrc，再執行:PluginInstall，注意，須要有npm的支持，即在電腦上安裝node環境

Plugin 'maksimr/vim-jsbeautify'

設置快捷鍵，配置_vimrc

map <c-f> :call JsBeautify()<cr>

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

3.6 快速打開文件

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

Plugin 'ctrlpvim/ctrlp.vim'

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

let g:ctrlp_map = '<c-p>'
let g:ctrlp_cmd = 'CtrlP'

3.7 多窗口

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

Plugin 'szw/vim-maximizer'

配置F3爲快捷鍵，配置以下

nnoremap <silent><F3> :MaximizerToggle<CR>
vnoremap <silent><F3> :MaximizerToggle<CR>gv
inoremap <silent><F3> <C-o>:MaximizerToggle<CR>

3.8 全局搜索

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

Plugin 'dkprice/vim-easygrep'

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

<leader>vv 能夠在當前目錄下全局搜索指針選擇的單詞

例如咱們要全局搜索一段字符串str-star，能夠在可視模式下經過光標移動選擇該字符串，以後按下快捷鍵 <leader>vv，即完成字符串的搜索，很方便

固然，咱們也能夠直接進行全局搜索，使用指令

:Grep 搜索字符串

全局替換也能夠

:Replace [target] [replacement]

3.9 註釋代碼

實現代碼的快速註釋，使用的是插件scrooloose/nerdcommenter，配置以下

Plugin 'scrooloose/nerdcommenter'

有默認的快捷方式：

1. 註釋當前行：<leader>cc
2. toggle註釋：<leader>c<space>

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

let g:NERDSpaceDelims = 1

3.10 javascript庫語法高亮

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

Bundle 'javascript-libraries-syntax.vim'

安裝以後，能夠設置識別的js庫函數，進行語法高亮

let g:used_javascript_libs = 'jquery,requirejs'

3.11 光標的快速移動

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

Plugin 'easymotion/vim-easymotion'

開啓快速移動的模式 <leader><leader>w

輸入高亮的字母能夠調到對應的位置

3.12 瀏覽當前打開的文件

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

Plugin 'jlanzarotta/bufexplorer'

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

nnoremap <silent><F8> :BufExplorer<CR>

注意要在normal模式下

後續

歡迎關注window-vim，入坑以後繼續將會持續更新。