最近我在VSCode扩展市场上发现了一个名为Fluent UI for VSCode的插件。这个插件设计非常美观,但在使用了一段时间后,我发现了很多问题,而且似乎作者也不再积极维护这个插件。
同时,我还发现了一个名为VSCode Animations的插件,它为VSCode添加了动画效果。
看到这两个插件的功能后,我决定开发一个新的插件,将Fluent UI的美观设计与VSCode Animations的动态效果结合起来。
EasyAnimCode
EasyAnimCode 是一个为 VSCode 添加日常操作动画过渡的扩展。
功能
- 为 VSCode 的常见操作添加动画效果。
- 修改 VSCode 的基础样式,带来更美观的视觉体验。
- 为 VSCode 添加透明背景
- 目前仅确定支持 Windows 平台(其他平台尚未测试)。
- 本插件
v0.0.2起支持 VSCode 版本1.94。 - 最新版V0.1.6 已发布,样式代码重构,体感更快
本插件与其他动画插件有一定的冲突(比如:VSCode Animations),建议在使用本插件前先卸载或者禁用其他插件。暂不支持苹果系统
安装
- 以管理员身份运行 VSCode。
- 从 VSCode 扩展市场下载并安装 EasyAnimCode,或手动安装
.vsix文件。 - 通过 VSCode 命令面板(按
Ctrl+Shift+P)执行easy-anim-code.enable命令启用动画效果。执行完毕后,重新加载 VSCode 以应用更改。
重新加载 VSCode 后,可能会提示“安装已损坏”,这是由于插件修改了配置文件。若不想再看到此通知,可以点击通知右侧齿轮图标,选择不再显示。
禁用插件
- 以管理员身份运行 VSCode。
- 通过 VSCode 命令面板(按
Ctrl+Shift+P)执行easy-anim-code.disable命令禁用动画效果。执行完毕后,重新加载 VSCode。
禁用插件的同时,会重置插件的配置
重置和卸载
因为插件会修改 VSCode 的本地配置文件,若需恢复 VSCode 的初始状态,请按照以下步骤重置设置: 卸载扩展前,务必执行重置操作,否则 VSCode 状态不会自动恢复。 注意:卸载插件不会自动恢复 VSCode 原有状态,卸载前请先执行重置命令。
- 以管理员身份运行 VSCode。
- 通过 VSCode 命令面板(按
Ctrl+Shift+P)执行easy-anim-code.reset命令将设置重置为默认状态。执行完毕后,重新加载 VSCode。
重置注意:重置注意:重置后若想继续使用插件,只需再次执行 easy-anim-code.enable。
禁用插件的同时,会重置插件的配置
VSCode 更新
VSCode 更新之后,需要重新执行 easy-anim-code.enable 命令启用动画效果。
配置选项
为避免与用户的主题插件发生冲突,EasyAnimCode 提供了一些可配置项,用户可以根据需要自定义插件设置。
考虑到不同用户使用的主题插件不同,如果直接使用默认插件,可能与用户的主题有颜色和样式的冲突。
Easy-anim-code.Primary Color: 设置插件的主色调。Easy-anim-code.Background Image: 设置全局背景图片。Easy-anim-code.CursorWidth:代码编辑区光标宽度Easy-anim-code.CursorBackgroundColor:代码编辑区光标背景颜色,支持多个颜色组合,多个颜色之间用逗号分割(配置推荐: #19dcea,#b22cff,#ea2222,#f5be10,#3bd80d)Easy-anim-code.Background Image Blur: 调整背景图片的高斯模糊度。Easy-anim-code.VSCode Background Opacity: 调整全局背景的透明度。
路径为绝对路径,window 平台路径需要转义,例:"C:\luoqixi\0614_11.png" 图片路径不支持有中文
图片只支持 png,请尽量选合适自己屏幕分辨率的图片,图片过小,观感不佳
配置值需使用 16 进制颜色代码,支持透明度设置。若修改配置,需先执行 easy-anim-code.disable,再运行 easy-anim-code.enable 并重启 VSCode 以应用更改。
CursorWidth 默认开启,宽度为 1,如果想使用 VSCode 默认效果,请设置为 0 CursorBackgroundColor 如果不设置,默认使用 VSCode 默认的光标颜色,请设置为 none
界面预览
侧边栏
扩展页面
编辑页面
右键菜单
命令弹窗
搜索
设置
Code
通知
Easy-anim-code.AnimLevel 更改为 High
列表
设置背景图片,同时透明度为60
常见问题解决
插件已执行过,本次中止执行
此问题只需要执行一遍 disabled命令即可,然后再运行enable命令即可。
更新 "Easy Anim Code"扩展时出错。
此类问题一般不是插件的问题,请尝试卸载插件,然后重新安装插件
执行出现异常
此问题是插件内部执行出现异常,请仔细核对你自定义的配置参数是否规范
以上就是此插件的大部分功能,还有一些小功能未标注出来