在之前的 《在win10的WSL中设置前端开发环境》 一文中,介绍了 win10 结合其 linux 子系统(WSL)的前端开发设置,使用的是 VSCode 开发工具。
而在某些情况下,出于追求工具轻量化、减轻系统负担,或应付临时开发场景等目的,只需要简单设置一下终端 vim 开发环境,借助各种强大成熟的插件,也能达到八九不离十的效果。
话不多说,直接上干货~
最终效果
在 WSL (Ubuntu 18.04) 终端中:
安装 neovim 和插件管理器
顺带也标示了一些mac下的设置方法,基本可以通用
注:如果未翻,可能要先访问 site.ip138.com/raw.Githubu… 查一下第一个ip放到hosts中, 如:151.101.108.133 raw.githubusercontent.com
ruby
# coc等插件只支持0.3及以上的版本,因此需要安装unstable版 sudo add-apt-repository ppa:neovim-ppa/unstable sudo apt update sudo apt install -y neovim sudo apt-get install tmux # 对比:mac的方法 brew install neovim brew update brew upgrade neovim brew install tmux # 检查版本 nvim --version # mac 要 sudo curl -fLo ~/.local/share/nvim/site/autoload/plug.vim --create-dirs https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim mkdir ~/.config/nvim
编辑配置文件
~/.config/nvim/init.vim
:
vim
call plug#begin("~/.vim/plugged") Plug 'dracula/vim' Plug 'posva/vim-vue' Plug 'sheerun/vim-polyglot' Plug 'leafgarland/typescript-vim' Plug 'peitalin/vim-jsx-typescript' Plug 'preservim/nerdtree' Plug 'junegunn/fzf', { 'dir': '~/.fzf', 'do': './install --all' } Plug 'junegunn/fzf.vim' Plug 'editorconfig/editorconfig-vim' Plug 'neoclide/coc.nvim', {'branch': 'release'} Plug 'preservim/nerdcommenter' Plug 'ryanoasis/vim-devicons' call plug#end() "coc插件 let g:coc_global_extensions = ['coc-vetur', 'coc-eslint', 'coc-emmet', 'coc-css', 'coc-html', 'coc-json', 'coc-prettier', 'coc-tsserver'] "高亮当前行 set cursorline "显示行号 set number "支持鼠标 if has('mouse') set mouse=r endif " (WSL only)支持系统剪贴板,直接使用 y 复制等 let s:clip = '/mnt/c/Windows/System32/clip.exe' " default location if executable(s:clip) augroup WSLYank autocmd! autocmd TextYankPost * call system('echo '.shellescape(join(v:event.regcontents, "\<CR>")).' | '.s:clip) augroup END end " (for Mac)支持系统剪贴板,先按 ; 再按 y 复制或 p 粘贴 let mapleader=";" nmap <Leader>a ggVG vnoremap <Leader>y :w !pbcopy<CR><CR> nmap <Leader>p :r !pbpaste<CR><CR> " trigger `autoread` when files changes on disk set autoread autocmd FocusGained,BufEnter,CursorHold,CursorHoldI * if mode() != 'c' | checktime | endif " notification after file change autocmd FileChangedShellPost * \ echohl WarningMsg | echo "File changed on disk. Buffer reloaded." | echohl None "配置颜色(mac中注释掉前三行) if (has("termguicolors")) set termguicolors endif syntax enable colorscheme dracula "配置目录树 let g:NERDTreeShowHidden = 1 let g:NERDTreeMinimalUI = 1 let g:NERDTreeIgnore = [] let g:NERDTreeStatusline = '' let g:NERDTreeIgnore=['node_modules'] " Automaticaly close nvim if NERDTree is only thing left open autocmd bufenter * if (winnr("$") == 1 && exists("b:NERDTree") && b:NERDTree.isTabTree()) | q | endif " Toggle nnoremap <silent> <C-b> :NERDTreeToggle<CR> "使用 ctrl+hjkl 切换分割页 tnoremap <C-h> <C-\><C-n><C-w>h tnoremap <C-j> <C-\><C-n><C-w>j tnoremap <C-k> <C-\><C-n><C-w>k tnoremap <C-l> <C-\><C-n><C-w>l nnoremap <C-h> <C-w>h nnoremap <C-j> <C-w>j nnoremap <C-k> <C-w>k nnoremap <C-l> <C-w>l "配置集成终端 " open new split panes to right and below set splitright set splitbelow " turn terminal to normal mode with escape tnoremap <Esc> <C-\><C-n> " start terminal in insert mode au BufEnter * if &buftype == 'terminal' | :startinsert | endif " open terminal on ctrl+n function! OpenTerminal() split term://bash resize 10 endfunction nnoremap <c-n> :call OpenTerminal()<CR> augroup TerminalStuff au! autocmd TermOpen * setlocal nonumber norelativenumber augroup END "配置文件搜素 nnoremap <C-p> :FZF<CR> let g:fzf_action = { \ 'ctrl-t': 'tab split', \ 'ctrl-s': 'split', \ 'ctrl-v': 'vsplit' \} let $FZF_DEFAULT_COMMAND = 'ag -g ""' "配置Prettier let g:prettier#config#config_precedence = 'cli-override' let g:prettier#config#print_width = 120 command! -nargs=0 Prettier :CocCommand prettier.formatFile "配置注释 let g:NERDSpaceDelims = 2 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
~/.config/nvim/coc-settings.json
:
json
{ "coc.preferences.formatOnSaveFiletypes": ["javascript", "typescript", "typescriptreact", "json", "javascriptreact", "typescript.tsx", "css", "Markdown", "less", "sass", "scss", "html", "vue"], "eslint.filetypes": ["javascript", "typescript", "typescriptreact", "javascriptreact", "typescript.tsx", "scss", "vue"], "coc.preferences.diagnostic.virtualText": true, "prettier.disableLanguages": [], "eslint.autoFixOnSave": true }
- 注意:可以在打开的某个文件中运行
:echo &filetype
确定当前文件类型;之后如果更新了配置中支持的文件类型可能需要重新运行:CocInstall coc-eslint
以升级扩展
安装插件:
ruby
sudo apt-get install silversearcher-ag # 对比:mac的方法 brew install the_silver_searcher # mac 下还需要执行 brew install fzf # 有时需要加sudo反复执行几次 nvim +PlugInstall # 安装后重启 nvim,检查安装结果 # 这里会给出详细的提示,有各种不满足的地方按图索骥即可 :checkhealth # 平时有些插件添加并配置后如果 PlugInstall 也无效,尝试升级解决 :PlugUpgrade :PlugUpdate
常用快捷键
大部分都是先 ESC 到命令模式
目录树:
Ctrl + B
: 打开关闭文件树o
: 在文件树中,上下选择文件后打开go
: 同上,但焦点留在文件树t
: 在新页签中打开T
: 同上,但焦点留在文件树g + t
: 到下一个页签g + T
: 到上一个页签数字 + g + t
: 到第几个页签i
: 在上下分割页中打开gi
: 同上,但焦点留在文件树s
: 在左右分割页中打开gs
: 同上,但焦点留在文件树- 新建文件:选中目录,按
m
后按a
,输入文件名 - 新建目录:同上,但目录名后以
/
结尾
分割页切换和集成终端:
Ctrl + N
: 打开终端,多页签切换到终端时需要用i和ESC切换其输入状态Alt + h\j\k\l
: 在文件树和分割页间切换焦点:res+行数
: 改变分割页的尺寸:quitall
: 多个tab时一次性退出vim
文件搜索:
Ctrl + P
: 打开搜索页签,搜索并选中目录- 回车:在当前激活的窗口打开选中目录
Ctrl + T
: 在新页签中打开Ctrl + S
: 在上下新分割页中打开Ctrl + V
: 在左右新分割页中打开
内容搜索
:Ag 文本内容
: 搜索项目内包含文本内容的文件,快捷键同文件搜索
注释
\ci
: 切换当前行注释状态,前面加数字即往下n行
美化
:Prettier
: 美化当前文件
系统剪贴板
按 V 进入可视化模式后上下左右选字段
*y
复制到系统剪贴板
用更好的终端支持文件图标
这里推荐的是 wsl-terminal,一款开源的 WSL 终端模拟器,基于 mintty、fatty 和 wslbridge2。考虑到各种版本 win10 系统的广泛接受程度,wsl-terminal 较易获得和设置,即便在公司电脑等受限环境下也不会受到安装的限制。
更重要的是,安装 wsl-terminal 除了能获得比默认 wsl 终端更好的体验,也能支持前者可能无法正常显示的 vim-devicons 文件图标。
- 下载
https://github.com/mskyaxl/wsl-terminal/releases/download/v0.9.0/wsl-terminal-0.9.0.7z
,完成后解压到某位置 - 运行一次
open-wsl.exe
后关闭,会自动生成快捷方式wsl-terminal
;在后者的右键“属性”中,将“目标”改为open-wsl.exe -C "/home/用户名"
- 从页面
https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/DroidSansMono/complete
,下载字体文件Droid Sans Mono Nerd Font Complete Windows Compatible.otf
;完成后双击打开并点击“安装”
- 如果在 mac 下,则是先下载字体并在系统安装,然后去 init.vim 中设置
set guifont=DroidSansMono_Nerd_Font:h11
,最后把终端的“偏好设置”中也选择新字体
- 运行快捷方式
wsl-terminal
,会打开 mintty 窗口,在其菜单项“设置”中的“文本”选项中,选择刚刚安装好的“DroidSansMono NF”字体;保存并应用即可
- 顺带一提,如果使用了 Windows Terminal,设置字体的方法为在其“settings.json” 中 Ubuntu-18.04 的对象中指定
"fontFace": "DroidSansMono NF"
本文中的配置大抵只是个初始化的程度,要达到好用的效果,还希望大家动手探索、积极回复。
参考资料
- medium.com/better-prog…
- blog.csdn.net/u014547577/…
- www.freecodecamp.org/news/a-guid…
- github.com/preservim/n…
- vra.github.io/2019/03/13/…
- www.linux.com/training-tu…
- freshman.tech/vim-javascr…
- vi.stackexchange.com/questions/1…
- blog.csdn.net/kl28978113/…