In the previous “in win10 WSL setup front-end development environment” article, introduced win10 combined with its Linux subsystem (WSL) front-end development Settings, using VSCode development tools.

In some cases, in order to pursue tool lightweight, reduce the burden of the system, or to cope with temporary development scenarios, simply set up the terminal VIM development environment, with the help of a variety of powerful and mature plug-ins, can also achieve almost the same effect.

No more words, directly on the dry goods ~

The final result

On the WSL (Ubuntu 18.04) terminal:

Install Neovim and the plug-in manager

Along with also marked some MAC under the setting method, basically can be used

Note: if you do not turn, you may first visit site.ip138.com/raw.Githubu… Check the first one IP on the hosts, such as: 151.101.108.133 raw.githubusercontent.com

Plugins such as coC only support version 0.3 and above, To install unstable sudo add-apt-repository ppa:neovim-ppa/ Unstable sudo apt update sudo apt install -y neovim sudo apt-get Install tmux Update brew upgrade update brew install tmux -fLo ~/.local/share/nvim/site/autoload/plug.vim --create-dirs https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim mkdir ~/.config/nvimCopy the code

Editing a Configuration File

~/.config/nvim/init.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 plug-in
let g:coc_global_extensions = ['coc-vetur'.'coc-eslint'.'coc-emmet'.'coc-css'.'coc-html'.'coc-json'.'coc-prettier'.'coc-tsserver']

"Highlight current line
set cursorline

"Display line number
set number
  
"Mouse support
if has('mouse')
  set mouse=r
endif

"(WSL only) support system clipboard, direct use of Y copy, etc
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) Support system clipboard, press first; Press y to copy or P to paste
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
  
"Configuration color (comment out the first three lines on MAC)
if (has("termguicolors"))
  set termguicolors
endif
syntax enable
colorscheme dracula

"Configure the directory tree
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>

"Use CTRL + HJKL to toggle split page
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

"Configure the integration terminal
" 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(a)
  split term://bash
  resize 10
endfunction
nnoremap <c-n> :call OpenTerminal()<CR>
augroup TerminalStuff
  au!
  autocmd TermOpen * setlocal nonumber norelativenumber
augroup END

"Configuration file search
nnoremap <C-p> :FZF<CR>
let g:fzf_action= {\'ctrl-t': 'tab split',
  \ 'ctrl-s': 'split',
  \ 'ctrl-v': 'vsplit'The \}let $FZF_DEFAULT_COMMAND = 'ag -g ""'

"Configuration Prettier
let g:prettier#config#config_precedence = 'cli-override'
let g:prettier#config#print_width = 120
command! -nargs=0 Prettier :CocCommand prettier.formatFile

"Configuration comment
let g:NERDSpaceDelims = 2
let g:ft = ' '
function! NERDCommenter_before(a)
  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(a)
  if g:ft= ='vue'
    setf vue
    let g:ft = ' '
  endif
endfunction
Copy the code

~/.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
}
Copy the code
  • Note: You can run it in an open file:echo &filetypeDetermine the current file type; You may need to re-run it later if you update the file types supported in the configuration:CocInstall coc-eslintTo upgrade the extension

Install plug-in:

Sudo apt-get install Silversearcher -ag Brew install the_silver_searcher # brew install FZF # PlugUpgrade :PlugUpdate, PlugUpdate, PlugUpdate, PlugUpdate, PlugUpdate, PlugUpdate, PlugUpdate, PlugUpdateCopy the code

Common Shortcut keys

Most of them go into command mode first

Directory tree:

  • Ctrl + B: Opens or closes the file tree
  • o: In the file tree, select a file up or down and open it
  • go: Same as above, but focus on the file tree
  • t: Opens on a new TAB
  • T: Same as above, but focus on the file tree
  • g + t: Go to the next TAB
  • g + T: Go to previous TAB
  • Number plus g plus t: To which TAB
  • i: opens in a split page
  • gi: Same as above, but focus on the file tree
  • s: opens in the left and right split pages
  • gs: Same as above, but focus on the file tree
  • Create a file: Select a directory and pressmAfter the pressa, enter the file name
  • Create a directory: same as above, but the directory name ends with/At the end

Split page switching and integration terminal:

  • Ctrl + N: To open the terminal, use I and ESC to switch to the terminal
  • Alt + h\j\k\l: Toggles focus between file tree and split page
  • : res + rows: Changes the size of the split page
  • :quitall: Exits vim once for multiple tabs

File search:

  • Ctrl + P: Open the search TAB, search for and select a directory
  • Enter: Opens the selected directory in the currently active window
  • Ctrl + T: Opens on a new TAB
  • Ctrl + S: Opens in a new split page
  • Ctrl + V: opens in the left and right new split pages

Content search

  • :Ag Text content: Search for files with text content in the project. Shortcut keys are the same as file search

annotation

  • \ci: Toggles the comment state of the current line. Add a number to the comment state to move down n lines

beautify

  • :Prettier: Beautifies the current file

System clipboard

Press V to enter visual mode

  • *yCopy to system clipboard

Better terminal support for file ICONS

The recommended one is WSL-Terminal, an open source WSL terminal simulator based on Mintty, Fatty and Wslbridge2. Considering the wide acceptance of various versions of Win10 system, WSL-Terminal is easy to obtain and set up, even in the company computer and other limited environment will not be limited by the installation.

More importantly, in addition to getting a better experience than the default WSL terminal, installing WSL-Terminal also supports the vim-Devicons file ICONS that may not display properly on the former.

  • downloadhttps://github.com/mskyaxl/wsl-terminal/releases/download/v0.9.0/wsl-terminal-0.9.0.7z, and decompress it to a certain location
  • To run aopen-wsl.exeAfter closing, a shortcut will be automatically generatedwsl-terminal; In the latter right-click “Properties”, change “Target” toOpen-wsl. exe -c "/home/username"
  • From the pagehttps://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/DroidSansMono/completeDownload the font fileDroid Sans Mono Nerd Font Complete Windows Compatible.otf; When finished, double click to open and click “Install”
    • If you’re on a MAC, download the font and install it on your system, then go to init.vim to set itset guifont=DroidSansMono_Nerd_Font:h11, and finally select the new font in the “preferences” of the terminal
  • Run shortcutwsl-terminal, the Mintty window opens, and in its Settings menu, select the newly installed “DroidSansMono NF” font from the Text option; Save and apply
    • Incidentally, if you are using Windows Terminal, the method for setting fonts is specified in the Ubuntu-18.04 object in its settings.json file"fontFace": "DroidSansMono NF"

The configuration in this article is mostly just an initial degree, to achieve the effect of good use, but also hope that we start to explore, positive response.

The resources

  • Medium.com/better-prog…
  • Blog.csdn.net/u014547577/…
  • www.freecodecamp.org/news/a-guid…
  • Github.com/preservim/n…
  • Vra. Making. IO / 2019/03/13 /…
  • www.linux.com/training-tu…
  • Freshman. Tech/vim – javascr…
  • Vi.stackexchange.com/questions/1…
  • Blog.csdn.net/kl28978113/…






–End–






View more front-end good article please search fewelife concern public number reprint please indicate the source