一步一步教你使用vim进行前端工作

第一步、安装manjaro

详情可以参考这篇博客：

manjaro 20 KDE 配置心得

1）简单的U盘刻录安装到UEFI
2）手动分区配置 见CSDN收藏夹
3）换源、没有添加AUR的源、安装中文输入法、之后的都没有安装
4）安装了一个dock栏、设置半透明终端

第二步、配置.vimrc

以下是我的vimrc，其内容来源会在以下注释

" __  ____   __  _   ___     _____ __  __ ____   ____
"|  \/  \ \ / / | \ | \ \   / /_ _|  \/  |  _ \ / ___|
"| |\/| |\ V /  |  \| |\ \ / / | || |\/| | |_) | |
"| |  | | | |   | |\  | \ V /  | || |  | |  _ <| |___
"|_|  |_| |_|   |_| \_|  \_/  |___|_|  |_|_| \_\\____|

" Author: @Kryze

"Syntax的配置"
execute pathogen#infect()
set statusline+=%#warningmsg#
set statusline+=%{SyntasticStatuslineFlag()}
set statusline+=%*

let g:syntastic_always_populate_loc_list = 1
let g:syntastic_auto_loc_list = 1
let g:syntastic_check_on_open = 1
let g:syntastic_check_on_wq = 0

"JS语法的配置"
let g:used_javascript_libs = 'underscore,backbone'
autocmd BufReadPre *.js let b:javascript_lib_use_jquery = 1
autocmd BufReadPre *.js let b:javascript_lib_use_underscore = 1
autocmd BufReadPre *.js let b:javascript_lib_use_backbone = 1
autocmd BufReadPre *.js let b:javascript_lib_use_prelude = 0
autocmd BufReadPre *.js let b:javascript_lib_use_angularjs = 0

"vim-autoformat的配置"
map r :Autoformat<CR>
let g:autoformat_verbosemode=1
let g:formatters_python = ['autopep8']
let g:formatdef_autopep8 = "'autopep8 - --range '.a:firstline.' '.a:lastline"

"Vundle的配置"
set nocompatible              "  必需
filetype off                  " 必需
"  将运行时的路径设置为包括Vundle并初始化
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()
" 使Vuldle管理自己
Plugin 'VundleVim/Vundle.vim'
Plugin 'Chiel92/vim-autoformat'
Plugin 'othree/yajs.vim'
Plugin 'alvan/vim-closetag'
Plugin 'plasticboy/vim-markdown'
Plugin 'mattn/emmet-vim'
Plugin 'ternjs/tern_for_vim'
Plugin 'Valloric/MatchTagAlways'
Plugin 'hail2u/vim-css3-syntax'
Plugin 'gko/vim-coloresque'
Plugin 'preservim/nerdtree'
Plugin 'neoclide/coc.nvim', {'branch': 'release'}
Plugin 'dart-lang/dart-vim-plugin'
Plugin 'greyblake/vim-preview'
"你所有的插件必需在这一行之前添加
call vundle#end()            "required
filetype plugin indent on    " required



let mapleader = " "
"更改键位"
noremap u k
noremap k l
noremap e :CocCommand explorer<CR>
"tr翻译"
noremap tr :CocCommand translator.popup<CR>
"按S保存更改"
map S :w<CR>
"按s无反应"
map s <nop>
"按Q退出"
map Q :q<CR>
"自动保存"
map R :source $MYVIMRC<CR>
"按空格键加回车关闭高亮"
map <LEADER><CR> :nohlsearch<CR>
"右分屏"
map sk :set splitright<CR>:vsplit<CR>
"左分屏"
map sh :set nosplitright<CR>:vsplit<CR>
"上分屏"
map su :set nosplitbelow<CR>:split<CR>
"下分屏"
map sj :set splitbelow<CR>:split<CR>



"打开语法高亮"
syntax on
"打开行号"
set number
"打开下划线"
set cursorline
"打开自动换行"
set wrap
"打开显示指令"
set showcmd
"打开按TAB自动补全"
set wildmenu
"打开搜索高亮"
set hlsearch
"打开关闭搜索高亮"
exec "nohlsearch"
"打开边搜索边高亮"
set incsearch
"忽略大小写"
set ignorecase
"智能识别大小写"
set smartcase
"打开相对行号"
set relativenumber

