@H_502_1@
@H_502_1@
@H_502_1@
@H_502_1@
@H_502_1@
本文导航安装 03%新手指南 04%移动光标 05%退出 08%删除 08%修改 10%撤销 11%复制粘贴剪切 12%状态 13%查找 13%替换 15%折叠 16%执行外部命令 17%.vimrc 18%基本配置 23%取消备份 23%文件编码 23%显示行号 24%取消换行 24%显示光标当前位置 25%设置缩进 25%突出显示当前行 26%查找 27%左下角显示当前 vim 模式 27%代码折叠 28%主题 29%插件配置 32%树形目录 32%代码，引号，路径补全 46%语法高亮，检查 50%文件，代码搜索 56%加强版状态栏 59%代码注释 63%git 69%Markdown 71%Emmet 74%html 5 76%css 3 77%JavaScipt 82%React 91%Prettier 93%总结 97% 转载自 | https://segmentfault.com/a/1190000011466454 @H_502_1@ 作者 | SF / 枫上雾棋Vim 是一个上古神器，本篇文章主要持续总结使用 Vim 的过程中不得不了解的一些指令和注意事项，以及持续分享一个前端工作者不得不安装的一些插件，而关于 Vim 的简介，主题的选择，以及为何使用 vim-plug 来管理插件等内容，有兴趣的同学下来可以自己了解和对比下。
安装
sudoapt-getinstallvim//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：相反方向继续查找）#？逆向查找#%查找配对的{，[，(#:setic忽略大小写#:setnoic取消忽略大小写#:sethls匹配项高亮显示#:setis显示部分匹配
替换
#:s/old/new替换该行第一个匹配串#:s/old/new/g替换全行的匹配串#:%s/old/new/g替换整个文件的匹配串
折叠
#zc折叠#zC折叠所有嵌套#zo展开折叠#zO展开所有折叠嵌套
执行外部命令
#:!shell执行外部命令
.vimrc
.vimrc是 Vim 的配置文件，需要我们自己创建：
cdHome//进入Home目录touch.vimrc//配置文件#Unix#vim-plug#Vimcurl-fLo~/.vim/autoload/plug.vim--create-dirshttps://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim#Neovimcurl-fLo~/.local/share/nvim/site/autoload/plug.vim--create-dirshttps://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
其他平台，可以查看vim-plug[1]。
基本配置
取消备份
setnobackupsetnoswapfile
文件编码
setencoding=utf-8
显示行号
setnumber
取消换行
setnowrap
显示光标当前位置
setruler
设置缩进
setcindentsettabstop=2setshiftwidth=2
突出显示当前行
setcursorline
seticsethlssetis
左下角显示当前 vim 模式
setshowmode
代码折叠
#启动vim时关闭折叠代码setnofoldenable
Syntaxenablesetbackground=darkcolorschemesolarizedaltercation/vim-colors-solarized [2] Anthony25/gnome-terminal-colors-solarized [3]
插件配置
树形目录
Plug'scrooloose/nerdtree'Plug'jistr/vim-nerdtree-tabs'Plug'Xuyuanp/nerdtree-git-plugin'autocmdvimenter*NERDTreemap<C-n>:NERDTreeToggle<CR>letNERDTreeShowHidden=1letg:NERDTreeShowIgnoredStatus=1letg:nerdtree_tabs_open_on_console_startup=1letg:NERDTreeIndicatorMapCustom={"Modified":"","Staged":"","Untracked":"","Renamed":"","Unmerged":"�T","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'letg:ale_linters={'javascript':['eslint'],'css':['stylelint'],}letg:ale_fixers={'javascript':['eslint'],}letg:ale_fix_on_save=1letg:ale_sign_column_always=1letg:ale_sign_error='●'letg: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'letg: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取消注释letg:NERDSpaceDelims=1letg:NERDDefaultAlign='left'letg: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'letg:instant_markdown_slow=1letg:instant_markdown_autostart=0#:InstantMarkdownPreviewsuan/vim-instant-markdown [20]
Emmet
Plug'mattn/emmet-vim'letg:user_emmet_leader_key='<Tab>'letg: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'augroupVimCSS3Syntaxautocmd!autocmdFileTypecsssetlocaliskeyword+=-augroupENDhail2u/vim-css3-Syntax [23] ap/vim-css-color [24]
JavaScipt
Plug'pangloss/vim-javascript'letg:javascript_plugin_jsdoc=1letg:javascript_plugin_ngdoc=1letg:javascript_plugin_flow=1setfoldmethod=Syntaxletg:javascript_conceal_function=""letg:javascript_conceal_null=""letg:javascript_conceal_this="@"letg:javascript_conceal_return=""letg:javascript_conceal_undefined=""letg:javascript_conceal_NaN=""letg:javascript_conceal_prototype=""letg:javascript_conceal_static=""letg:javascript_conceal_super="Ω"letg:javascript_conceal_arrow_function=""letg:javascript_conceal_noarg_arrow_function=""letg:javascript_conceal_underscore_arrow_function=""setconceallevel=1pangloss/vim-javascript [25]
（注：上述脚本中存在特殊字符，有的情况下显示不正确，请直接用上述链接的内容。）
React
Plug'mxw/vim-jsx'letg:jsx_ext_required=0mxw/vim-jsx [26]
Prettier
Plug'prettier/vim-prettier',{'do':'yarninstall','for':['javascript','typescript','css','less','scss','json','graphql']}letg:prettier#config#bracket_spacing='true'letg:prettier#config#jsx_bracket_same_line='false'letg:prettier#autoformat=0autocmdBufWritePre*.js,*.jsx,*.mjs,*.ts,*.tsx,*.css,*.less,*.scss,*.json,*.graphqlPrettierAsync#:Prettier
prettier/vim-prettier
[27]
总结
最后，呈上参考配置.vimrc[28]，如果关于vim有更好的idea，欢迎在评论中交流。
原文链接：https://www.f2er.com/bash/389910.html