Vim 是一個上古神器，本篇文章主要持續(xù)總結(jié)使用 Vim 的過程中不得不了解的一些指令和注意事項(xiàng)，以及持續(xù)分享一個前端工作者不得不安裝的一些插件，而關(guān)于 Vim 的簡介，主題的選擇，以及為何使用 vim-plug 來管理插件等內(nèi)容，有興趣的同學(xué)下來可以自己了解和對比下。

安裝

sudo?apt-getinstall?vim//?Ubuntu

其他平臺，可以自行谷歌。

新手指南

vimtutor//?vim?教程

上面是史上最簡單，最全面的Vim基礎(chǔ)教程，至今無人超越。

下面是作者基于上面的歸納：

移動光標(biāo)

#?hjkl
#?2w?向前移動兩個單詞
#?3e?向前移動到第?3?個單詞的末尾
#?0?移動到行首
#?$?當(dāng)前行的末尾
#?gg?文件第一行
#?G?文件最后一行
#?行號+G?指定行
#?+o?跳轉(zhuǎn)回之前的位置
#?+i?返回跳轉(zhuǎn)之前的位置

退出

#??進(jìn)入正常模式
#?:q!?不保存退出
#?:wq?保存后退出

刪除

#?x?刪除當(dāng)前字符
#?dw?刪除至當(dāng)前單詞末尾
#?de?刪除至當(dāng)前單詞末尾，包括當(dāng)前字符
#?d$?刪除至當(dāng)前行尾
#?dd?刪除整行
#?2dd?刪除兩行

修改

#?i?插入文本
#?A?當(dāng)前行末尾添加
#?r?替換當(dāng)前字符
#?o?打開新的一行并進(jìn)入插入模式

撤銷

#?u?撤銷
#?+r?取消撤銷
復(fù)制粘貼剪切
#?v?進(jìn)入可視模式
#?y?復(fù)制
#?p?粘貼
#?yy?復(fù)制當(dāng)前行
#?dd?剪切當(dāng)前行

狀態(tài)

#+g?顯示當(dāng)前行以及文件信息
查找
#?/?正向查找（n：繼續(xù)查找，N：相反方向繼續(xù)查找）
#?？?逆向查找
#?%?查找配對的?{，[，(
#?:set?ic?忽略大小寫
#?:set?noic?取消忽略大小寫
#?:set?hls?匹配項(xiàng)高亮顯示
#?:set?is?顯示部分匹配

替換

#?:s/old/new?替換該行第一個匹配串
#?:s/old/new/g?替換全行的匹配串
#?:%s/old/new/g?替換整個文件的匹配串

折疊

#?zc?折疊
#?zC?折疊所有嵌套
#?zo?展開折疊
#?zO?展開所有折疊嵌套

執(zhí)行外部命令

#?:!shell?執(zhí)行外部命令

.vimrc

.vimrc 是 Vim 的配置文件，需要我們自己創(chuàng)建：

cd?Home???????????????//?進(jìn)入?Home?目錄
touch?.vimrc??????????//?配置文件

#?Unix
#?vim-plug
#?Vim
curl?-fLo?~/.vim/autoload/plug.vim?--create-dirs?\
????https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
#?Neovim
curl?-fLo?~/.local/share/nvim/site/autoload/plug.vim?--create-dirs?\
????https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

其他平臺，可以查看 vim-plug^[1]。

基本配置

取消備份

set?nobackup
set?noswapfile

文件編碼

setencoding=utf-8

顯示行號

setnumber

取消換行

setnowrap

顯示光標(biāo)當(dāng)前位置

setruler

設(shè)置縮進(jìn)

set?cindent
set?tabstop=2
set?shiftwidth=2

突出顯示當(dāng)前行

setcursorline

查找

set?ic
set?hls
set?is

左下角顯示當(dāng)前vim模式

setshowmode

代碼折疊

#啟動?vim?時關(guān)閉折疊代碼
set?nofoldenable

主題

syntax?enable
set?background=dark
colorscheme?solarized

