vim编辑器配置备份——前端（vue）

运行环境是Ubuntu，vim版本8.2

~/.vimrc

" 引入各种插件
source ~/.vim/myVimrc/plugIn.vim
" 基础设置
source ~/.vim/myVimrc/index.vim
" 引入按键设置
source ~/.vim/myVimrc/keySettings.vim
" 美化设置
source ~/.vim/myVimrc/themeSettings.vim
" 引入注释插件设置
source ~/.vim/myVimrc/NERDcommenter.vim
" 引入git相关配置
source ~/.vim/myVimrc/gitConfig.vim

~/.vim/myVimrc/index.vim(基础设置)

" 设置编码
set enc=utf-8
" 设置不兼容vi
set nocompatible
" 显示行号
set nu

" ctrlsf(ag)的搜索过滤文件夹
let g:ctrlsf_ignore_dir = ['bower_components', 'vendor', 'runtime', 'node_module', 'dist']

" 语法高亮使用的js库
let g:used_javascript_libs = 'jquery,react,vue'
" vue过慢问题 设置vue中语法高亮需要支持的语言
let g:vue_pre_processors = ['pug', 'scss', 'stylus', 'less']

" 撤销文件相关配置
set noswapfile
set nobackup
set undodir=~/.vim/undodir
if !isdirectory(&undodir)
  call mkdir(&undodir, 'p', 0700)
endif
"撤销文件相关配置end

" 折叠展开配置
set fdm=indent

" 光标移动导致的屏幕滚动设置(默认是6)
set scrolloff=0

" 搜索配置
let g:ctrlsf_backend='ag'

au GUIEnter * call libcallnr(“vimtweak.dll”, “SetAlpha”, 0)

" 补全设置
let g:ycm_min_num_of_chars_for_completion = 3 
let g:ycm_autoclose_preview_window_after_completion=1
let g:ycm_complete_in_comments = 1
let g:ycm_key_list_select_completion = ['<c-n>', '<Down>']
let g:ycm_key_list_previous_completion = ['<c-p>', '<Up>']

" 高亮当前行
set cursorline

" 打开基于文件类型的缩进
filetype plugin indent on

" 前端缩进配置
au BufNewFile,BufRead *.html,*.js,*.vue set tabstop=2
au BufNewFile,BufRead *.html,*.js,*.vue set softtabstop=2
au BufNewFile,BufRead *.html,*.js,*.vue set shiftwidth=2
au BufNewFile,BufRead *.html,*.js,*.vue set expandtab
au BufNewFile,BufRead *.html,*.js,*.vue set autoindent
au BufNewFile,BufRead *.html,*.js,*.vue set fileformat=unix
" 缩进配置end

set clipboard=unnamed " vim使用系统剪贴板"

~/.vim/myVimrc/keySettings.vim(按键设置)

" --------vim快捷键设置---------
" 映射空格为leader
let mapleader=" " 
" 设置鼠标模式
set mouse=v
" 切换粘贴模式
set pastetoggle=<F5>

" 复制到系统剪切板 
"vmap <C-E> "+y
" 粘贴系统剪切板到vim 
"nnoremap pp "+p
" 保存修改
map <M-s> :w<cr>
" 不使用COC的格式化保存
map <C-S> :noa w<cr>
" 打开搜索 
map <C-F> :CtrlSF
vmap <C-F> <Plug>CtrlSFVwordPath

" 映射全选+复制 ctrl+a
map <C-A> ggVG  
" map <F12> gg=G
" 切换buffer 
map <C-N> :bn<cr>
map <C-P> :bp<cr>
map <C-D> :bd<cr>"

" 自动打开左侧文件目录
autocmd VimEnter * NERDTree
" 空格+1打开文件目录
nnoremap <silent> <leader>1 :NERDTreeToggle<CR>
" 空格+f打开文件搜索
nnoremap <silent><nowait> <leader>f :LeaderfFile<CR>
" 空格+m打开历史文件列表
nnoremap <silent><nowait> <leader>m :LeaderfMru<CR>
" alt+m 清除doc格式带来的换行符
nnoremap <silent><nowait> <M-m> :%s/\r//g<CR>

