想法
想找一个番茄时钟的vscode插件来劳逸结合，有法则摸鱼，翻了很多vscode 插件都不太称心，罗唆本人撸了一个。
个性
- 遵循番茄时钟的工作形式--每1个番茄时钟有一个短休息时间，4个番茄时钟后有一个长劳动时钟(反对自定义)
- 操作接触简略 -- 开始、暂停、重启、重置都能够通过点击状态栏的图标来操作
- 有一个简略的统计性能，能够统计明天的番茄时钟数
- 工夫到了有告诉提醒，并且有快捷操作按钮
- 有切换正反计时的性能，能够用来做倒计时,也能够用来做正计时
实现
明确需要
- 番茄时钟的工作形式 -- 每1个番茄时钟有一个短休息时间，4个番茄时钟后有一个长劳动时钟(反对能自定义)
- 提供操作 -- 开始、暂停、重启、重置
- 联合vscode Api 提供状态栏图标显示\命令行\告诉\配置等
思路形象
先形象实现番茄时钟的性能相干类而后联合vscode api实现
- 计时器Timer类 -- 提供时钟性能，每interval 执行一次tick操作，调用
callback - Pomodoro类 -- 记录番茄时钟的type(劳动还是工作)，状态(running、pause、done等)，还有绑定的timer
- PomodoroManager类 --
Timer和Pomodoro都是和平台无关也就是没有vscode相干的api，能够迁徙到其余平台，PomodoroManager的话负责绑定Pomodoro与调用vscode api -- 绘制状态栏图标、告诉、绑定命令等 - 其余 -- 在activate函数注册命令与package.json中配置的命令等，这些都是vscode约定的形式
细节
vscode 插件的开发能够看看官网文档，根本看完hello world与几个demo之后就能够动手了，插件所有的性能都是通过事件订阅机制实现的，而且vscode api 对象、事件划分很明确，上手不难
- Your First Extension
- vscode插件demo合集
次要说下番茄时钟实现的细节：为了在状态栏提供实时的时钟更新与hover上的tootip操作按钮费了一点功夫。参考vscode debug时候的状态：提供开始，暂停，复原，重启，敞开等操作，如图：
实现如图成果：
为了实现tooltip能够操作，tooltip要是MarkdownString 类型，而且必须是a标签绑定command，能力触发操作。
局部代码如下：
this._commandMap = { start: { link: Uri.parse( `command:pomodoroClock.startPomodoro` ), imgSrc: Uri.joinPath(this.vscodeContext.extensionUri, 'assets/imgs', 'start.svg') }}const btns = [];if (this.currentPomodoro.status === PomodoroStatus.None || this.currentPomodoro.status === PomodoroStatus.Done) { btns.push(`<a href="${this._commandMap.start.link}"><img src="${this._commandMap.start.imgSrc}" /></a>`);}let currentTime = this.currentPomodoro.showTimelet timerPart = this.getShowClock(currentTime)this._clockBarText.text = `$(clock) ${timerPart}`;const contents = new MarkdownString(btns.join(' '), true);contents.isTrusted = true;contents.supportHtml = true;this._clockBarText.tooltip = contents;插件其余截图
插件公布
公布提供两种形式：
- 一种生成personal access token 之后， 用vsce命令行公布
- 第二种是间接在
https://marketplace.visualstudio.com/后盾上传公布
参考文档：https://code.visualstudio.com...
最初
大家感兴趣能够try try。
Repo: https://github.com/jackluson/...