我把 flash.nvim 移植到了 VscodeVim 中 使用体验太爽了

刚刚在 VScodeVim 中实现 leap 没多久

neovim 社区又出来了一个 flash.nvim

号称是要比 leap 更好用的移动插件

我这才在 VScodeVim 中实现不久的 leap 就要被淘汰了?

赶紧去 neovim 中试用 flash.nvim

恩 果然 leap 应该被淘汰 这 flash.nvim 使用操作体验太自然了

愿意搜几个字符就搜几个 因为可以通过标记点跳转 效率还比 / 高

这必须要移植到 VScodeVim 用呀

好在 flash 的功能并不复杂 用了几天的时间就搞出可用版了

现在已经把 flash 融入到日常操作中了 非常舒服

接下来介绍一下在 VScodeVim 中的 flash 应该如何使用吧

功能

我们先来看看 flash 都有哪些功能

最基础的使用方式

flash 最基础的使用方式就是: f + 搜索的字符 + 标记点 label

比如你要搜索 "vscode"

只需要按下 f + "vscode" 这时候会看到屏幕上有很多绿色高亮的 label

这些 labels 就是标记点 按下对应的 label 字符就可以跳转过去了

是不是非常的简单

和 leap 相比 flash 是不限制输入字符的数量

这个操作和 / 搜索一样 所以会感觉非常自然

同时因为有 label 的存在 它的跳转效率可是要比 / 搜索高的多

用 / 搜索的时候 如果匹配了多个 你只能通过 n 来一个一个的跳转

跳转 label 的数量是有限的

这里要注意的是标记点 label 数量是有限的

默认只有这些 'hklyuiopnm,qwertzxcvbasdgjf;'

在匹配的时候还会去除掉下一个有可能输入的字符

所以实际显示的 label 是要更少一些的

当匹配字符的数量大于 label 的数量 就不会显示 label 了

解决方案也很简单 在多输入几个字符就好啦 比如这样

支持在 statusBar 显示当前输入的搜索字符

为了和 / 搜索保持一致 在搜索的时候会显示当前输入的字符

手快输入错误的字符时 会导致一个匹配点都没有

这时候就可以通过 statusBar 显示的字符来确认是不是存在拼写错误

支持记录跳转点

用 flash 跳转完之后是会记录到 jump list 里

所以这意味着可以通过 ctrl + o/i 来跳转回之前的位置

这个在日常写代码的时候非常有用 比如这个场景:

在 a 处写着写着代码 然后想要复制 b 处的代码

这时候就可以使用 f 来跳转到对应代码的位置复制

然后按下 ctrl + o 回到 a 处粘贴代码 然后继续编码

支持可视化模式

flash 也可以配合可视化模式

只需要按下 v 然后在按下 f + 搜索的字符好了

支持 operator

flash 也支持 operator

现在你可以和 d y 这些 operator 配合起来使用

它会包含搜索的整个字符, 也就是会作用到搜索字符结束的位置

ps: 这是继 leap 之后的一大突破 哈哈

之前实现 leap 的时候没有支持 operator

支持回车自动跳转到下一个标记点

当你想直接跳转到下一个标记点的话

直接按回车键就可以了

这里还对下一个标记点做了不同的背景色来提示

支持上一次搜索

有时候还想搜索上一次的搜索字符 但是懒的很 不想重复的输入

怎么办?

flash 中也帮你解决了

只需要按下 f + 回车 就可以了

上一次的搜索记录是会在成功挑战后才记录的

如果不存在上一次搜索记录的话 会给出提示

以上就是目前所支持的功能了

对比 flash.nvim 功能不多 但是都是日常使用频率非常高的基础功能

主打一个实用

配置

接下来咱在聊聊目前支持的配置

  • 忽略大小写
  • 设置 labels
  • 设置 label 的背景色
  • 设置下一个匹配点的背景色

忽略大小写

json 复制代码
"vim.flash.ignorecase": true

默认是 true

可以同时匹配大写和小写字符

如果设置成 false 的话就会区分大小写

设置 labels

json 复制代码
"vim.flash.labels": "hklyuiopnm,qwertzxcvbasdgjf;"

标记点显示的 label

你可以随意的扩展

要注意的是它每次只会显示一个字符

熟悉 easymotion 的同学可能一眼就能看出这不是 easymotion 的 labels 嘛

没错 我直接把 easymotion 的 labels 拿过来了 因为"懒" - -#

设置 label 的背景色

json 复制代码
"vim.flash.marker.backgroundColor": "#ccff88"

设置标记点的背景色

默认颜色是和 leap 一样 我还挺喜欢这个颜色

如果你感觉丑的话 随便改

设置下一个匹配点的背景色

json 复制代码
"vim.flash.marker.nextMarkerBackgroundColor": "#ffb86c"

设置下一个标记点的背景色

这个颜色是参考的 flash.nvim 整了一个橙色 看起来还不错

安装

大家现在只需要做以下几个步骤就可以使用上 flash 了:

  1. 把官方的 Vim 卸载掉
  2. 安装 CVim
  3. 在 settings.json 里面添加以下配置开启 flash