call plug#begin('~/.vim/plugged')
Plug 'vim-airline/vim-airline'
Plug 'dart-lang/dart-vim-plugin'
call plug#end()

"html自动闭合标签的设置"
" filenames like *.xml, *.html, *.xhtml, ...
" These are the file extensions where this plugin is enabled.
"
let g:closetag_filenames = '*.html,*.xhtml,*.phtml'

" filenames like *.xml, *.xhtml, ...
" This will make the list of non-closing tags self-closing in the specified files.
"
let g:closetag_xhtml_filenames = '*.xhtml,*.jsx'

" filetypes like xml, html, xhtml, ...
" These are the file types where this plugin is enabled.
"
let g:closetag_filetypes = 'html,xhtml,phtml'

" filetypes like xml, xhtml, ...
" This will make the list of non-closing tags self-closing in the specified files.
"
let g:closetag_xhtml_filetypes = 'xhtml,jsx'

" integer value [0|1]
" This will make the list of non-closing tags case-sensitive (e.g. `<Link>` will be closed while `<link>` won't.)
"
let g:closetag_emptyTags_caseSensitive = 1

" dict
" Disables auto-close if not in a "valid" region (based on filetype)
"
let g:closetag_regions = {
			\ 'typescript.tsx': 'jsxRegion,tsxRegion',
			\ 'javascript.jsx': 'jsxRegion',
			\ 'typescriptreact': 'jsxRegion,tsxRegion',
			\ 'javascriptreact': 'jsxRegion',
			\ }

" Shortcut for closing tags, default is '>'
"
let g:closetag_shortcut = '>'

" Add > at current position without closing the current tag, default is ''
"
let g:closetag_close_shortcut = '<leader>>'

"html自动匹配标签的设置"
let g:mta_use_matchparen_group = 1
let g:mta_filetypes = {
			\ 'html' : 1,
			\ 'xhtml' : 1,
			\ 'xml' : 1,
			\ 'jinja' : 1,
			\}
highlight MatchTag ctermfg=black ctermbg=lightgreen guifg=black guibg=lightgreen
let g:mta_set_default_matchtag_color = 1

"CSS语法高亮插件的配置"
augroup VimCSS3Syntax
	autocmd!

	autocmd FileType css setlocal iskeyword+=-
augroup END

"coc配置"
let g:coc_global_extensions = [
			\'coc-json',
			\'coc-vimlsp',
			\'coc-marketplace',
			\ 'coc-css',
			\ 'coc-diagnostic',
			\ 'coc-explorer',
			\ 'coc-flutter-tools',
			\ 'coc-gitignore',
			\ 'coc-html',
			\ 'coc-json',
			\ 'coc-lists',
			\ 'coc-prettier',
			\ 'coc-prisma',
			\ 'coc-pyright',
			\ 'coc-python',
			\ 'coc-snippets',
			\ 'coc-sourcekit',
			\ 'coc-stylelint',
			\ 'coc-syntax',
			\ 'coc-tailwindcss',
			\ 'coc-tasks',
			\ 'coc-translator',
			\ 'coc-tslint-plugin',
			\ 'coc-tsserver',
			\ 'coc-vetur',
			\ 'coc-vimlsp',
			\ 'coc-yaml',
			\ 'coc-yank']

"设置缓冲区"
set hidden
"响应时间"
set updatetime=100
"按tab补全"
inoremap <silent><expr> <TAB>
			\ pumvisible() ? "\<C-n>" :
			\ <SID>check_back_space() ? "\<TAB>" :
			\ coc#refresh()
inoremap <expr><S-TAB> pumvisible() ? "\<C-p>" : "\<C-h>"

function! s:check_back_space() abort
	let col = col('.') - 1
	return !col || getline('.')[col - 1]  =~# '\s'
endfunction

"按K显示帮助文档"
nnoremap <silent> K :call <SID>show_documentation()<CR>

