初探在WSL中设置vim前端开发环境

简介: 初探在WSL中设置vim前端开发环境

在之前的 《在win10的WSL中设置前端开发环境》 一文中,介绍了 win10 结合其 linux 子系统(WSL)的前端开发设置,使用的是 VSCode 开发工具。

而在某些情况下,出于追求工具轻量化、减轻系统负担,或应付临时开发场景等目的,只需要简单设置一下终端 vim 开发环境,借助各种强大成熟的插件,也能达到八九不离十的效果。

话不多说,直接上干货~

最终效果

在 WSL (Ubuntu 18.04) 终端中:

1724920304966.png

安装 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 复制到系统剪贴板

用更好的终端支持文件图标

1724920210317.png

这里推荐的是 wsl-terminal,一款开源的 WSL 终端模拟器,基于 mintty、fatty 和 wslbridge2。考虑到各种版本 win10 系统的广泛接受程度,wsl-terminal 较易获得和设置,即便在公司电脑等受限环境下也不会受到安装的限制。

更重要的是,安装 wsl-terminal 除了能获得比默认 wsl 终端更好的体验,也能支持前者可能无法正常显示的 vim-devicons 文件图标。

  • 如果在 mac 下,则是先下载字体并在系统安装,然后去 init.vim 中设置 set guifont=DroidSansMono_Nerd_Font:h11,最后把终端的“偏好设置”中也选择新字体
  • 运行快捷方式 wsl-terminal,会打开 mintty 窗口,在其菜单项“设置”中的“文本”选项中,选择刚刚安装好的“DroidSansMono NF”字体;保存并应用即可
  • 顺带一提,如果使用了 Windows Terminal,设置字体的方法为在其“settings.json” 中 Ubuntu-18.04 的对象中指定 "fontFace": "DroidSansMono NF"

本文中的配置大抵只是个初始化的程度,要达到好用的效果,还希望大家动手探索、积极回复。

参考资料


相关文章
|
6月前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
70 0
|
6月前
|
程序员 开发工具 Python
[oeasy]python017_万行代码之梦_vim环境_复制粘贴
在这个教程中,作者分享了如何在 Vim 编辑器中快速创建和操作大量代码行。首先,通过 `yy` 复制一行,然后使用 `p` 粘贴来增加代码行数。通过反复粘贴,可以迅速生成多行代码。为了加快操作,可以用 `9999p` 来一次性粘贴9999行。接着,介绍了撤销(`u`)和重做(`ctrl+r`)的操作,以及删除整篇文档的快捷方式。最后,作者提到虽然可以生成一万行代码,但并不建议这样做,因为可能会导致程序崩溃,并提醒大家适度编程。
161 2
|
10天前
|
缓存 前端开发 JavaScript
前端开发的必修课:如何让你的网页在弱网环境下依然流畅运行?
【10月更文挑战第30天】随着移动互联网的普及,弱网环境下的网页性能优化变得尤为重要。本文详细介绍了如何通过了解网络状况、优化资源加载、减少HTTP请求、调整弱网参数和代码优化等方法,提升网页在弱网环境下的加载速度和流畅性,从而改善用户体验。
87 4
|
8天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
5月前
|
前端开发
windows10 安装node npm 等前端环境 并配置国内源
windows10 安装node npm 等前端环境 并配置国内源
326 3
|
1月前
|
前端开发 开发工具 git
如何清理 docker 磁盘空间+修改 Gitea 服务器的 Webhook 设置+前端一些好学好用的代码规范-git hook+husky + commitlint
如何清理 docker 磁盘空间+修改 Gitea 服务器的 Webhook 设置+前端一些好学好用的代码规范-git hook+husky + commitlint
30 5
|
2月前
|
前端开发 定位技术 API
二、前端高德地图、渲染标记(Marker)引入自定义icon,手动设置zoom
文章介绍了如何在前端使用高德地图API渲染标记(Marker),并引入自定义图标,同时展示了如何手动设置地图的缩放级别。
219 1
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(24)--- 修改密码的前端界面和ABP后端设置处理
循序渐进VUE+Element 前端应用开发(24)--- 修改密码的前端界面和ABP后端设置处理
|
3月前
|
缓存 前端开发 Java
【Azure 应用服务】App Service 使用Tomcat运行Java应用,如何设置前端网页缓存的相应参数呢(-Xms512m -Xmx1204m)?
【Azure 应用服务】App Service 使用Tomcat运行Java应用,如何设置前端网页缓存的相应参数呢(-Xms512m -Xmx1204m)?
|
3月前
|
前端开发 JavaScript
【Azure 环境】前端Web通过Azure AD获取Token时发生跨域问题(CORS Error)
【Azure 环境】前端Web通过Azure AD获取Token时发生跨域问题(CORS Error)