10分鐘教你為自己打造一個專屬VIM

Vim 是一個上古神器，本篇文章主要持續總結使用 Vim 的過程中不得不瞭解的一些指令和註意事項，以及持續分享一個前端工作者不得不安裝的一些外掛，而關於 Vim 的簡介，主題的選擇，以及為何使用 vim-plug 來管理外掛等內容，有興趣的同學下來可以自己瞭解和對比下。

安裝

sudo apt-getinstall vim// Ubuntu

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

新手指南

vimtutor// vim 教程

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

下麵是作者基於上面的歸納：

移動游標

# hjkl# 2w 向前移動兩個單詞# 3e 向前移動到第 3 個單詞的末尾# 0 移動到行首# $ 當前行的末尾# gg 檔案第一行# G 檔案最後一行# 行號+G 指定行# +o 跳轉回之前的位置# +i 傳回跳轉之前的位置

退出

#  進入正常樣式# :q! 不儲存退出# :wq 儲存後退出

刪除

# x 刪除當前字元# dw 刪除至當前單詞末尾# de 刪除至當前單詞末尾，包括當前字元# d$ 刪除至當前行尾# dd 刪除整行# 2dd 刪除兩行

修改

# i 插入文字# A 當前行末尾新增# r 替換當前字元# o 開啟新的一行併進入插入樣式

撤銷

# u 撤銷# +r 取消撤銷

複製貼上剪下

# v 進入可視樣式# y 複製# p 貼上# yy 複製當前行# dd 剪下當前行

狀態

#+g 顯示當前行以及檔案資訊

查詢

# / 正向查詢（n：繼續查詢，N：相反方向繼續查詢）# ？ 逆向查詢# % 查詢配對的 {，[，(# :set ic 忽略大小寫# :set noic 取消忽略大小寫# :set hls 匹配項高亮顯示# :set is 顯示部分匹配

替換

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

摺疊

# zc 摺疊# zC 摺疊所有巢狀# zo 展開摺疊# zO 展開所有摺疊巢狀

執行外部命令

# :!shell 執行外部命令

.vimrc

.vimrc 是 Vim 的配置檔案，需要我們自己建立：

cd Home               // 進入 Home 目錄touch .vimrc          // 配置檔案# Unix# vim-plug# Vimcurl -fLo ~/.vim/autoload/plug.vim --create-dirs     https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim# Neovimcurl -fLo ~/.local/share/nvim/site/autoload/plug.vim --create-dirs     https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

其他平臺，可以檢視 vim-plug[1]。

基本配置

取消備份

set nobackupset noswapfile

檔案編碼

setencoding=utf-8

顯示行號

setnumber

取消換行

setnowrap

顯示游標當前位置

setruler

設定縮排

set cindentset tabstop=2set shiftwidth=2

突出顯示當前行

setcursorline

查詢

set icset hlsset is

左下角顯示當前 vim 樣式

setshowmode

程式碼摺疊

# 啟動 vim 時關閉摺疊程式碼set nofoldenable

主題

syntax enableset background=darkcolorscheme solarized

外掛配置

樹形目錄

Plug 'scrooloose/nerdtree'Plug 'jistr/vim-nerdtree-tabs'Plug 'Xuyuanp/nerdtree-git-plugin'autocmd vimenter * NERDTreemap  :NERDTreeTogglelet NERDTreeShowHidden=1let g:NERDTreeShowIgnoredStatus = 1let g:nerdtree_tabs_open_on_console_startup=1let g:NERDTreeIndicatorMapCustom = {     "Modified"  : "✹",     "Staged"    : "✚",     "Untracked" : "✭",     "Renamed"   : "➜",     "Unmerged"  : "═",     "Deleted"   : "✖",     "Dirty"     : "✗",     "Clean"     : "✔︎",     'Ignored'   : '☒',     "Unknown"   : "?"     }# o 開啟關閉檔案或目錄# e 以檔案管理的方式開啟選中的目錄# t 在標簽頁中開啟# T 在標簽頁中開啟，但游標仍然留在 NERDTree# r 掃清游標所在的目錄# R 掃清當前根路徑# X 收起所有目錄# p 小寫，跳轉到游標所在的上一級路徑# P 大寫，跳轉到當前根路徑# J 到第一個節點# K 到最後一個節點# I 顯示隱藏檔案# m 顯示檔案操作選單# C 將根路徑設定為游標所在的目錄# u 設定上級目錄為根路徑# ctrl + w + w 游標自動在左右側視窗切換# ctrl + w + r 移動當前視窗的佈局位置# :tabc 關閉當前的 tab# :tabo   關閉所有其他的 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'let g:ale_linters = {    'javascript': ['eslint'],    'css': ['stylelint'],}let g:ale_fixers = {    'javascript': ['eslint'],    'css': ['stylelint'],}let g:ale_fix_on_save = 1let g:ale_sign_column_always = 1let g:ale_sign_error = '●'let g:ale_sign_warning = '▶'nmap   (ale_previous_wrap)nmap   (ale_next_wrap)

檔案，程式碼搜尋

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

加強版狀態列

Plug 'vim-airline/vim-airline'Plug 'vim-airline/vim-airline-themes'let g:airline_theme='papercolor'

程式碼註釋

Plug 'scrooloose/nerdcommenter'# cc // 註釋# cm 只用一組符號註釋# cA 在行尾新增註釋# c$ /* 註釋 */# cs /* 塊註釋 */# cy 註釋並複製# c 註釋/取消註釋# ca 切換　// 和 /* */# cu 取消註釋let g:NERDSpaceDelims = 1let g:NERDDefaultAlign = 'left'let g:NERDCustomDelimiters = {             'javascript': { 'left': '//', 'leftAlt': '/**', 'rightAlt': '*/' },             'less': { 'left': '/**', 'right': '*/' }         }

git

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

Markdown

Plug 'suan/vim-instant-markdown'let g:instant_markdown_slow = 1let g:instant_markdown_autostart = 0# :InstantMarkdownPreview

Emmet

Plug 'mattn/emmet-vim'let g:user_emmet_leader_key=''let g: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 setlocal iskeyword+=-augroup END

JavaScipt

1. Plug 'pangloss/vim-javascript'
3. let g:javascript_plugin_jsdoc = 1
4. let g:javascript_plugin_ngdoc = 1
5. let g:javascript_plugin_flow = 1
6. set foldmethod=syntax
7. let g:javascript_conceal_function             = "ƒ"
8. let g:javascript_conceal_null                 = "ø"
9. let g:javascript_conceal_this                 = "@"
10. let g:javascript_conceal_return               = "⇚"
11. let g:javascript_conceal_undefined            = "¿"
12. let g:javascript_conceal_NaN                  = "ℕ"
13. let g:javascript_conceal_prototype            = "¶"
14. let g:javascript_conceal_static               = "•"
15. let g:javascript_conceal_super                = "Ω"
16. let g:javascript_conceal_arrow_function       = "⇒"
17. let g:javascript_conceal_noarg_arrow_function = " "
18. let g:javascript_conceal_underscore_arrow_function = " "
19. set conceallevel=1

（註：上述指令碼中存在特殊字元，有的情況下顯示不正確，請直接用上述連結的內容。）

React

1. Plug 'mxw/vim-jsx'
3. let g:jsx_ext_required = 0

Prettier

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

總結

最後，呈上參考配置 .vimrc[28]，如果關於 vim 有更好的 idea，歡迎在評論中交流。