当前位置：首页 > article >正文

vscode摸鱼学习插件开发

article 2024/11/1 7:35:07

不知道大家在摸鱼的时候，会不会想要学习？
或者有没有考公人，下班要学习的？
上班时间摸鱼，下班时间不够学习？

为此，我决定开发一个vscode插件，来刷粉笔题

粉笔插件名称：Fenbi Tools
vscode扩展可搜索安装

摸鱼插件：Fish Tools

1、展示题库分类

首先实现在侧边栏中展示前20个热搜，没必要太多

1、package.json 增加配置

"views": {
      "fenbiBar": [
        {
          "type": "webview",
          "id": "openFenbiWebview",
          "name": "container"
        }
      ]
    },
"viewsContainers": {
      "activitybar": [
        {
          "id": "fenbiBar",
          "title": "fenbi",
          "icon": "resources/dark/fenbi.svg"
        }
      ]
    },

如此，侧边栏就会展示粉笔按钮

按钮有了，内容可以通过webview视图展示，vscode.window.registerWebviewViewProvider 可以注册webview视图

 vscode.window.registerWebviewViewProvider("openFenbiWebview", provider)

粉笔分类内容，可以通过调粉笔的接口获取，传递到webview内

const cacheResult = await getCache();
const res = await getCategories()
webview.postMessage({
   command: "init",
   data: modifyArray(res, cacheResult.keypointIds),
 });

到这里，完成情况如图所示，
在这里插入图片描述
只有分类当然还是不够的，因为我们需要实际参与做题

2、题目内容

通过vscode扩展与webview 进行消息传递获取数据。具体实现可参考vscode摸鱼插件开发消息传递

let postExerciseId = exerciseId;
if (!postExerciseId) {
  const res = await getExercisesId({ keypointId: id });
  postExerciseId = res.id;
}
const exerciseResult = await getExercises(postExerciseId);
const questionResult = await getQuestion(postExerciseId);

webview.postMessage({
  command: "getQuestion",
  data: {
    exerciseId: postExerciseId,
    ...questionResult,
  },
});