专属于你自己的vim 神器的打造方式

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=darkcolorschemesolarized

插件配置

树形目录

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

代码，引号，路径补全

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

语法高亮，检查

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)

文件，代码搜索

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

加强版状态栏

Plug'vim-airline/vim-airline'Plug'vim-airline/vim-airline-themes'letg:airline_theme='papercolor'

代码注释

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':'*/'}}

git

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

Markdown

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

Emmet

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

html 5

Plug'othree/html5.vim'

css 3

Plug'hail2u/vim-css3-syntax'Plug'ap/vim-css-color'augroupVimCSS3Syntaxautocmd!autocmdFileTypecsssetlocaliskeyword+=-augroupEND

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=1

（注：上述脚本中存在特殊字符，有的情况下显示不正确，请直接用上述链接的内容。）

React

Plug'mxw/vim-jsx'letg:jsx_ext_required=0

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

总结

最后，呈上参考配置.vimrc[28]，如果关于vim有更好的idea，欢迎在评论中交流。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!