IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 开发工具 -> vim编辑器配置备份——前端(vue) -> 正文阅读

[开发工具]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"
}
  开发工具 最新文章
Postman接口测试之Mock快速入门
ASCII码空格替换查表_最全ASCII码对照表0-2
如何使用 ssh 建立 socks 代理
Typora配合PicGo阿里云图床配置
SoapUI、Jmeter、Postman三种接口测试工具的
github用相对路径显示图片_GitHub 中 readm
Windows编译g2o及其g2o viewer
解决jupyter notebook无法连接/ jupyter连接
Git恢复到之前版本
VScode常用快捷键
上一篇文章      下一篇文章      查看所有文章
加:2021-08-10 13:38:21  更:2021-08-10 13:40:14 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/20 15:15:27-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码