乐趣区

关于vscode插件:摸鱼写了一个番茄时钟vscode插件来摸鱼劳逸结合

jiezi

想法

想找一个番茄时钟的 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.showTime
let timerPart = this.getShowClock(currentTime)
this._clockBarText.text = `$(clock) ${timerPart}`;

const contents = new MarkdownString(btns.join('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'), 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/…

退出移动版