" 快速缩进
vmap <Tab> >
vmap <S-Tab> <

" 添加文件抬头
map <F4> :call AddTitle()<cr>'s
" 添加功能描述
map <F3> :call AddFunctionTitle()<cr>

function AddFunctionTitle()
    call append(line(".") + 0,"/**")
    call append(line(".") + 1," * @Author: LJQ")
    call append(line(".") + 2," * @Date: ".strftime("%Y-%m-%d %H:%M"))
    call append(line(".") + 3," * @wiki: ")
    call append(line(".") + 4," * @desc: ")
    call append(line(".") + 5," * @param: {*} param0")
    call append(line(".") + 6," */")
    echohl WarningMsg | echo "Successful in adding the copyright." | echohl None
endf
function AddTitle()
   call append(0,"/**============================================================================")
    call append(1," *")
    call append(2," * Author: LJQ ")
    call append(3," *")
    call append(4," * QQ: 425180906")
    call append(5," *")
    call append(6," * Last modified: ".strftime("%Y-%m-%d %H:%M"))
    call append(7," *")
    call append(8," * Filename: ".expand("%:t"))
    call append(9," *")
    call append(10," * Description: ")
    call append(11," *")
    call append(12," ============================================================================**/")
    echohl WarningMsg | echo "Successful in adding the copyright." | echohl None
endf

~/.vim/myVimrc/themeSettings.vim(题主美化设置)

" airline 状态栏配置
let g:airline#extensions#tabline#enabled = 1
let g:airline#extensions#tabline#formatter = 'unique_tail_improved'
" theme主题设置
let g:airline_theme='bubblegum' 
" 开启真彩模式
if has("termguicolors")
    " fix bug for vim
    let &t_8f = "\<Esc>[38;2;%lu;%lu;%lum"
    let &t_8b = "\<Esc>[48;2;%lu;%lu;%lum"
    " enable true color
    set termguicolors
endif
colorscheme neodark
hi Normal guibg=NONE

~/.vim/myVimrc/NERDcommenter.vim（注释插件设置）

" vue 注释配置
let g:NERDSpaceDelims=1     " 注释后面自动加空格"
let g:ft = ''
fu! NERDCommenter_before()
  if &ft == 'vue'
    let g:ft = 'vue'
    let stack = synstack(line('.'), col('.'))
    if len(stack) > 0
      let syn = synIDattr((stack)[0], 'name')
      if len(syn) > 0
        let syn = tolower(syn)
        exe 'setf '.syn
      endif
    endif
  endif
endfu
fu! NERDCommenter_after()
  if g:ft == 'vue'
    setf vue
    let g:ft = ''
  endif
endfu

~/.vim/myVimrc/gitConfig.vim（git样式等相关设置）

" git文件行号使用
let g:gitgutter_max_signs = 100
let g:gitgutter_preview_win_floating = 1
set signcolumn=yes
nmap ghp <Plug>(GitGutterPreviewHunk)
highlight SignColumn guibg=NONE ctermbg=NONE
highlight GitGutterAdd    guifg=#009900 ctermfg=2 ctermbg=0
highlight GitGutterChange guifg=#bbbb00 ctermfg=3 ctermbg=0
highlight GitGutterDelete guifg=#ff2222 ctermfg=1 ctermbg=0

~/.vim/myVimrc/plugIn.vim（引入插件设置）

