點(diǎn)擊上方“開源Linux”，選擇“設(shè)為星標(biāo)”

回復(fù)“學(xué)習(xí)”獲取獨(dú)家整理的學(xué)習(xí)資料！

作者：楓上霧棋
鏈接：https://segmentfault.com/a/1190000011466454

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

本文導(dǎo)航

??安裝03%

??新手指南04%

??移動(dòng)光標(biāo)05%

??退出08%

??刪除08%

??修改10%

??撤銷11%

??復(fù)制粘貼剪切12%

??狀態(tài)13%

??查找13%

??替換15%

??折疊16%

??執(zhí)行外部命令17%

??.vimrc18%

??基本配置23%

??取消備份23%

??文件編碼23%

??顯示行號(hào)24%

??取消換行24%

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

??設(shè)置縮進(jìn)25%

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

??查找27%

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

??代碼折疊28%

??主題29%

??插件配置32%

??樹形目錄32%

??代碼，引號(hào)，路徑補(bǔ)全46%

??語法高亮，檢查50%

??文件，代碼搜索56%

??加強(qiáng)版狀態(tài)欄59%

??代碼注釋63%

??git69%

??Markdown71%

??Emmet74%

??html 576%

??css 377%

??JavaScipt82%

??React91%

??Prettier93%

??總結(jié)97%

安裝

sudo?apt-getinstall?vim//?Ubuntu

其他平臺(tái)，可以自行谷歌。

新手指南

vimtutor//?vim?教程

上面是史上最簡(jiǎn)單，最全面的Vim基礎(chǔ)教程，至今無人超越。

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

移動(dòng)光標(biāo)

#?hjkl
#?2w?向前移動(dòng)兩個(gè)單詞
#?3e?向前移動(dòng)到第?3?個(gè)單詞的末尾
#?0?移動(dòng)到行首
#?$?當(dāng)前行的末尾
#?gg?文件第一行
#?G?文件最后一行
#?行號(hào)+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ù)查找）# ？逆向查找# % 查找配對(duì)的 {，[，(# :set ic 忽略大小寫# :set noic 取消忽略大小寫# :set hls 匹配項(xiàng)高亮顯示# :set is 顯示部分匹配

替換

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

折疊

#?zc?折疊
#?zC?折疊所有嵌套
#?zo?展開折疊
#?zO?展開所有折疊嵌套

執(zhí)行外部命令

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

.vimrc

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

cd Home               // 進(jìn)入 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

其他平臺(tái)，可以查看 vim-plug^[1]。

基本配置

取消備份

set?nobackup
set?noswapfile

文件編碼

setencoding=utf-8

顯示行號(hào)

setnumber

取消換行

setnowrap

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

setruler

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

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

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

setcursorline

查找

set?ic
set?hls
set?is

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

setshowmode

代碼折疊

#啟動(dòng)?vim?時(shí)關(guān)閉折疊代碼
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 * 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 打開關(guān)閉文件或目錄# e 以文件管理的方式打開選中的目錄# t 在標(biāo)簽頁中打開# T 在標(biāo)簽頁中打開，但光標(biāo)仍然留在 NERDTree# r 刷新光標(biāo)所在的目錄# R 刷新當(dāng)前根路徑# X 收起所有目錄# p 小寫，跳轉(zhuǎn)到光標(biāo)所在的上一級(jí)路徑# P 大寫，跳轉(zhuǎn)到當(dāng)前根路徑# J 到第一個(gè)節(jié)點(diǎn)# K 到最后一個(gè)節(jié)點(diǎn)# I 顯示隱藏文件# m 顯示文件操作菜單# C 將根路徑設(shè)置為光標(biāo)所在的目錄# u 設(shè)置上級(jí)目錄為根路徑# ctrl + w + w 光標(biāo)自動(dòng)在左右側(cè)窗口切換# ctrl + w + r 移動(dòng)當(dāng)前窗口的布局位置# :tabc 關(guān)閉當(dāng)前的 tab# :tabo   關(guān)閉所有其他的 tab# :tabp   前一個(gè) tab# :tabn   后一個(gè) tab# gT      前一個(gè) tab# gt      后一個(gè) tab

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

代碼，引號(hào)，路徑補(bǔ)全

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

加強(qiáng)版狀態(tài)欄

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'
# cc // 注釋# cm 只用一組符號(hào)注釋# cA 在行尾添加注釋# c$ /* 注釋 */# cs /* 塊注釋 */# cy 注釋并復(fù)制# c 注釋/取消注釋# ca 切換　// 和 /* */# cu 取消注釋
let g:NERDSpaceDelims = 1let 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=''
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 VimCSS3Syntax  autocmd!
  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 = 1let g:javascript_plugin_ngdoc = 1let g:javascript_plugin_flow = 1set foldmethod=syntaxlet 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]
（注：上述腳本中存在特殊字符，有的情況下顯示不正確，請(qǐng)直接用上述鏈接的內(nèi)容。）

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 = 0autocmd BufWritePre *.js,*.jsx,*.mjs,*.ts,*.tsx,*.css,*.less,*.scss,*.json,*.graphql PrettierAsync# :Prettier

? prettier/vim-prettier^[27]

總結(jié)

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

[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

- End -

關(guān)注「開源Linux」加星標(biāo)，提升IT技能

打造一款高逼格的Vim神器

作者：楓上霧棋鏈接：https://segmentfault.com/a/1190000011466454

安裝