function! s:show_documentation()
	if (index(['vim','help'], &filetype) >= 0)
		execute 'h '.expand('<cword>')
	elseif (coc#rpc#ready())
		call CocActionAsync('doHover')
	else
		execute '!' . &keywordprg . " " . expand('<cword>')
	endif
endfunction

"按gd显示上一次调用函数的地方"
nmap <silent> gd <Plug>(coc-definition)
nmap <silent> gy <Plug>(coc-type-definition)
nmap <silent> gi <Plug>(coc-implementation)
nmap <silent> gr <Plug>(coc-references)

"一个有用的东西 "
function! s:cocActionsOpenFromSelected(type) abort
	execute 'CocCommand actions.open' . a:type
endfunction
xmap <silent> <leader>a :<C-u>execute 'CocCommand actions.open ' . visualmode()<CR>
nmap <silent> <leader>a :<C-u>set operatorfunc=<SID>cocActionsOpenFromSelected<CR>g@

"ctrl+space 显示补全列表"
if has('nvim')
	inoremap <silent><expr> <c-space> coc#refresh()
else
	inoremap <silent><expr> <c-@> coc#refresh()
endif


"显示html页面"
noremap ,v  :call DisplayHTML()<CR>
"vim键盘映射+vimscript函数调用

function DisplayHTML()"vimscript函数定义
	if &filetype == 'html'"vimscript条件判断
		execute 'w'"vimscript执行表达式
		execute '!firefox % &'
	endif
endfunction

1…vimrc文件的配置

1）安装了vundle 插件放在了.vim/bundle
2）安装了YouCompleteMe但是没有什么用于是被我删掉了文件夹
3）安装了syntastic，一个语法检查软件
4）通过plugin安装vim-autoformat，统一的格式化插件，不过该插件只是个框架，需要为各语言安装单独的格式化程序，配置按小写r自动格式化
5）通过plugin安装yajs.vim用于更好的js高亮（还没写过js不知道有没有用
6）通过sudo npm install -g jshint实现Syntastic默认调用其进行js语法检查 和 sudo npm install -g js-beautify默认调用其对html、js、css进行格式化
7）通过plugin安装vim-closetag实现html标签的自动闭合
8）通过plugin安装MatchTagAlways实现自动匹配html标签，支持在标签间跳转
9）通过sudo pacman -S tidy安装tidy实现Syntastic默认调用其进行html语法检查
10）通过plugin安装vim-css3-syntax和vim-coloresque实现css语法检查和颜色预览
11）通过sudo npm install -g csslint安装csslint实现Syntastic默认调用其进行css语法检查
12）目前前端功能还缺乏自动补全、浏览器预览功能

2、Bilibili TheCW vim的配置 1

1）更改键位u、j、h、k为上、下、左、右
2）看vimrc配置文件以及快捷键

3、Bilibili TheCW vim的配置 2

1）学到的都在快捷键里

4、Bilibili TheCW coc配置

1）安装coc实现自动补全
2）CocList marketplace 查看可下载插件 CocList extensions查看可用插件 CocInstall 下载插件
3）安装 Dart Support for Vim
4）安装了coc-flutter、coc-actions
5）安装了explorer

5、杂项插件的安装与配置

1）nerdtree
2）neofetch实现打开终端显示系统信息
3）安装jdk以及配置/etc/proflie文件完成java环境的配置
4）安装screenkey以显示键入的内容

快捷键：

快捷键	含义
ctrl+q	相当与windows下的alt+f4
r	自动格式化
u、j、h、k	上、下、左、右
S	保存
Q	退出
R	刷新文件
SR	保存并刷新文件
cat	查看文件
a	进入到下一个光标的写入模式，用于行尾
o	本行下一行开启新行输入
shift+o	本行上一行开启新行输入
x	删除当前光标内容
d3h	往左边删除3个字符
dd	删除一整行
p	粘贴
y3k	复制右3个字符
c	删除后并进入写出模式，相当与剪切
w	光标进入下一个词
b	光标移到上一个词
cw	删除本词
ci"	删除"里的单词
f:	找到最近的一个:
/	搜索
:split	上下分屏
:vsplit	左右分屏
v	进入可视模式，可以成块选中
V	可视模式下的整行操作
ctrl+v	可视块模式
su	上分屏
sj	下分屏
sh	左分屏
sk	右分屏
e	打开目录