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

安裝

sudo apt-get install 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 匹配項高亮顯示

# :set is 顯示部分匹配

替換

# :s/old/new 替換該行第一個匹配串

# :s/old/new/g 替換全行的匹配串

# :%s/old/new/g 替換整個文件的匹配串

執(zhí)行外部命令

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

.vimrc

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

cdHome// 進(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

基本配置

取消備份

set nobackup

setnoswapfile

文件編碼

set encoding=utf-8

顯示行號

set number

取消換行

set nowrap

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

set ruler

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

set cindent

settabstop=2

setshiftwidth=2

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

set cursorline

查找

set ic

set hls

setis

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

set showmode

代碼折疊

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

setnofoldenable

主題

syntax enable

setbackground=dark

colorschemesolarized

插件配置

樹形目錄

Plug'scrooloose/nerdtree'

Plug'jistr/vim-nerdtree-tabs'

Plug'Xuyuanp/nerdtree-git-plugin'

autocmd vimenter *NERDTree

map :NERDTreeToggle

letNERDTreeShowHidden=1

letg:NERDTreeShowIgnoredStatus=1

letg:nerdtree_tabs_open_on_console_startup=1

letg: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é)點

# K 到最后一個節(jié)點

# 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

代碼，引號，路徑補全

Plug'Valloric/YouCompleteMe'

Plug'Raimondi/delimitMate'

Plug'Shougo/deoplete.nvim',{'do':':UpdateRemotePlugins'}

語法高亮，檢查

Plug'sheerun/vim-polyglot'

Plug'w0rp/ale'

letg:ale_linters={

'javascript':['eslint'],

'css':['stylelint'],

}

letg:ale_fixers={

'javascript':['eslint'],

'css':['stylelint'],

}

letg:ale_fix_on_save=1

letg:ale_sign_column_always=1

letg:ale_sign_error='●'

letg:ale_sign_warning='?'

nmap

nmap

文件，代碼搜索

Plug'rking/ag.vim'

Plug'kien/ctrlp.vim'

加強版狀態(tài)欄

Plug'vim-airline/vim-airline'

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

letg:airline_theme='papercolor'

代碼注釋

Plug'scrooloose/nerdcommenter'

# cc // 注釋

# cm 只用一組符號注釋

# cA 在行尾添加注釋

# c$ /* 注釋 */

# cs /* 塊注釋 */

# cy 注釋并復(fù)制

# c 注釋/取消注釋

# ca 切換// 和 /* */

# cu 取消注釋

letg:NERDSpaceDelims=1

letg:NERDDefaultAlign='left'

letg:NERDCustomDelimiters={

'javascript':{'left':'//','leftAlt':'/**','rightAlt':'*/'},

'less':{'left':'/**','right':'*/'}

}

git

Plug'airblade/vim-gitgutter'

Plug'tpope/vim-fugitive'

Markdown

Plug'suan/vim-instant-markdown'

letg:instant_markdown_slow=1

letg:instant_markdown_autostart=0

# :InstantMarkdownPreview

Emmet

Plug'mattn/emmet-vim'

letg:user_emmet_leader_key=''

letg:user_emmet_settings={

'javascript.jsx':{

'extends':'jsx',

},

}

html 5

Plug 'othree/html5.vim'

css 3

Plug'hail2u/vim-css3-syntax'

Plug'ap/vim-css-color'

augroup VimCSS3Syntax

autocmd!

autocmd FileType css setlocaliskeyword+=-

augroupEND

JavaScipt

Plug'pangloss/vim-javascript'

letg:javascript_plugin_jsdoc=1

letg:javascript_plugin_ngdoc=1

letg:javascript_plugin_flow=1

setfoldmethod=syntax

letg:javascript_conceal_function ="?"

letg:javascript_conceal_null ="?"

letg:javascript_conceal_this ="@"

letg:javascript_conceal_return ="?"

letg:javascript_conceal_undefined="?"

letg:javascript_conceal_NaN="?"

letg:javascript_conceal_prototype="?"

letg:javascript_conceal_static ="?"

letg:javascript_conceal_super="Ω"

letg:javascript_conceal_arrow_function ="?"

letg:javascript_conceal_noarg_arrow_function=""

letg:javascript_conceal_underscore_arrow_function=""

setconceallevel=1

React

Plug'mxw/vim-jsx'

letg:jsx_ext_required=0

Prettier

Plug'prettier/vim-prettier',{

'do':'yarn install',

'for':['javascript','typescript','css','less','scss','json','graphql']}

letg:prettier#config#bracket_spacing = 'true'

letg:prettier#autoformat = 0

autocmd BufWritePre *.js,*.jsx,*.mjs,*.ts,*.tsx,*.css,*.less,*.scss,*.json,*.graphqlPrettierAsync