VSCode 扩展推荐Easy Anim Code - 为你的日常操作来点舒适

6,654 阅读4分钟

最近我在VSCode扩展市场上发现了一个名为Fluent UI for VSCode的插件。这个插件设计非常美观,但在使用了一段时间后,我发现了很多问题,而且似乎作者也不再积极维护这个插件。

同时,我还发现了一个名为VSCode Animations的插件,它为VSCode添加了动画效果。

看到这两个插件的功能后,我决定开发一个新的插件,将Fluent UI的美观设计与VSCode Animations的动态效果结合起来。

image.png image.png

EasyAnimCode

EasyAnimCode 是一个为 VSCode 添加日常操作动画过渡的扩展。

功能

  • 为 VSCode 的常见操作添加动画效果。
  • 修改 VSCode 的基础样式,带来更美观的视觉体验。
  • 为 VSCode 添加透明背景
  • 目前仅确定支持 Windows 平台(其他平台尚未测试)。
  • 本插件 v0.0.2起 支持 VSCode 版本 1.94
  • 最新版V0.1.6 已发布,样式代码重构,体感更快

本插件与其他动画插件有一定的冲突(比如:VSCode Animations),建议在使用本插件前先卸载或者禁用其他插件。暂不支持苹果系统

安装

  1. 以管理员身份运行 VSCode。
  2. 从 VSCode 扩展市场下载并安装 EasyAnimCode,或手动安装 .vsix 文件。
  3. 通过 VSCode 命令面板(按 Ctrl+Shift+P)执行 easy-anim-code.enable 命令启用动画效果。执行完毕后,重新加载 VSCode 以应用更改。

重新加载 VSCode 后,可能会提示“安装已损坏”,这是由于插件修改了配置文件。若不想再看到此通知,可以点击通知右侧齿轮图标,选择不再显示。

禁用插件

  1. 以管理员身份运行 VSCode。
  2. 通过 VSCode 命令面板(按 Ctrl+Shift+P)执行 easy-anim-code.disable 命令禁用动画效果。执行完毕后,重新加载 VSCode。

禁用插件的同时,会重置插件的配置

重置和卸载

因为插件会修改 VSCode 的本地配置文件,若需恢复 VSCode 的初始状态,请按照以下步骤重置设置: 卸载扩展前,务必执行重置操作,否则 VSCode 状态不会自动恢复。 注意:卸载插件不会自动恢复 VSCode 原有状态,卸载前请先执行重置命令。

  1. 以管理员身份运行 VSCode。
  2. 通过 VSCode 命令面板(按 Ctrl+Shift+P)执行 easy-anim-code.reset 命令将设置重置为默认状态。执行完毕后,重新加载 VSCode。

重置注意:重置注意:重置后若想继续使用插件,只需再次执行 easy-anim-code.enable。

禁用插件的同时,会重置插件的配置

VSCode 更新

VSCode 更新之后,需要重新执行 easy-anim-code.enable 命令启用动画效果。

配置选项

为避免与用户的主题插件发生冲突,EasyAnimCode 提供了一些可配置项,用户可以根据需要自定义插件设置。

考虑到不同用户使用的主题插件不同,如果直接使用默认插件,可能与用户的主题有颜色和样式的冲突。

setting.png

  • 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

界面预览

home2.png

主题:Rainglow-Absent Contrast

home3.png

主题:XCode-default

侧边栏

侧边栏.gif

扩展页面

扩展动画.gif

编辑页面

编辑动画.gif

右键菜单

右键动画.gif

命令弹窗

命令弹窗动画.gif

搜索

搜索动画.gif

设置

设置动画.gif

Code

code动画.gif

通知

通知动画.gif

Easy-anim-code.AnimLevel 更改为 High

列表

high列表动画.gif

设置背景图片,同时透明度为60

image.png

image.png

wallhaven-rrzm1m.jpg

image.png

wallhaven-o5y93l.jpg

常见问题解决

插件已执行过,本次中止执行

此问题只需要执行一遍 disabled命令即可,然后再运行enable命令即可。

更新 "Easy Anim Code"扩展时出错。

此类问题一般不是插件的问题,请尝试卸载插件,然后重新安装插件

执行出现异常

此问题是插件内部执行出现异常,请仔细核对你自定义的配置参数是否规范

以上就是此插件的大部分功能,还有一些小功能未标注出来