json 复制代码
"vim.flash.enable": true,

现在就可以开开心心的使用 flash 啦

为什么是 CVim

因为上次 leap 是让大家直接下载安装包 但是很多同学反馈太麻烦了

是否可以直接在插件市场上直接安装

所以这次 flash 就满足大家的要求

发布了一个 CVim 的插件

它就是在官方 Vim 版本上加上 flash 的功能

cvim 还做了其他的一些改进 比如 easymotion 针对当前行的匹配行为

后面我会不定期的更新 CVim 同步官方的更新

好在现在 VScodeVim 功能很稳定 更新频率也非常低 维护成本也不算大

当然如果官方可以合并我的代码会更好 不过像这种功能一般官方都不太会选择合并

因为会影响到很多的老用户 毕竟不是每个老用户都愿意使用 flash

之前提交的 leap 插件 pr 已经过了好久好久 依然没有被合并

所以完全没必要等官方了 先用上新功能在说

后面我也会把一些好用的插件移植到 CVim

让新功能先在 CVim 中沉淀沉淀 真的能得到大家的认可在提交 pr 到 Vim 中也不迟

为什么使用 f 来作为开启键

用 f 作为开启键 可能你会存在两个疑问:

  • 原生 f 功能怎么办?
  • 为什么不用 s ? 之前的 leap 和 sneak 可一直使用的都是 s

原生 f 功能怎么办?

可能有同学会担忧 用 f 作为开启键 原生 f 的功能怎么办?

其实现在 flash 功能完全可以代替掉原生 f 的功能

flash 的匹配算法是基于当前行向上下两侧进行匹配的

这样就可以保证当前行是必定有标记点的

所以基于一个字符搜索也都能跳转

这里还可以配合回车直接跳转到第一个匹配的标记点上

所以对比原生 f 的功能 只有两个情况

  • 匹配的字符是第一个 那么需要多按下一个回车
  • 匹配的字符是第 n 个 那么通过 label 直接跳转过去 效率起飞

为什么不用 s 了

这里出于三个原因放弃了 s 键

s 键非常有用

s 键其实是非常常用并且也非常有用的操作符

如果不用 s 的话 只能是使用 dl 来代替

而之前 sneak 和 leap 为什么使用 s

我猜测很大的概率是因为没法代替 f

和 vim-surround 插件有冲突

在 vscodeVim 中使用 s 会和 vim-surround 插件有冲突

可以看到 surround 也是可以和 y d c s 这些 operater 联合使用的

按 f 要比按 s 舒服

按 f 使用食指 而按 s 要使用无名指 所以必然是食指更舒服一些

问题

目前对于跳转点的显示没有做缓存优化

不过目前在使用过程中还算流畅 所以很可以忍

后面直播的时候再处理

其他的问题暂时还没有发现

如果你在使用过程中遇到问题 记得给我留言或者加我 vx 也可以: cuixr1314

对比 flash.nvim

flash.nvim 包含了很多的功能, 而我只是实现了一些最基础的功能

不过个人认为这些基础功能已经足够了

下面是列举了一些功能

对于习惯使用 flash.nvim 的同学来讲还是有必要了解了解的

  1. 跳转点是在搜索的首字符显示
  2. 开启键是 f 而不是 s
  3. 没有实现 remote 功能, 个人更喜欢使用 ctrl + o 的方式来操作
  4. 没有实现 flit 功能 个人不喜欢

开源

代码在这里 欢迎贡献代码

实现原理比较的简单 所以各位直接看源码吧~~~~

最后

欢迎入坑 vim+vscode

哦对了 每天晚上九点我会在 b站直播写代码

这些插件都是直播的时候实现的 欢迎来和我每天进步一点点

b站:space.bilibili.com/175301983

相关推荐
熊的猫几秒前
DOM 规范 — MutationObserver 接口
前端·javascript·chrome·webpack·前端框架·node.js·ecmascript
天农学子1 分钟前
Easyui ComboBox 数据加载完成之后过滤数据
前端·javascript·easyui
mez_Blog1 分钟前
Vue之插槽(slot)
前端·javascript·vue.js·前端框架·插槽
爱睡D小猪4 分钟前
vue文本高亮处理
前端·javascript·vue.js
开心工作室_kaic7 分钟前
ssm102“魅力”繁峙宣传网站的设计与实现+vue(论文+源码)_kaic
前端·javascript·vue.js
放逐者-保持本心,方可放逐8 分钟前
vue3 中那些常用 靠copy 的内置函数
前端·javascript·vue.js·前端框架
IT古董8 分钟前
【前端】vue 如何完全销毁一个组件
前端·javascript·vue.js
Henry_Wu00110 分钟前
从swagger直接转 vue的api
前端·javascript·vue.js
SameX20 分钟前
初识 HarmonyOS Next 的分布式管理:设备发现与认证
前端·harmonyos
M_emory_1 小时前
解决 git clone 出现:Failed to connect to 127.0.0.1 port 1080: Connection refused 错误
前端·vue.js·git