我写了一个VSCode的仿Neovide光标动画

Neovide的灵魂之一就是它的光标动画(我就是图这个才用neovim的 ),还好VSCode中有一个插件Custom CSS and JS Loader,支持我们自己向注入CSS和JS,因此可以使用这个途径,直接写个注入脚本,检测VSCode编辑区的光标,然后挂载canvas实现动画效果。具体的动画实现参考neovide: No Nonsense Neovim Client in Rust的源码,至于光标的检测是参考的reddit上一个大佬的代码:I made neovide alike cursor effect on vscode

实现效果

话不多说先看效果

单个光标

多个光标

现有问题

reddit上面大佬的代码只兼容单个光标,当有多个光标时,他的动画绑定就有问题,有时失效乱飘,但是他的代码在分屏时可以处理屏间光标跳转。对于我个人而言,多光标操作还是很频繁的,所以优先处理了多光标适配,大致原理就是给每个光标dom节点绑定一个自定义的id属性,但是由于分屏之后两个vscode两个分屏中的cursor不是同一个实例,所以原代码的跨屏动画就没有了,不过每个分屏中的动画还是能正常运行的。

使用方式

github链接:LengineerC/vscode-neovide-cursor: A Neovide like cursor animation for VS Code

下载neovide-cursor.js,或直接复制代码自己找个文件保存。

VSCode安装Custom CSS and JS loader插件, 向settings.json添加配置:

go 复制代码
```
"vscode_custom_css.imports": [
    "file:///C:/path/to/your/neovide-cursor.js"
]
```

然后ctrl+shift+p执行Enable Custom CSS and JS后重启VSCode即可

修改配置的话保存修改后重新执行Enable Custom CSS and JSReload Custom CSS and JS就行

有bug欢迎提出issue!!

相关推荐
踩着两条虫9 小时前
VTJ.PRO 核心架构全公开!从设计稿到代码,揭秘AI智能体如何“听懂人话”
前端·vue.js·ai编程
jzlhll12310 小时前
kotlin Flow first() last()总结
开发语言·前端·kotlin
蓝冰凌11 小时前
Vue 3 中 defineExpose 的行为【defineExpose暴露ref变量】详解:自动解包、响应性与实际使用
前端·javascript·vue.js
奔跑的呱呱牛11 小时前
generate-route-vue基于文件系统的 Vue Router 动态路由生成工具
前端·javascript·vue.js
柳杉11 小时前
从动漫水面到赛博飞船:这位开发者的Three.js作品太惊艳了
前端·javascript·数据可视化
Greg_Zhong12 小时前
前端基础知识实践总结,每日更新一点...
前端·前端基础·每日学习归类
We་ct12 小时前
LeetCode 148. 排序链表:归并排序详解
前端·数据结构·算法·leetcode·链表·typescript·排序算法
IT_陈寒12 小时前
JavaScript开发者必看:5个让你的代码性能翻倍的隐藏技巧
前端·人工智能·后端
还是大剑师兰特13 小时前
Vue3 中 computed(计算属性)完整使用指南
前端·javascript·vue.js