vscode定时弹窗提示（超越鼓励师扩展自定义）

杨超越编程大赛中，一款超越鼓励师插件，实现原理很简单，插件商店可以下载，各项配置setting中都有说明；

我觉得可以更丰富一点，不局限追星，有很大的改造空间，例如可以换上了女朋友的照片或者其他，所以可以适当的修改插件源代码，弹出不一样的内容：

vscode扩展商店搜索

image.png

完成安装后，查找扩展位置
我的安装位置如下：（根据操作系统或其他因素安装位置可能有所不同）
C:\Users\user.vscode\extensions\formulahendry.ycy-0.1.1

image.png

对代码进行改造asset.js资源加载；extension.js 根据时间设置插件弹出；reminderView.js 插件主体（需要做更改的文件）；scheduler.js计算弹出时间，utility.js扩展绑定至vscode IDE;

//reminderView.js
'use strict';
import * as vscode from 'vscode';
import Asset from './asset';

export class ReminderView {
    private static panel: vscode.WebviewPanel | undefined;

    public static show(context: vscode.ExtensionContext, ) {
        let asset: Asset = new Asset(context);

        const imagePath = asset.getImageUri();
        const title = asset.getTitle();

        if (this.panel) {
            this.panel.webview.html = this.generateHtml(imagePath, title);
            this.panel.reveal();
        } else {
            this.panel = vscode.window.createWebviewPanel("ycy", "杨超越", vscode.ViewColumn.Two, {
                enableScripts: true,
                retainContextWhenHidden: true,
            });
            this.panel.webview.html = this.generateHtml(imagePath, title);
            this.panel.onDidDispose(() => {
                this.panel = undefined;
            });
        }
    }

    protected static generateHtml(imagePath: vscode.Uri|string, title: string): string {
        let html = `<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>杨超越</title>
        </head>
        <body>
            <div><h1>${title}</h1></div>
            <div><img src="${imagePath}"></div>
        </body>
        </html>`;

        return html;
    }
}

操作完成之后保存重启IDE，提示插件更改点击确认，就可以了
本地图片可以全部替换成自己整理的文件

完成后

image.png

最后编辑于：2019.04.28 13:05:05