Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,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
运行
AI代码解释
复制
# 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
运行
AI代码解释
复制
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
运行
AI代码解释
复制
{
  "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
运行
AI代码解释
复制
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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
vim01-环境配置
现在开发、写文章基本上已经离不开 vim了,写代码idea + vim 配合,写文章就是直接上 vim。vim 有一定的学习曲线,但是习惯了就好。 习惯以后,再使用这些插件就会更好用。
潇洒
2020/12/18
1.4K0
vim01-环境配置
vim-IDE进化07-fzf搜索文件
之前已经介绍过了ctrlp这个工具为什么还需要fzf这个工具。 因为这两者在使用方式上有一些区别。 fzf是可以直接在mac的终端上使用,并且还能够集成到vim当中使用。
潇洒
2023/10/23
4840
vim 插件管理与推荐
编辑器对于所有人来说都再熟悉不过,不论是任何学历、任何工作的人,只要接触电脑,总要录入一些文字,这个时候必将有一款编辑器进入你的视野。 事实上,无论是 vim、emacs 还是如今风靡的各种甜品级编辑器,他们最为吸引人的无不在于他们那超级强大的定制化能力,这也是几十年来,vim 与 emacs 仍然能够走在前列的原因,他们的背后都有着强大的社区,不断为他们产出着一个又一个优秀的扩展,让他们不断焕发耀眼的光芒,而 vim8 与 neovim 的诞生,更让人领略到这宝刀不老的风采。 作为一个 vim 铁杆拥趸,本文就来聊一聊博主心中 vim 最强大的几个插件以及安装、使用方法。
用户3147702
2022/06/27
1.5K0
vim 插件管理与推荐
帅瞎了!手机也能写Python代码!手把手教你在手机或平板上配置Python环境!
本文旨在讲解如何在Android平板或手机上搭建Python开发环境,帮助Python初学者有效利用碎片化时间进行学习,从而达到良好的学习效果。
数据森麟
2021/03/09
8K0
帅瞎了!手机也能写Python代码!手把手教你在手机或平板上配置Python环境!
Vim折腾PowerShell篇
正式开始下面的内容之前,你可以考虑下要不要折腾,或者说是不是真的爱vim,如果不爱请离开,就现在,因为它真的带刺,没有足够的热爱就不会有足够的耐心和精力去维护和学习,vim很难学,但属于那种学会了就离不开的类型。
堆栈哲学
2022/11/24
1.7K0
Vim折腾PowerShell篇
千姿百态,瞬息万变,Win11系统NeoVim打造全能/全栈编辑器(前端/Css/Js/Vue/Golang/Ruby/ChatGpt)
    我曾经多次向人推荐Vim,其热情程度有些类似现在卖保险的,有的时候,人们会因为一些弥足珍贵的美好暗暗渴望一个巨大的负面,比如因为想重温手动挡的快乐而渴望买下一辆二十万公里的老爷车,比如因为所谓完美的音质而舍不得一个老旧的有线耳机,比如因为一个铜炉火锅而期待北京那漫长而寒冷的冬天。
用户9127725
2023/03/01
8690
千姿百态,瞬息万变,Win11系统NeoVim打造全能/全栈编辑器(前端/Css/Js/Vue/Golang/Ruby/ChatGpt)
打造一款高逼格的Vim神器
Vim 是一个上古神器,本篇文章主要持续总结使用 Vim 的过程中不得不了解的一些指令和注意事项,以及持续分享一个前端工作者不得不安装的一些插件,而关于 Vim 的简介,主题的选择,以及为何使用 vim-plug 来管理插件等内容,有兴趣的同学下来可以自己了解和对比下。
龙哥
2020/11/19
1.1K0
打造一款高逼格的Vim神器
Win11平台安装和配置NeoVim0.8.2编辑器搭建Python3开发环境(2023最新攻略)
    毫无疑问,我们生活在编辑器的最好年代,Vim是仅在Vi之下的神级编辑器,而脱胎于Vim的NeoVim则是这个时代最好的编辑器,没有之一。异步支持、更好的内存管理、更快的渲染速度、更多的编辑命令,是大神Thiago de Arruda对开发者们最好的技术馈赠。
用户9127725
2023/03/01
2.1K0
Win11平台安装和配置NeoVim0.8.2编辑器搭建Python3开发环境(2023最新攻略)
史上最全面的纯手工打造 Vim 神器操作手册
Vim 是一个上古神器,本篇文章主要持续总结使用 Vim 的过程中不得不了解的一些指令和注意事项,以及持续分享一个前端工作者不得不安装的一些插件,而关于 Vim 的简介,主题的选择,以及为何使用 vim-plug 来管理插件等内容,有兴趣的同学下来可以自己了解和对比下。 安装 sudo apt-get install vim // Ubuntu 其他平台,可以自行谷歌 新手指南 vimtutor // vim 教程 上面是史上最简单,最全面的 Vim 基础教程,至今无人超越 下面是作者基于上面的归纳
小小科
2018/05/04
1K0
10分钟教你为自己打造一个专属VIM
Vim 是一个上古神器,本篇文章主要持续总结使用 Vim 的过程中不得不了解的一些指令和注意事项,以及持续分享一个前端工作者不得不安装的一些插件,而关于 Vim 的简介,主题的选择,以及为何使用 vim-plug 来管理插件等内容,有兴趣的同学下来可以自己了解和对比下。
马哥linux运维
2019/04/10
1.1K0
10分钟教你为自己打造一个专属VIM
专属于你自己的vim 神器的打造方式
Vim 是一个上古神器,本篇文章主要持续总结使用 Vim 的过程中不得不了解的一些指令和注意事项,以及持续分享一个前端工作者不得不安装的一些插件,而关于 Vim 的简介,主题的选择,以及为何使用 vi
小小科
2018/05/03
9300
专属于你自己的vim 神器的打造方式
vim-IDE进化 05 vim-startify
今天介绍一下vim的别一个非常好用的插件,启动界面插件 vim-startify。 这个插件有什么用呢,看效果:
潇洒
2023/10/23
5100
vim-IDE进化 05 vim-startify
手把手教你配置linux下C++开发工具——vim+ycm(YouCompleteMe),支持基于语义的自动补全和第三方库补全(史上最简单、史上最透彻、史上最全的终极解决方案)
截止到目前,vim稳定版本已经到了8.2+,ycm(YouCompleteMe的简称)最新版本与几年前的安装配置截然不同了。之前网上很多教程也教不得法,生搬硬套,没有讲透彻。所以,才下定决心写一篇自认为史上最简单、史上最全的教程出来。
Java架构师历程
2020/11/10
6.1K0
手把手教你配置linux下C++开发工具——vim+ycm(YouCompleteMe),支持基于语义的自动补全和第三方库补全(史上最简单、史上最透彻、史上最全的终极解决方案)
vim-IDE进化04 NERD-tree 文件目录管理树插件
这个插件的作用很大,可以方便的管理和打开文件、进入目录一个刚需插件。 看效果图,左侧的目录就是插件显示的效果。
潇洒
2023/10/23
1K0
vim-IDE进化04 NERD-tree 文件目录管理树插件
从零开始配置 vim(18)——终端模式
在进入下一个配置之前,先了解一下如何在 neovim 中使用它内置的终端。 我们之前说过在命令模式中可以使用 !来执行shell命令。但是终归来说,执行和使用上不是那么方便,特别是混合使用 vim 命令和 shell 命令的时候。两个揉在一起显得那么混乱。好在从早期的 neovim和 8.0以后版本的vim已经内置了一个终端。
Masimaro
2022/09/27
2.2K0
从零开始配置 vim(18)——终端模式
vim-IDE进化06-模糊搜索ctrlpvim
模糊搜索工具有很多,但是推荐装一下这个工具,这个工具是一个很好用的工具,而且如果你使用go开发中话,vim-go的跳转了依赖于这个工具,所以推荐装该插件。
潇洒
2023/10/23
3670
vim-IDE进化06-模糊搜索ctrlpvim
想在linux平台拥有和vs一样的体验模式吗?只需配置一下你的vim便可以轻松达到,让你日常编写代码爽到飞起的vim配置,他来了
一份好的 Vim 配置,不仅仅是让你拥有一个强大的文本编辑器,它还能将 Vim 打造成一个类似 IDE(集成开发环境)的高效工作工具,让你在 Linux 中也能体验到编译器般的流畅和便捷。这不仅仅是编辑文本,它是一种沉浸式的编程体验。
猫咪-9527
2025/01/13
1910
非常全面的vim配置文件
1.mac下vim全局配置目录 /usr/share/vim/vimrc 一般不对此文件做修改,在用户目录下创建自定义配置,目录为: /Users/xxxxx cd ~ 2自定义vim配置 配置功能: 高亮+自动缩进+行号+折叠+优化 配置内容为: "========================================================================= " DesCRiption: 适合自己使用的vimrc文件,for Linux/Windows, GUI/Co
代码改变世界-coding
2018/09/27
3.6K0
我的vim配置文件,再度升级
原来的repo放在 spf13-vim-leoatchina,因为原来一时脑抽,把中文字体放进去后导致体积较大,影响速度,所以重开一个repo并把windows下的工具分开,以增加clone速度。
py3study
2020/01/03
1.1K0
vim-IDE进化08-ranger文件管理
这又是一个非常好用的插件,可以快速的浏览本地文件打开本地文件。如果是不同类型的文件如pdf,会调用本地系统的应用打开,就是这么好用,在习惯了vim后有个毛病,就是想要什么都可能通过命令行去操作,如果你也是这样,那这个插件非常适合你。
潇洒
2023/10/23
2640
推荐阅读
相关推荐
vim01-环境配置
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验