作者：楓上霧棋

鏈接：https://segmentfault.com/a/1190000011466454

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

本文導航

??安裝03%

??新手指南04%

??移動光標05%

??退出08%

??刪除08%

??修改10%

??撤銷11%

??復制粘貼剪切12%

??狀態13%

??查找13%

??替換15%

??折疊16%

??執行外部命令17%

??.vimrc18%

??基本配置23%

??取消備份23%

??文件編碼23%

??顯示行號24%

??取消換行24%

??顯示光標當前位置25%

??設置縮進25%

??突出顯示當前行26%

??查找27%

??左下角顯示當前 vim 模式27%

??代碼折疊28%

??主題29%

??插件配置32%

??樹形目錄32%

??代碼，引號，路徑補全46%

??語法高亮，檢查50%

??文件，代碼搜索56%

??加強版狀態欄59%

??代碼注釋63%

??git69%

??Markdown71%

??Emmet74%

??html 576%

??css 377%

??JavaScipt82%

??React91%

??Prettier93%

??總結97%

安裝

sudo?apt-getinstall?vim//?Ubuntu

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

新手指南

vimtutor//?vim?教程

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

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

移動光標

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

退出

#?<esc>?進入正常模式 #?:q!?不保存退出 #?:wq?保存后退出

刪除

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

修改

#?i?插入文本 #?A?當前行末尾添加 #?r?替換當前字符 #?o?打開新的一行并進入插入模式

撤銷

#?u?撤銷 #?<ctrl>+r?取消撤銷 復制粘貼剪切 #?v?進入可視模式 #?y?復制 #?p?粘貼 #?yy?復制當前行 #?dd?剪切當前行

狀態

#<ctrl>+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 #?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

顯示光標當前位置

setruler

設置縮進

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

突出顯示當前行

setcursorline

查找

set?ic set?hls set?is

左下角顯示當前vim模式

setshowmode

代碼折疊

#啟動?vim?時關閉折疊代碼 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?<C-n>?:NERDTreeToggle<CR> 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?打開關閉文件或目錄 #?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

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

代碼，引號，路徑補全

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?=?1let?g:ale_sign_column_always?=?1 let?g:ale_sign_error?=?'●' let?g:ale_sign_warning?=?'?'nmap?<silent>?<C-k>?<Plug>(ale_previous_wrap) nmap?<silent>?<C-j>?<Plug>(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]

加強版狀態欄

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'#?<leader>cc?//?注釋 #?<leader>cm?只用一組符號注釋 #?<leader>cA?在行尾添加注釋 #?<leader>c$?/*?注釋?*/ #?<leader>cs?/*?塊注釋?*/ #?<leader>cy?注釋并復制 #?<leader>c<space>?注釋/取消注釋 #?<leader>ca?切換　//?和?/*?*/ #?<leader>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='<Tab>' 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?VimCSS3Syntaxautocmd!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]
（注：上述腳本中存在特殊字符，有的情況下顯示不正確，請直接用上述鏈接的內容。）

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]

總結

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

---

[1]: https://github.com/junegunn/vim-plug
[2]: https://github.com/altercation/vim-colors-solarized
[3]: https://github.com/Anthony25/gnome-terminal-colors-solarized
[4]: https://github.com/scrooloose/nerdtree
[5]: https://github.com/jistr/vim-nerdtree-tabs
[6]: https://github.com/Xuyuanp/nerdtree-git-plugin
[7]: https://github.com/Valloric/YouCompleteMe
[8]: https://github.com/Raimondi/delimitMate
[9]: https://github.com/Shougo/deoplete.nvim
[10]: https://github.com/w0rp/ale
[11]: https://github.com/sheerun/vim-polyglot
[12]: https://github.com/kien/ctrlp.vim
[13]: https://github.com/ggreer/the_silver_searcher
[14]: https://github.com/rking/ag.vim
[15]: https://github.com/vim-airline/vim-airline
[16]: https://github.com/vim-airline/vim-airline-themes
[17]: https://github.com/scrooloose/nerdcommenter
[18]: https://github.com/airblade/vim-gitgutter
[19]: https://github.com/tpope/vim-fugitive
[20]: https://github.com/suan/vim-instant-markdown
[21]: https://github.com/mattn/emmet-vim
[22]: https://github.com/othree/html5.vim
[23]: https://github.com/hail2u/vim-css3-syntax
[24]: https://github.com/ap/vim-css-color
[25]: https://github.com/pangloss/vim-javascript
[26]: https://github.com/mxw/vim-jsx
[27]: https://github.com/prettier/vim-prettier
[28]: https://github.com/FengShangWuQi/to-vim/blob/master/.vimrc

由于微信平臺算法改版，公號內容將不再以時間排序展示，如果大家想第一時間看到我們的推送，強烈建議星標我們和給我們多點點【在看】。星標具體步驟為：（1）點擊頁面最上方“小詹學Python”，進入公眾號主頁。 （2）點擊右上角的小點點，在彈出頁面點擊“設為星標”，就可以啦。 感謝支持，比心。

總結

以上是生活随笔為你收集整理的肝！打造一款高逼格的Vim神器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。