VS Code摸鱼插件开发 - 悄无声息地看NBA与News

520 阅读2分钟

吗喽的命也是命!!!

插件名称:Fish-God,一款隐蔽性极强的VS Code插件 image.png

是否会因为被领导四面夹击,而感到无所适从?是否会因为搬砖,而感到疲惫?
身为开发人员,要把技术用在自己的爱好上
此摸鱼神器,可让你在工作之余,享受一下生活的乐趣,让你的工作更加轻松愉快!!!:

插件介绍

插件一共有两大摸鱼功能

  • ctrl + shift + p,输入 nba,即激活NBA 文字直播功能
  • ctrl + shift + p,输入 moyu,即激活刷新闻功能
  • ctrl + shift + p,输入 malou,即开始认真工作(吗喽的命也是命!!)

以下将从功能方面讲讲插件的实现思路

NBA 文字直播

  1. 输入nba,右上角会出现一个:basketball:的图标,点击选择比赛,或查看联盟球队排名 Alt text

  2. 选择比赛

    • 进行中,鼠标放在let或者const变量上,即可看到文字直播,底部控制栏也可观看文字直播
    • 已结束,鼠标放在let或者const变量上,即可看到球员数据
    • 联盟球队排名,鼠标放在let或者const变量上,即可看到联盟球队排名

image.png

image.png

image.png

刷新闻

  1. 输入moyu
  2. 鼠标放到constletthis 变量上,即可边打代码边刷新闻
  • const --- 底部导航栏对应的新闻详情
  • let --- 掘金社区沸点
  • this --- 每次都会更新 30 条社会新闻,与底部控制栏一样

底部控制栏也可查看新闻,并支持上下页切换

f5d2e4d700a8d6c881ed466b2ced024.png

649fbfe0769689c79e27bef76e4eaa3.png

关闭插件

**只要输入malou,即可关闭插件,关闭后不会占用内存

技术实现

首先肯定是要查看VS Code官方文档提供的API呀!VS Code文档地址

头部编辑栏

image.png

先在package.json中注册

  "contributes": {
    "commands": [
      {
        "command": "Fish-God.openGames",
        "title": "NBA",
        "icon": {
          "light": "./ball.svg",
          "dark": "./ball.svg"
        }
      }
    ],
    "menus": {
      "editor/title": [
        {
          "command": "Fish-God.openGames",
          "group": "navigation",
          "when": "myContextKey" // 控制显示的变量
        }
      ]
    }
  },

在需要用时显示icon

vscode.commands.executeCommand("setContext", "myContextKey", true);

选项框

image.png


        options = gameData.map((_: any) => {
          return {
            label: _.optionText,
            id: _.gameId,
            status: _.status,
          };
        });

        const result = await vscode.window.showQuickPick(options, {
          placeHolder: "请选择一个比赛",
        });

        console.log("result", result);
        if (result) {
          vscode.window.showInformationMessage(result.label);
        }

END

  • 欢迎大家安装使用,如果觉得好用,给个五星好评呗,谢谢啦!!!
  • 如果有什么问题与建议,欢迎私信评论留言
  • 或者有什么摸鱼的想法,可以告诉我,让我来帮你实现哈哈哈