前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >初探在WSL中设置vim前端开发环境

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

作者头像
江米小枣
发布于 2020-06-15 09:51:44
发布于 2020-06-15 09:51:44
2.2K00
代码可运行
举报
文章被收录于专栏:云前端云前端
运行总次数:0
代码可运行

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

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

话不多说,直接上干货~

最终效果

在 WSL (Ubuntu 18.04) 终端中:

安装 neovim 和插件管理器

代码语言:javascript
代码运行次数:0
运行
复制
# 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:

代码语言:javascript
代码运行次数:0
运行
复制
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:

代码语言:javascript
代码运行次数:0
运行
复制
{
  "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 以升级扩展

安装插件:

代码语言:javascript
代码运行次数:0
运行
复制
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/
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-05-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 云前端 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
TensorFlow 2.0 - CNN / 预训练 / RNN
文章目录 1. CNN 卷积神经网络 2. 预训练模型 3. RNN 循环神经网络 学习于:简单粗暴 TensorFlow 2 1. CNN 卷积神经网络 卷积神经网络,卷积后尺寸计算 tf.keras.layers.Conv2D, tf.keras.layers.MaxPool2D # CNN 模型 class myCNN(tf.keras.Model): def __init__(self): super().__init__() self.conv1 = tf
Michael阿明
2021/02/19
5250
tensorflow自定义网络结构
自定义层需要继承tf.keras.layers.Layer类,重写init,build,call
Dean0731
2020/05/11
1.1K0
TensorFlow 2.0 - 自定义模型、训练过程
文章目录 1. 自定义模型 2. 学习流程 学习于:简单粗暴 TensorFlow 2 1. 自定义模型 重载 call() 方法,pytorch 是重载 forward() 方法 import tensorflow as tf X = tf.constant([[1.0, 2.0, 3.0],[4.0, 5.0, 6.0]]) y = tf.constant([[10.0],[20.0]]) class Linear(tf.keras.Model): def __init__(self):
Michael阿明
2021/02/19
9690
TensorFlow 2.0 - Keras Pipeline、自定义Layer、Loss、Metric
文章目录 1. Keras Sequential / Functional API 2. 自定义 layer 3. 自定义 loss 4. 自定义 评估方法 学习于:简单粗暴 TensorFlow 2 1. Keras Sequential / Functional API tf.keras.models.Sequential([layers...]),但是它不能表示更复杂的模型 mymodel = tf.keras.models.Sequential([ tf.keras.layers.Flat
Michael阿明
2021/02/19
1K0
【TensorFlow2.0】以后我们再也离不开Keras了?
在TensorFlow2.0中,Keras是一个用于构建和训练深度学习模型的高阶 API。因此如果你正在使用TensorFow2.0,那么使用Keras构建深度学习模型是您的不二选择。在Keras API中总共有如下三大块:
用户1508658
2019/07/28
1.2K0
数值稳定性:Fixing NaN Gradients during Backpropagation in TensorFlow
大家好,我是默语,擅长全栈开发、运维和人工智能技术。在机器学习和深度学习的训练过程中,数值稳定性是一个非常重要的问题。特别是在使用TensorFlow进行模型训练时,我们常常会遇到梯度为NaN的情况,这会导致训练过程无法正常进行。本文将详细介绍如何在TensorFlow中解决反向传播过程中NaN梯度的问题,提供一些有效的方法来避免和解决这些问题。
默 语
2024/11/22
1440
小白学PyTorch | 18 TF2构建自定义模型
之前讲过了如何用tensorflow构建数据集,然后这一节课讲解如何用Tensorflow2.0来创建模型。
机器学习炼丹术
2020/10/15
9260
TensorFlow 2.0快速上手指南12条:“Keras之父”亲授 | 高赞热贴
谷歌深度学习研究员、“Keras之父”François Chollet发表推特,总结了一份TensorFlow 2.0 + Keras做深度学习研究的速成指南。
量子位
2019/04/23
1.2K0
TensorFlow 2.0快速上手指南12条:“Keras之父”亲授 | 高赞热贴
Tensorflow2.0常用基础API
tensorflow2.0改进之后已经非常像numpy形式了,不用像之前的session那样操作,一些基本的操作如下。需要注意的店以及部分数据均写在代码注释中。
Mirza Zhao
2023/06/26
8010
使用TensorFlow2预测国内疫情结束时间
国内的新冠肺炎疫情从发现至今已经持续3个多月了,这场起源于吃野味的灾难给大家的生活造成了诸多方面的影响。
lyhue1991
2020/07/20
8430
使用TensorFlow2预测国内疫情结束时间
【深度学习】Tensorflow2.x入门(一)建立模型的三种模式
最近做实验比较焦虑,因此准备结合推荐算法梳理下Tensorflow2.x的知识。介绍Tensorflow2.x的文章有很多,但本文(系列)是按照作者构建模型的思路来展开的,因此不会从Eager Execution开始。另外,尽量摆脱小白文,加入自己的理解。 本文约2.7k字,预计阅读10分钟。
黄博的机器学习圈子
2020/12/11
1.8K0
四个用于Keras的很棒的操作(含代码)
Keras是最广泛使用的深度学习框架之一。它在易于使用的同时,在性能方面也与TensorFlow,Caffe和MXNet等更复杂的库相当。除非你的应用程序需要一些非常低级别和复杂的代码,否则Keras会为你提供最好的帮助!
AiTechYun
2018/12/13
3.2K0
四个用于Keras的很棒的操作(含代码)
Tensorflow 2.0 的这些新设计,你适应好了吗?
如果说两代 Tensorflow 有什么根本不同,那应该就是 Tensorflow 2.0 更注重使用的低门槛,旨在让每个人都能应用机器学习技术。考虑到它可能会成为机器学习框架的又一个重要里程碑,本文会介绍 1.x 和 2.x 版本之间的所有(已知)差异,重点关注它们之间的思维模式变化和利弊关系。
崔庆才
2019/09/04
9840
Tensorflow 2.0 的这些新设计,你适应好了吗?
机器翻译的Attention机制
在机器翻译(Neural Machine Translation)中,Seq2Seq模型将源序列映射到目标序列,其中Encoder部分将源序列编码为Context Vector传递给Decoder,Decoder将Context Vector解码为目标语言的序列。
YoungTimes
2022/04/28
1.4K0
机器翻译的Attention机制
【tensorflow2.0】处理时间序列数据
国内的新冠肺炎疫情从发现至今已经持续3个多月了,这场起源于吃野味的灾难给大家的生活造成了诸多方面的影响。
西西嘛呦
2020/08/26
9240
【tensorflow2.0】处理时间序列数据
使用Keras构建具有自定义结构和层次图卷积神经网络(GCNN)
如何构建具有自定义结构和层次的神经网络:Keras中的图卷积神经网络(GCNN) 在生活中的某个时刻我们会发现,在Tensorflow Keras中预先定义的层已经不够了!我们想要更多的层!我们想要建
deephub
2020/07/29
2.1K0
使用Keras构建具有自定义结构和层次图卷积神经网络(GCNN)
《机器学习实战:基于Scikit-Learn、Keras和TensorFlow》第12章 使用TensorFlow自定义模型并训练
目前为止,我们只是使用了TensorFlow的高级API —— tf.keras,它的功能很强大:搭建了各种神经网络架构,包括回归、分类网络、Wide & Deep 网络、自归一化网络,使用了各种方法,包括批归一化、dropout和学习率调度。事实上,你在实际案例中95%碰到的情况只需要tf.keras就足够了(和tf.data,见第13章)。现在来深入学习TensorFlow的低级Python API。当你需要实现自定义损失函数、自定义标准、层、模型、初始化器、正则器、权重约束时,就需要低级API了。甚至有时需要全面控制训练过程,例如使用特殊变换或对约束梯度时。这一章就会讨论这些问题,还会学习如何使用TensorFlow的自动图生成特征提升自定义模型和训练算法。首先,先来快速学习下TensorFlow。
SeanCheney
2019/12/13
5.4K0
《机器学习实战:基于Scikit-Learn、Keras和TensorFlow》第12章 使用TensorFlow自定义模型并训练
TensorFlow之CNN
CNN 就是convolutional neural network, 也就是卷积神经网络,是一种类似于人类或动物视觉系统结构的人工神经网络,包含一个或多个卷积层(convolutional layer)、池化层(pooling layer)和全连接层(fully-connected layer),总之,这些年他很火。
Ed_Frey
2020/12/30
3970
英文教程太难啃?这里有一份TensorFlow2.0中文教程(持续更新中)
虽然,自 TensorFlow 2.0 发布以来,我们总是能够听到「TensorFlow 2.0 就是 keras」、「说的很好,但我用 PyTorch」类似的吐槽。但毋庸置疑,TensorFlow 依然是当前最主流的深度学习框架(感兴趣的读者可查看机器之心文章:2019 年,TensorFlow 被拉下马了吗?)。
机器之心
2019/05/14
1.1K0
英文教程太难啃?这里有一份TensorFlow2.0中文教程(持续更新中)
在TensorFlow 2.0中实现自动编码器
Google宣布对全球最受欢迎的开源机器学习库TensorFlow进行重大升级,承诺注重简单性和易用性,eager execution,直观的高级API以及在任何平台上灵活构建模型。
代码医生工作室
2019/06/21
3.3K2
在TensorFlow 2.0中实现自动编码器
推荐阅读
相关推荐
TensorFlow 2.0 - CNN / 预训练 / RNN
更多 >
目录
  • ~/.config/nvim/init.vim:
  • ~/.config/nvim/coc-settings.json:
  • 目录树:
  • 分割页切换和集成终端:
  • 文件搜索:
  • 内容搜索
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档