如何讓 vim 成為我們的神器

01-30

Vim 是一個上古神器，剛剛接觸的同學可能很難駕馭，本篇文章主要帶領大家 快速入門，並 持續分享 當前流行的一些 vim-plugin

sudo apt-get install vim // Ubuntun

其他平台，可以自行谷歌

新手指南

vimtutor // vim 教程n

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

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

`移動游標`

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

`退出`

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

`刪除`

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

`修改`

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

`撤銷`

# u 撤銷n# <ctrl>+r 取消撤銷n

`複製粘貼剪切`

# v 進入可視模式n# y 複製n# p 粘貼n# yy 複製當前行n# dd 剪切當前行n

`文件`

# :e! 強制刷新該文件n# <ctrl>+g 顯示當前行以及文件信息n

`查找`

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

`替換`

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

`摺疊`

# zc 摺疊n# zC 摺疊所有嵌套n# zo 展開摺疊n# zO 展開所有摺疊嵌套n

`執行外部命令`

# :!shell 執行外部命令n

`字體`

# <ctrl> - 縮小n# <ctrl> shift + 放大n# <ctrl> 0 還原n

.vimrc

.vimrc 是 Vim 的配置文件，需要我們自己創建

cd Home // 進入 Home 目錄ntouch .vimrc // 配置文件nn# Unixn# vim-plugn# Vimncurl -fLo ~/.vim/autoload/plug.vim --create-dirs n https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vimn# Neovimncurl -fLo ~/.local/share/nvim/site/autoload/plug.vim --create-dirs n https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vimn

其他平台，可以查看 vim-plug

基本配置

`取消備份`

set nobackupnset noswapfilen

`文件編碼`

set encoding=utf-8n

`查找`

set icnset hlsnset isn

`顯示行號`

set numbern

`顯示游標當前位置`

set rulern

`設置縮進`

set cindentnnset tabstop=2nset shiftwidth_=2n

`突出顯示當前行`

set cursorlinen

`左下角顯示當前 vim 模式`

set showmoden

`代碼摺疊`

set nofoldenablen

`主題`

syntax enablenset background=darkncolorscheme solarizedn

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

插件配置

`樹形目錄`

Plug scrooloose/nerdtreenPlug jistr/vim-nerdtree-tabsnPlug Xuyuanp/nerdtree-git-pluginnnautocmd vimenter * NERDTreenmap <C-n> :NERDTreeToggle<CR>nlet NERDTreeMinimalUI = 1nlet NERDTreeShowHidden = 1nnlet g:nerdtree_tabs_open_on_console_startup = 1nlet g:nerdtree_tabs_focus_on_files = 1nnlet g:NERDTreeIndicatorMapCustom = {n "Modified" : "?",n "Staged" : "?",n "Untracked" : "?",n "Renamed" : "?",n "Unmerged" : "═",n "Deleted" : "?",n "Dirty" : "?",n "Clean" : "??",n Ignored : ?,n "Unknown" : "?"n }nn# o 打開關閉文件或目錄n# e 以文件管理的方式打開選中的目錄n# t 在標籤頁中打開n# T 在標籤頁中打開，但游標仍然留在 NERDTreen# r 刷新游標所在的目錄n# R 刷新當前根路徑n# X 收起所有目錄n# p 小寫，跳轉到游標所在的上一級路徑n# P 大寫，跳轉到當前根路徑n# J 到第一個節點n# K 到最後一個節點n# I 顯示隱藏文件n# m 顯示文件操作菜單n# C 將根路徑設置為游標所在的目錄n# u 設置上級目錄為根路徑n# ctrl + w + w 游標自動在左右側窗口切換n# ctrl + w + r 移動當前窗口的布局位置n# :tabc 關閉當前的 tabn# :tabo 關閉所有其他的 tabn# :tabp 前一個 tabn# :tabn 後一個 tabn# gT 前一個 tabn# gt 後一個 tabn

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

`代碼，引號，路徑補全`

Plug Valloric/YouCompleteMenPlug Raimondi/delimitMatenPlug Shougo/deoplete.nvim, { do: :UpdateRemotePlugins }n

Valloric/YouCompleteMe
Raimondi/delimitMate
Shougo/deoplete.nvim

`語法高亮，檢查`

Plug sheerun/vim-polyglotnPlug w0rp/alennlet g:ale_linters = {n javascript: [eslint],n css: [stylelint],n}nlet g:ale_fixers = {n javascript: [eslint],n css: [stylelint],n}nlet g:ale_fix_on_save = 1nnlet g:ale_sign_column_always = 1nlet g:ale_sign_error = ●nlet g:ale_sign_warning = ?nnnmap <silent> <C-k> <Plug>(ale_previous_wrap)nnmap <silent> <C-j> <Plug>(ale_next_wrap)n

w0rp/ale
sheerun/vim-polyglot

`文件，代碼搜索，打開最近打開的文件`

