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

相关推荐
Asize2 分钟前
前端接口工程:axios + mock,前端不再傻等后端
前端·javascript
结网的兔子2 分钟前
【前端开发】UniApp 项目地图选型与Web-APP跨端迁移方案
前端·uni-app
Canace7 分钟前
给 Claude 一个链接,它真的读了原文吗
前端·人工智能·ai编程
爱丶不疚8 分钟前
Electron net 模块你可以没用过,但不能不知道
前端·electron
cidy_988 分钟前
React + Ant Design 通用企业数据统计模块实战
前端
渣波11 分钟前
React 性能优化与状态管理双雄:useMemo 与 useReducer 深度解析
前端·javascript
Maxkim13 分钟前
把智能体塞进浏览器侧边栏:我在 MV3 里踩的 5 个坑
前端·后端
渣波13 分钟前
告别 LLM 幻觉:用 Harness 工程化思维打造生产级 AI 应用
前端·javascript
breeze jiang31 分钟前
React Todos 前端独立开发全解:用 vite-plugin-mock + axios 封装,再也不等后端接口
前端·react.js·状态模式
cyadyx38 分钟前
【vue】Pinia相对Vuex
前端·javascript·vue.js