专栏首页云前端初探在WSL中设置vim前端开发环境

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

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

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

话不多说,直接上干货~

最终效果

在 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 'ryanoasis/vim-devicons'
  Plug 'junegunn/fzf', { 'dir': '~/.fzf', 'do': './install --all' }
  Plug 'junegunn/fzf.vim'
  Plug 'editorconfig/editorconfig-vim'
  Plug 'neoclide/coc.nvim', {'branch': 'release'}
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 ""'

~/.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

常用快捷键

先 ESC 到命令模式

目录树:

  • Ctrl + B: 打开关闭文件树
  • o: 在文件树中,上下选择文件后打开
  • go: 同上,但焦点留在文件树
  • t: 在新页签中打开
  • T: 同上,但焦点留在文件树
  • g + t: 到下一个页签
  • g + T: 到上一个页签
  • i: 在上下分割页中打开
  • gi: 同上,但焦点留在文件树
  • s: 在左右分割页中打开
  • gs: 同上,但焦点留在文件树

分割页切换和集成终端:

  • Ctrl + N: 打开终端,多页签切换到终端时需要用i和ESC切换其输入状态
  • Alt + h\j\k\l: 在文件树和分割页间切换焦点
  • :res+行数: 改变分割页的尺寸
  • :quitall: 多个tab时一次性退出vim

文件搜索:

  • Ctrl + P: 打开搜索页签,搜索并选中目录
  • 回车:在当前激活的窗口打开选中目录
  • Ctrl + T: 在新页签中打开
  • Ctrl + S: 在上下新分割页中打开
  • Ctrl + V: 在左右新分割页中打开

内容搜索

  • :Ag 文本内容: 搜索项目内包含文本内容的文件,快捷键同文件搜索

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

参考资料

  • https://medium.com/better-programming/setting-up-neovim-for-web-development-in-2020-d800de3efacd
  • https://blog.csdn.net/u014547577/article/details/70261436
  • https://www.freecodecamp.org/news/a-guide-to-modern-web-development-with-neo-vim-333f7efbf8e2/
  • https://github.com/preservim/nerdtree/blob/master/doc/NERDTree.txt
  • http://vra.github.io/2019/03/13/ubuntu-install-neovim/

本文分享自微信公众号 - 云前端(fewelife),作者:云前端

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-05-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • WebSocket 简介及应用实例

    HTML5 的出现,标志着后 Flash 时代各种现代浏览器的集体爆发,也是谨防 Adobe 一家独大的各家厂商们,历经多年各自为战,想换个活法儿并终于达成一定...

    江米小枣
  • [译] 精通 Intersection Observer API

    原文:https://www.hweaver.com/intersection-observer-single-page-navigation/

    江米小枣
  • [译] 深入理解 Node.js 中的 Worker 线程

    原文:https://blog.insiderattack.net/deep-dive-into-worker-threads-in-node-js-e75e1...

    江米小枣
  • Lync Server 2013企业版部署测试二:Lync前端服务器网络负载平衡NLB配置

    在第一台前端服务器frt01.juc.com,添加角色和功能,添加"网络负载平衡"

    杨强生
  • Docker 实践遇到的问题(持续更新)

    本文列举了使用 Docker 过程中遇到的问题。 时区 基于 Debian 的镜像通过设置 环境变量 改变时区,在 Dockerfile 中增加 ENV 或在启...

    康怀帅
  • 记一次失误造成的影响

    在使用salt给机器添加时间同步的计划任务的时候,忘记salt的cron模块的写法了,于是偷懒直接使用echo追加到/var/spool/cron/root的方...

    二狗不要跑
  • 基于机器学习与动力学的社交传播研究

    引言:6.14日“腾讯创新日:科技年技术盛宴”代表腾讯各个事业群技术实力的四级专家、腾讯微创新2016年度创意获奖团队欢聚一堂,一起畅谈AI、系统安全、架构设计...

    腾讯大讲堂
  • Python Vs R:数据科学家的永恒问题pythonR结论

    Python有一些使用案例,R也是如此。使用它们的场景各不相同。 更常见的是环境以及客户或雇主的需求决定了Python和R之间的选择。许多事情在Python中都...

    用户1359560
  • 重磅!目前最强性能的人脸检测算法(Wider Face Dataset)

    今天我们不说计算机视觉基础知识,接下来说说AAAI2019一篇比较新颖的Paper,其是中科院自动化所和京东AI研究院联合的结果,在Wider Face数据集中...

    磐创AI
  • Axure制作Tab切换效果

    axure 作为一款原型工具,能够帮助我们快速的设计原型,从而将产品人员的想法快速准确的传递给技术人员。

    大江小浪

扫码关注云+社区

领取腾讯云代金券