我写了一个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!!

相关推荐
xiaofeichaichai1 小时前
Webpack
前端·webpack·node.js
问心无愧05132 小时前
ctf show web入门111
android·前端·笔记
唐某人丶2 小时前
模型越来越强,我们还需要 Agent 工程吗?—— 从价值重估到 Harness 实践
前端·agent·ai编程
智码看视界2 小时前
现代Web开发基础:全栈工程师的起航点
前端·后端·c5全栈
JS菌2 小时前
手写一个 AI Agent 全栈项目:从沙箱执行到子智能体的完整实现
前端·人工智能·后端
excel4 小时前
HLS TS 文件损坏的元凶:Git 提交与拉取
前端
Aphasia3114 小时前
https连接传输流程
前端·面试
徐小夕4 小时前
万字长文!千万级文档 RAG 知识库系统落地实践
前端·算法·github
threelab4 小时前
Three.js 物理模拟着色器 | 三维可视化 / AI 提示词
开发语言·前端·javascript·人工智能·3d·着色器