当前位置: 首页 > Web前端 > HTML

摸鱼给摸鱼写了一个番茄时钟vscode插件(劳逸结合)

时间:2023-03-28 11:33:59 HTML

想找一个番茄时钟的vscode插件,劳逸结合。墨玉正则。找了很多vscode的插件,都不满意。自己捡了一个。功能沿用番茄钟的工作方式——每1个番茄钟有一个小休息,4个番茄钟后有一个长时间休息点击状态栏中的图标有一个简单的统计功能,可以统计今天的番茄钟数,还有时间到了会有通知提示,还有一个快捷按钮,可以切换正反计时功能,可以用来倒计时,也可以用来做正计时,达到明确的要求番茄钟的工作方式——-每1个番茄钟有一个短休息时间,4个番茄钟后有一个长休息时钟(支持自定义)提供操作--开始、暂停、重启、重置结合vscodeApi提供状态栏图标显示\命令行\notification\configuration等思路抽象先抽象出番茄时钟的功能相关类,然后结合vscodeapi实现定时器Timer类--提供时钟功能并执行每间隔一个tick操作,调用callbackPomodoro类——记录番茄钟的类型(休息或工作)、状态(运行、暂停、完成等),以及绑定的timerPomodoroManager类——Timer和Pomodoro都是platform-独立的,即与vscode无关的api,可以移植到其他平台。PomodoroManager负责绑定Pomodoro和调用vscodeapi--绘制状态栏图标、通知、绑定命令等--在activate函数中注册命令和在package.json中配置命令等这些是约定方式的细节通过vscode。vscode插件的开发可以参考官方文档。看完helloworld和几个demo,就可以开始了。插件的所有功能都是通过事件订阅机制实现的,加上vscode的api对象,事件的划分非常清晰,上手并不难。YourFirstExtensionvscodeplugindemocollection主要讲了番茄时钟的实现细节:花了点功夫在状态栏提供实时时钟更新和悬停上的tootip操作按钮。参考vscode调试状态:提供启动、暂停、恢复、重启、关闭等操作,如图:实现如图效果:为了实现tooltip可以操作,tooltip必须为MarkdownString类型,必须是标签绑定命令才能触发操作。部分代码如下:this._commandMap={start:{link:Uri.parse(`command:pomodoroClock.startPomodoro`),imgSrc:Uri.joinPath(this.vscodeContext.extensionUri,'assets/imgs','start.svg')}}constbtns=[];if(this.currentPomodoro.status===PomodoroStatus.None||this.currentPomodoro.status===PomodoroStatus.Done){btns.push(``);}letcurrentTime=this.currentPomodoro.showTimelettimerPart=this.getShowClock(currentTime)this._clockBarText.text=`$(clock)${timerPart}`;constcontents=newMarkdownString(btns.join(''),true);contents.isTrusted=true;contents.supportHtml=true;this._clockBarText.tooltip=contents;Plug-ins发布其他截图插件有两种方式:一是生成个人访问令牌,二是直接发布到https://marketplace.visualstudio.com/后台上传发布参考文档:https://code.visualstudio.com...最后有兴趣的可以试试tryRepo:https://github.com/jackluson/...