[开发工具]vim编辑器配置备份——前端（vue）

运行环境是Ubuntu，vim版本8.2

~/.vimrc

"  映射空格键 部分键位要用
let mapleader="\<space>"
" 设置编码
set enc=utf-8
" 不兼容vi
set nocompatible
" 显示行号
set nu
" plug开始下载插件
call plug#begin()
Plug 'SirVer/ultisnips'
Plug 'Yggdroot/LeaderF'
Plug 'airblade/vim-gitgutter'
Plug 'airblade/vim-rooter'
Plug 'boydos/emmet-vim'
Plug 'dyng/ctrlsf.vim'
Plug 'honza/vim-snippets'
Plug 'neoclide/coc.nvim', {'branch': 'master', 'do': 'yarn install --frozen-lockfile'}
Plug 'posva/vim-vue'
Plug 'rking/ag.vim'
Plug 'ryanoasis/vim-devicons'
Plug 'scrooloose/nerdcommenter'
Plug 'scrooloose/nerdtree'
Plug 'Xuyuanp/nerdtree-git-plugin'
Plug 'spf13/vim-autoclose'
Plug 'alvan/vim-closetag'
Plug 'tpope/vim-fugitive'
Plug 'vim-airline/vim-airline'
Plug 'vim-airline/vim-airline-themes'
Plug 'johngrib/vim-game-code-break'
Plug 'KeitaNakamura/neodark.vim'
Plug 'yianwillis/vimcdoc'
Plug 'scrooloose/nerdtree', { 'on':  'NERDTreeToggle' }
Plug 'SirVer/ultisnips' 
Plug 'honza/vim-snippets' 
Plug 'othree/yajs.vim'
Plug 'tpope/vim-surround'
Plug 'codota/tabnine-vim'
Plug 'othree/html5.vim'
call plug#end()
source $VIMRUNTIME/vimrc_example.vim

" 引入按键设置
source ~/.vim/myVimrc/keySettings.vim
" 美化设置
source ~/.vim/myVimrc/themeSettings.vim
" 基础设置
source ~/.vim/myVimrc/index.vim

" 前端缩进配置
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

" vue 注释配置
let g:ft = ''
function! 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
        exe 'setf ' . substitute(tolower(syn), '^vue_', '', '')
      endif
    endif
  endif
endfunction
function! NERDCommenter_after()
  if g:ft == 'vue'
    setf vue 
    let g:ft = ''
  endif 
endfunction

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

~/.vim/myVimrc/index.vim

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

" 设置使用的js库
let g:used_javascript_libs = '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>']
" 比较喜欢用tab来选择补全...
function! MyTabFunction ()
    let line = getline('.')
    let substr = strpart(line, -1, col('.')+1)
    let substr = matchstr(substr, "[^ \t]*$")
    if strlen(substr) == 0
        return "\<tab>"
    endif
    return pumvisible() ? "\<c-n>" : "\<c-x>\<c-o>"
endfunction
" inoremap <tab> <c-r>=MyTabFunction()<cr>

let g:UltiSnipsExpandTrigger="<tab>"

~/.vim/myVimrc/keySettings.vim

" --------vim快捷键设置---------
" 设置鼠标模式
set mouse=v
" 切换粘贴模式
set pastetoggle=<F5>

" 复制到系统剪切板 
"vmap <C-E> "+y
" 粘贴系统剪切板到vim 
"nnoremap pp "+p
" 保存修改
map <C-S> :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> <

~/.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' 

1. 这里使用了vim-plug安装插件，首先需要先把plug.vim放在~/.vim/autoload/目录下
2. 你得先安装一个yarn，Coc依赖npm库
3. 打通windos与Ubuntu的剪切板
   • 安装 VcXsrV （安装后先不要启动）
   • 在 WSL 系统的 ~/.bashrc(我使用的zsh，修改的是.zshrc文件) 文件中添加 exprot
     DISPLAY=localhost:0.0，并且在终端运行 source ~/.bashrc
   • 如果没有剪贴版支持，你需要安装剪贴板支持，在终端运行sudo apt install vim-gtk
4. Coc安装插件
   • 在vim中运行:CocInstall coc-sh coc-rome coc-prettier coc-json coc-html-css-support coc-html coc-cssmodules coc-vetur coc-tsserver coc-htmlhint coc-htmldjango coc-css ,安装所需插件
5. Coc的配置

{
  // 保存自动格式化
  "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": "avoid"
}