" plug下载插件
call plug#begin()
Plug 'SirVer/ultisnips' " 代码片段补全
Plug 'honza/vim-snippets' " 代码补全
Plug 'Yggdroot/LeaderF' " 文件搜索
Plug 'airblade/vim-gitgutter' " 打开文件后在符号行显示git diff
Plug 'airblade/vim-rooter' " 打开文件时会将项目的根目录设为当前的根目录
Plug 'boydos/emmet-vim' " 补全html插件
Plug 'dyng/ctrlsf.vim' " 项目中全局搜索代码片段插件
Plug 'rking/ag.vim' "  全局搜索的支持插件
Plug 'neoclide/coc.nvim', {'branch': 'release'} " coc插件安装器(会启用node用来运行一些类似vscode中的插件)
Plug 'posva/vim-vue'  " vue的语法高亮
Plug 'scrooloose/nerdcommenter' " 提供快速注释功能
Plug 'spf13/vim-autoclose' " 为一些符号提供自动结束的功能，如(|) 括号中的|是光标位置
Plug 'alvan/vim-closetag'  " 为html的标签提供自动关闭
Plug 'tpope/vim-fugitive' " git合并插件，按需下载，我直接vscode进行合并分钟操作。。。
Plug 'vim-airline/vim-airline' " 提供vim的底部状态栏
Plug 'vim-airline/vim-airline-themes' " 提供状态栏的主题
Plug 'johngrib/vim-game-code-break' " vim中的小游戏插件
Plug 'KeitaNakamura/neodark.vim' " vim主题
Plug 'yianwillis/vimcdoc' " vim的中文文档
Plug 'preservim/nerdtree', { 'on':  'NERDTreeToggle' } " 提供文件树插件
Plug 'Xuyuanp/nerdtree-git-plugin' " 为nerdtree提供git状态
Plug 'ryanoasis/vim-devicons' " 为nerdtree等插件添加一些特殊符号的支持
Plug 'othree/yajs.vim' " 新的js语法支持
Plug 'tpope/vim-surround' " 提供快速更换环绕符号
Plug 'codota/tabnine-vim' " Ai代码补全
Plug 'othree/html5.vim' " H5的语法支持
call plug#end()

" coc插件自动安装
let g:coc_global_extensions = ['coc-sh', 'coc-rome', 'coc-prettier', 'coc-json', 'coc-html-css-support', 'coc-html', 'coc-cssmodules', '@yaegassy/coc-volar','@yaegassy/coc-volar-tools','coc-tsserver', 'coc-htmlhint', 'coc-htmldjango', 'coc-css']

注意事项

1. 这里使用了vim-plug安装插件，首先需要先把plug.vim放在~/.vim/autoload/目录下,neovim参考vim-plug的文档直接安装即可，安装完毕之后进入vim可能报错，输入:PlugInstall进行插件的安装，安装完毕进行重启即可看见效果。
2. 你得先安装一个yarn，Coc依赖npm库。
3. 打通windos与Ubuntu的剪切板。
   • 安装 VcXsrV （安装后先不要启动）。
   • 在 WSL 系统的 ~/.bashrc(我使用的zsh，修改的是.zshrc文件) 文件中添加export DISPLAY=localhost:0.0，并且在终端运行 source ~/.bashrc。
   • 如果没有剪贴版支持，你需要安装剪贴板支持，执行sudo apt install vim-gtk。
4. 使用全局搜索时需要用到ag，执行sudo apt install silversearcher-ag。
5. Coc的配置(vim中键入:CocConfig)

{
  // 保存自动格式化
  "coc.preferences.formatOnSaveFiletypes": [
    "javascript",
    "typescript",
    "typescriptreact",
    "json",
    "javascriptreact",
    "typescript.tsx",
    "css",
    "Markdown",
    "less",
    "sass",
    "scss",
    "stylus",
    "html",
    "vue"
  ],
  // 验证语法的语言
  "eslint.filetypes": [
    "javascript",
    "typescript",
    "typescriptreact",
    "javascriptreact",
    "typescript.tsx",
    "scss",
    "vue",
    "stylus"
  ],
  // 详见prettier和eslint的文档自行配置
  "prettier.disableLanguages": [],
  "prettier.eslintIntegration": false,
  "eslint.autoFixOnSave": false,
  "prettier.useTabs": false,
  "prettier.semi": true,
  "prettier.singleQuote": true,
  "prettier.proseWrap": "preserve",
  "prettier.arrowParens": "always",
  "vetur.ignoreProjectWarning": true
}