? altercation/vim-colors-solarized^[2]
? Anthony25/gnome-terminal-colors-solarized^[3]

插件配置

樹形目錄

Plug?'scrooloose/nerdtree'
Plug?'jistr/vim-nerdtree-tabs'
Plug?'Xuyuanp/nerdtree-git-plugin'

autocmd?vimenter?*?NERDTree
map??:NERDTreeToggle
let?NERDTreeShowHidden=1
let?g:NERDTreeShowIgnoredStatus?=?1
let?g:nerdtree_tabs_open_on_console_startup=1
let?g:NERDTreeIndicatorMapCustom?=?{
????\?"Modified"??:?"?",
????\?"Staged"????:?"?",
????\?"Untracked"?:?"?",
????\?"Renamed"???:?"?",
????\?"Unmerged"??:?"═",
????\?"Deleted"???:?"?",
????\?"Dirty"?????:?"?",
????\?"Clean"?????:?"??",
????\?'Ignored'???:?'?',
????\?"Unknown"???:?"?"
????\?}

#?o?打開關(guān)閉文件或目錄
#?e?以文件管理的方式打開選中的目錄
#?t?在標(biāo)簽頁中打開
#?T?在標(biāo)簽頁中打開，但光標(biāo)仍然留在?NERDTree
#?r?刷新光標(biāo)所在的目錄
#?R?刷新當(dāng)前根路徑
#?X?收起所有目錄
#?p?小寫，跳轉(zhuǎn)到光標(biāo)所在的上一級路徑
#?P?大寫，跳轉(zhuǎn)到當(dāng)前根路徑
#?J?到第一個節(jié)點(diǎn)
#?K?到最后一個節(jié)點(diǎn)
#?I?顯示隱藏文件
#?m?顯示文件操作菜單
#?C?將根路徑設(shè)置為光標(biāo)所在的目錄
#?u?設(shè)置上級目錄為根路徑
#?ctrl?+?w?+?w?光標(biāo)自動在左右側(cè)窗口切換
#?ctrl?+?w?+?r?移動當(dāng)前窗口的布局位置
#?:tabc?關(guān)閉當(dāng)前的?tab
#?:tabo???關(guān)閉所有其他的?tab
#?:tabp???前一個?tab
#?:tabn???后一個?tab
#?gT??????前一個?tab
#?gt??????后一個?tab

? scrooloose/nerdtree^[4]
? vim-nerdtree-tabs^[5]
? nerdtree-git-plugin^[6]

代碼，引號，路徑補(bǔ)全

Plug?'Valloric/YouCompleteMe'
Plug?'Raimondi/delimitMate'
Plug?'Shougo/deoplete.nvim',?{?'do':?':UpdateRemotePlugins'?}

? Valloric/YouCompleteMe^[7]
? Raimondi/delimitMate^[8]
? Shougo/deoplete.nvim^[9]

語法高亮，檢查

Plug?'sheerun/vim-polyglot'
Plug?'w0rp/ale'

let?g:ale_linters?=?{
\????'javascript':?['eslint'],
\????'css':?['stylelint'],
\}
let?g:ale_fixers?=?{
\????'javascript':?['eslint'],
\????'css':?['stylelint'],
\}
let?g:ale_fix_on_save?=?1

let?g:ale_sign_column_always?=?1
let?g:ale_sign_error?=?'●'
let?g:ale_sign_warning?=?'?'

nmap???(ale_previous_wrap)
nmap???(ale_next_wrap)

? w0rp/ale^[10]
? sheerun/vim-polyglot^[11]

文件，代碼搜索

Plug?'rking/ag.vim'
Plug?'kien/ctrlp.vim'

? kien/ctrlp.vim^[12]
? ggreer/the_silver_searcher^[13]
? rking/ag.vim^[14]

加強(qiáng)版狀態(tài)欄

Plug?'vim-airline/vim-airline'
Plug?'vim-airline/vim-airline-themes'

let?g:airline_theme='papercolor'

? vim-airline/vim-airline^[15]
? vim-airline/vim-airline-themes^[16]

