杨超越编程大赛中，一款超越鼓励师插件，实现原理很简单，插件商店可以下载，各项配置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
网友评论