如何讓 Vim 成為我們的神器?

• 2019 年 10 月 25 日
• 筆記

安裝

sudo apt-get install vim  // Ubuntu

新手指南

vimtutor  // 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 替換整個文件的匹配串

執行外部命令

# :!shell 執行外部命令

.vimrc

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

基本配置

取消備份

set nobackup  set noswapfile

文件編碼

set encoding=utf-8

顯示行號

set number

取消換行

set nowrap

顯示游標當前位置

set ruler

設置縮進

set cindent    set tabstop=2  set shiftwidth=2

突出顯示當前行

set cursorline

左下角顯示當前vim模式

set showmode

程式碼摺疊

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

主題

syntax enable  set background=dark  colorscheme solarized

• altercation/vim-colors-solarized
• Anthony25/gnome-terminal-colors-solarized

插件配置

樹形目錄

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 刷新當前根路徑  # I 顯示隱藏文件  # C 將根路徑設置為游標所在的目錄  # u 設置上級目錄為根路徑  # ctrl + w + w 游標自動在左右側窗口切換  # ctrl + w + r 移動當前窗口的布局位置  # :tabc 關閉當前的 tab  # :tabo   關閉所有其他的 tab  # :tabp   前一個 tab  # :tabn   後一個 tab  # gT      前一個 tab  # gt      後一個 tab

• scrooloose/nerdtree
• vim-nerdtree-tabs
• nerdtree-git-plugin

程式碼，引號，路徑補全

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

• Valloric/YouCompleteMe
• Raimondi/delimitMate
• Shougo/deoplete.nvim

語法高亮，檢查

Plug 'sheerun/vim-polyglot'  Plug 'w0rp/ale', {     'do': 'yarn install',     'for': ['javascript', 'typescript', 'css', 'less', 'scss', 'json', 'graphql']   }    let g:ale_fixers = {      'javascript': ['eslint'],  }  let g:ale_fix_on_save = 1  let g:ale_sign_error = '●'  let g:ale_sign_warning = '▶'

• w0rp/ale
• sheerun/vim-polyglot

文件，程式碼搜索

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

• kien/ctrlp.vim
• ggreer/thesilversearcher
• rking/ag.vim

加強版狀態欄

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

• vim-airline/vim-airline
• vim-airline/vim-airline-themes

程式碼注釋

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

git

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

• airblade/vim-gitgutter
• tpope/vim-fugitive

Markdown

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

• suan/vim-instant-markdown

Emmet

Plug 'mattn/emmet-vim'    let g:user_emmet_leader_key='<Tab>'  let g:user_emmet_settings = {            'javascript.jsx' : {               'extends' : 'jsx',           },            }

• mattn/emmet-vim

html 5

Plug 'othree/html5.vim'

• 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

• hail2u/vim-css3-syntax
• ap/vim-css-color

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

React

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

• mxw/vim-jsx

Prettier

Plug 'prettier/vim-prettier'

• prettier/vim-prettier

總結

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