Plug rking/ag.vimnPlug kien/ctrlp.vimnPlug vim-scripts/mru.vimnnlet g:ag_highlight=1nlet g:ag_working_path_mode="r"nn# :Ag! contentnnset wildignore+=*.zip,*.exennlet g:ctrlp_map = <c-p>nlet g:ctrlp_custom_ignore = {n dir: v[/](node_modules|DS_Store|dist|build|coverage)|(.(git|hg|svn)$),n file: v.(exe|so|dll)$,n }nn# <c-r>: 切換匹配模式n# <c-t> or <c-v>, <c-x>：在新的 tab 中打開nnlet MRU_Exclude_Files = ^/tmp/.*|^/var/tmp/.*nlet MRU_Window_Height = 15nn# :MRUn

kien/ctrlp.vim
ggreer/the_silver_searcher
rking/ag.vim
vim-scripts/mru.vim

`加強版狀態欄`

Plug itchyny/lightline.vimnnlet g:lightline = {n colorscheme: powerline,n active: {n left: [ [ mode, paste ],n [ gitbranch, readonly, filename, modified, helloworld ] ],n right: [ [ lineinfo ],n [ percent ],n [ fileformat, fileencoding, filetype ] ]n },n component: {n helloworld: Hello, 楓上霧棋!n },n component_function: {n gitbranch: fugitive#headn },n }n

itchyny/lightline.vim

`代碼注釋`

Plug scrooloose/nerdcommenternn# <leader>c<space> 注釋/取消注釋n# <leader>cc // 注釋n# <leader>cm 只用一組符號注釋n# <leader>cA 在行尾添加註釋n# <leader>c$ /* 注釋 */n# <leader>cs /* 塊注釋 */n# <leader>cy 注釋並複製n# <leader>ca 切換　// 和 /* */n# <leader>cu 取消注釋nnlet g:NERDSpaceDelims = 1nlet g:NERDDefaultAlign = leftnlet g:NERDCustomDelimiters = {n javascript: { left: //, leftAlt: /**, rightAlt: */ },n less: { left: /**, right: */ }n }nnlet g:NERDAltDelims_javascript = 1nlet g:NERDDefaultNesting = 0n

scrooloose/nerdcommenter

`git`

Plug airblade/vim-gitgutternPlug tpope/vim-fugitiven

airblade/vim-gitgutter
tpope/vim-fugitive

`Markdown`

Plug suan/vim-instant-markdownnPlug junegunn/goyo.vimnPlug amix/vim-zenroom2nnlet g:instant_markdown_slow = 1nlet g:instant_markdown_autostart = 0n# :InstantMarkdownPreviewnn# :Goyon

suan/vim-instant-markdown
junegunn/goyo.vim
amix/vim-zenroom2

`Emmet`

Plug mattn/emmet-vimnnlet g:user_emmet_leader_key=<C-Z>nlet g:user_emmet_settings = {n javascript.jsx : {n extends : jsx,n },n }n

mattn/emmet-vim

`html 5`

Plug othree/html5.vimn

othree/html5.vim

`css 3`

Plug hail2u/vim-css3-syntaxnPlug ap/vim-css-colornnaugroup VimCSS3Syntaxn autocmd!nn autocmd FileType css setlocal iskeyword+=-naugroup ENDn

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

`JavaScipt`

Plug pangloss/vim-javascriptnnlet g:javascript_plugin_jsdoc = 1nlet g:javascript_plugin_ngdoc = 1nlet g:javascript_plugin_flow = 1nset foldmethod=syntaxnlet g:javascript_conceal_function = "?"nlet g:javascript_conceal_null = "?"nlet g:javascript_conceal_this = "@"nlet g:javascript_conceal_return = "?"nlet g:javascript_conceal_undefined = "?"nlet g:javascript_conceal_NaN = "?"nlet g:javascript_conceal_prototype = "?"nlet g:javascript_conceal_static = "?"nlet g:javascript_conceal_super = "Ω"nlet g:javascript_conceal_arrow_function = "?"nlet g:javascript_conceal_noarg_arrow_function = "??"nlet g:javascript_conceal_underscore_arrow_function = "??"nset conceallevel=1n

pangloss/vim-javascript

`React`

Plug mxw/vim-jsxnnlet g:jsx_ext_required = 0n

mxw/vim-jsx

`Prettier`

Plug prettier/vim-prettier, {n do: yarn install,n for: [javascript, typescript, css, less, scss, json, graphql] }nnlet g:prettier#config#bracket_spacing = truenlet g:prettier#config#jsx_bracket_same_line = falsenlet g:prettier#config#trailing_comma = es5nlet g:prettier#autoformat = 0nautocmd BufWritePre *.js,*.jsx,*.mjs,*.ts,*.tsx,*.css,*.less,*.scss,*.json,*.graphql PrettierAsyncnn# :Prettiern

prettier/vim-prettier

`自動規範化中文排版`

Plug hotoo/pangu.vimnn# :Pangun

hotoo/pangu.vim

總結

最後，呈上參考配置 .vimrc，如果在直接使用配置文件安裝的過程中遇到什麼報錯，不要驚慌，可能是相關插件需要什麼依賴，查看相關插件官方文檔安裝便是

關於 vim 有更好的 idea，歡迎在評論中交流