代碼注釋

Plug?'scrooloose/nerdcommenter'

#?cc?//?注釋
#?cm?只用一組符號注釋
#?cA?在行尾添加注釋
#?c$?/*?注釋?*/
#?cs?/*?塊注釋?*/
#?cy?注釋并復(fù)制
#?c?注釋/取消注釋
#?ca?切換　//?和?/*?*/
#?cu?取消注釋

let?g:NERDSpaceDelims?=?1
let?g:NERDDefaultAlign?=?'left'
let?g:NERDCustomDelimiters?=?{
????????????\?'javascript':?{?'left':?'//',?'leftAlt':?'/**',?'rightAlt':?'*/'?},
????????????\?'less':?{?'left':?'/**',?'right':?'*/'?}
????????\?}

? scrooloose/nerdcommenter^[17]

git

Plug?'airblade/vim-gitgutter'
Plug?'tpope/vim-fugitive'

? airblade/vim-gitgutter^[18]
? tpope/vim-fugitive^[19]

Markdown

Plug?'suan/vim-instant-markdown'

let?g:instant_markdown_slow?=?1
let?g:instant_markdown_autostart?=?0
#?:InstantMarkdownPreview

? suan/vim-instant-markdown^[20]

Emmet

Plug?'mattn/emmet-vim'

let?g:user_emmet_leader_key=''
let?g:user_emmet_settings?=?{
?????????\?'javascript.jsx'?:?{
????????????\?'extends'?:?'jsx',
?????????\?},
??????\?}

? mattn/emmet-vim^[21]

html 5

Plug'othree/html5.vim'

? othree/html5.vim^[22]

css 3

Plug?'hail2u/vim-css3-syntax'
Plug?'ap/vim-css-color'

augroup?VimCSS3Syntax
??autocmd!

??autocmd?FileType?css?setlocal?iskeyword+=-
augroup?END

? hail2u/vim-css3-syntax[23]
? ap/vim-css-color[24]

JavaScipt

Plug?'pangloss/vim-javascript'
let?g:javascript_plugin_jsdoc?=?1
let?g:javascript_plugin_ngdoc?=?1
let?g:javascript_plugin_flow?=?1
set?foldmethod=syntax
let?g:javascript_conceal_function?????????????=?"?"
let?g:javascript_conceal_null?????????????????=?"?"
let?g:javascript_conceal_this?????????????????=?"@"
let?g:javascript_conceal_return???????????????=?"?"
let?g:javascript_conceal_undefined????????????=?"?"
let?g:javascript_conceal_NaN??????????????????=?"?"
let?g:javascript_conceal_prototype????????????=?"?"
let?g:javascript_conceal_static???????????????=?"?"
let?g:javascript_conceal_super????????????????=?"Ω"
let?g:javascript_conceal_arrow_function???????=?"?"
let?g:javascript_conceal_noarg_arrow_function?=?"?"
let?g:javascript_conceal_underscore_arrow_function?=?"?"
set?conceallevel=1

? pangloss/vim-javascript^[25]
（注：上述腳本中存在特殊字符，有的情況下顯示不正確，請直接用上述鏈接的內(nèi)容。）

React

Plug?'mxw/vim-jsx'
let?g:jsx_ext_required?=?0

? mxw/vim-jsx^[26]

Prettier

Plug?'prettier/vim-prettier',?{
??\?'do':?'yarn?install',
??\?'for':?['javascript',?'typescript',?'css',?'less',?'scss',?'json',?'graphql']?}
let?g:prettier#config#bracket_spacing?=?'true'
let?g:prettier#config#jsx_bracket_same_line?=?'false'
let?g:prettier#autoformat?=?0
autocmd?BufWritePre?*.js,*.jsx,*.mjs,*.ts,*.tsx,*.css,*.less,*.scss,*.json,*.graphql?PrettierAsync
#?:Prettier

? prettier/vim-prettier^[27]

總結(jié)

最后，呈上參考配置 .vimrc^[28]，如果關(guān)于 vim 有更好的 idea，歡迎在評論中交流。