初探在WSL中設置vim前端開發環境

時間 2020-05-19

標籤初探 wsl 設置 vim 前端開發環境欄目 Unix 简体版

原文原文鏈接

在以前的《在win10的WSL中設置前端開發環境》一文中，介紹了 win10 結合其 linux 子系統（WSL）的前端開發設置，使用的是 VSCode 開發工具。javascript

而在某些狀況下，出於追求工具輕量化、減輕系統負擔，或應付臨時開發場景等目的，只須要簡單設置一下終端 vim 開發環境，藉助各類強大成熟的插件，也能達到八九不離十的效果。css

話很少說，直接上乾貨~html

最終效果

在 WSL (Ubuntu 18.04) 終端中：前端

安裝 neovim 和插件管理器

# coc等插件只支持0.3及以上的版本，所以須要安裝unstable版
sudo add-apt-repository ppa:neovim-ppa/unstable
sudo apt update
sudo apt install -y neovim

# 檢查版本
nvim --version

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`:

call plug#begin("~/.vim/plugged")
  Plug 'dracula/vim'
  Plug 'posva/vim-vue'
  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()

let g:coc_global_extensions = ['coc-vetur', 'coc-eslint', 'coc-emmet', 'coc-css', 'coc-html', 'coc-json', 'coc-prettier', 'coc-tsserver']
  
"支持鼠標（慎用，可能致使沒法用鼠標選中文字等）
"if has('mouse')
" set mouse=a
"endif
  
"配置顏色
if (has("termguicolors"))
  set termguicolors
endif
syntax enable
colorscheme dracula

"配置目錄樹
let g:NERDTreeShowHidden = 1
let g:NERDTreeMinimalUI = 1
let g:NERDTreeIgnore = []
let g:NERDTreeStatusline = ''
" 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>

"使用 alt+hjkl 切換分割頁
tnoremap <A-h> <C-\><C-n><C-w>h
tnoremap <A-j> <C-\><C-n><C-w>j
tnoremap <A-k> <C-\><C-n><C-w>k
tnoremap <A-l> <C-\><C-n><C-w>l
nnoremap <A-h> <C-w>h
nnoremap <A-j> <C-w>j
nnoremap <A-k> <C-w>k
nnoremap <A-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>

"配置文件搜素
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
command! -nargs=0 Prettier :CocCommand prettier.formatFile

"配置註釋
let g:NERDSpaceDelims = 2
複製代碼

`~/.config/nvim/coc-settings.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 以升級擴展

安裝插件：

sudo apt-get install silversearcher-ag

nvim +PlugInstall

# 安裝後重啓 nvim，檢查安裝結果
:checkhealth


# 平時有些插件添加並配置後若是 PlugInstall 也無效，嘗試升級解決
:PlugUpgrade
:PlugUpdate
複製代碼