在vscode中悄无声息地摸鱼

想法

作为前端开发者,大多数人都使用 VSCode,并且可能会找一些在 VSCode 中可以摸鱼的插件。我也尝试了一些:

  • Zhihu On VSCode,知乎摸鱼。

  • daily anime,追番插件。

  • 韭菜盒子,看股票、基金、期货实时数据。

  • 电影集,看热映电影。

  • 除此之外,还有许多其他的插件,比如听音乐、看小说、刷力扣、浏览掘金等等。甚至有人开发了一个类似小霸王游戏机的插件。

VSCode本身是基于 Node.js 和浏览器的应用程序,因此,熟悉前端开发的同学可以想到,在 VSCode 中可以实现几乎所有 Node.js 和浏览器能做的事情。上面提到的摸鱼插件有着很好的想法,功能和代码也做得不错,但它们忽略了一个重要的点:

摸鱼需要保持隐蔽性

这些摸鱼插件占用了大量的屏幕空间,有些甚至将整个屏幕占满。既然如此,为什么不直接打开浏览器,直接摸鱼呢?

最好的摸鱼插件是什么?

我认为扩展商店中的这些摸鱼插件,整活已经大于摸鱼,我更需要的是真正的安全的摸鱼方案,那么一个完美的摸鱼插件究竟需要哪些特点呢?

  • 绝对的隐蔽性,不能让同事和老板一眼就察觉到你在摸鱼。

  • 专属的阅读内容,每个人喜欢的平台和内容都不同。例如,我喜欢浏览头条和知乎,而其他人可能更喜欢浏览掘金或小红书,只有喜欢的内容才能让摸鱼更加舒适。

  • 丝滑的操控,在保持隐蔽的同时,能够在别人专注查看你屏幕内容的时候,瞬间隐藏摸鱼的内容。这绝对不能只依赖于快捷键,因为如果你突然按下键盘,就会引起巨大的摸鱼嫌疑。

然而,是否存在这样一款插件能够满足上述3个要求呢?

答案是:并没有!

那么我们该怎么办呢?那就是自己开发插件。

我的专用摸鱼插件

我个人非常喜欢浏览头条,无论是在马桶上、吃饭时、躺在床上甚至是在梦中,我都会刷头条。只有在写代码的时候无法刷到。

因此,为了满足我的一边摸鱼一边写代码的需求,我开发了一款专用的摸鱼插件。在这里,我将介绍如何使用这款插件,并分享开发思路。

我并不是在推销我的插件,而是希望给大家提供一些开发思路。如果你感兴趣,也可以尝试自己开发一款适合自己的摸鱼插件,因为最适合自己的才是最好的。

前置知识

  • VSCode 扩展相关接口,开发相关界面和操作。

  • puppeteer 用于爬取头条内容。

使用方式

平时还是以工作为主,插件基于 puppeteer,比较吃内存,所以启动插件的方式不应该是默认启动,我采用的方式是:通过 ctrl+shift+p 打开命令面板,输入开始摸鱼,用于激活插件,此时右下角状态栏(Status Bar)激活,并爬取了一些内容,通过左右切换按钮切换内容,最后一个按钮点击,弹出一个新窗口(Webview),可以扫码登录,这样爬取的内容就是平台推荐我的内容。

如果环境比较安全,可以点击状态栏标题,可弹出快速选择框,展示内容列表(QuickPick),可以快速找到想看的内容:

内容选择后,如何才能悄无声息的看到内容和评论呢?

我这里采用了一种极为隐蔽并且操作方便的方式,那就是将鼠标移动到某个单词上,然后弹出展示框(Document selectors):

  • 文章内容

它能做什么?

VSCode 几乎支持在它内部任何位置的扩展,这里先看一下基础界面上可操作的区域:

接下来让我们带着问题去了解 VSCode 插件开发。

  • 评论内容

  • 情况危险的时候只要将鼠标轻轻挪开,就可以隐藏掉,这样的操作方式比老板键隐蔽的多。

    入门 VSCode 插件开发

    上面提到了很多内容,主要是为了激发大家的学习兴趣。在学习新知识时,很多同学不知道如何将所学知识应用到实际项目中。

    但是,如果我们能以兴趣作为学习的动力,并设定一个项目目标,就能够坚持下去并持续学习。

    这样的学习方式更加有效和有趣,下面开始进入正题:

    了解 VSCode 都可以做哪些功能

    在学习一项新的技能时,首先要做的就是以下几点:

  • 它能做什么?

  • 我能用它做什么?

  • 值不值得去学习?

  • Web View,相当浏览器打开一个网页,这块我们后续可以用于做扫码登录。

  • Status Bar 状态栏位于底部,可以做为显示信息和操作,分为主要(左)和次要(右)。

  • Quick Pick,让用户从列表中选择其中一个。

  • 还有一些是通过事件触发才可以展示到界面上的 UI,例如:

  • Display Notifications 提供了三个 API 用于显示不同严重程度的通知消息。

  • Show Hovers 鼠标悬停到匹配的信息后,展示内容。

VSCode 还提供了超多的接口,这里就不一一举例,以上的内容已经足够强大,完全可以支撑摸鱼插件的开发。更多的扩展接口请查看官方文档,写的很详细。

我能用它做什么?

上文介绍的摸鱼插件就是首当其冲的可以做的,虽然摸鱼这种事情看起来很 low,但是觉得是一个好的入门方式,毕竟兴趣是最好的老师,我想没人不爱摸鱼吧。

如果觉得摸鱼插件很 low,你可以发动你的小脑筋做点有用的插件。比如我英文不好,我自己做了一款翻译插件,我经常在变量命名时使用,它的基本使用方式是,写一个中文名,然后选择,翻译,凭借3年级的英文水平,选一个大概合适的单词,然后在对其做格式转换(大驼峰、小驼峰、下划线等等)。这里我也不贴出插件名了,毕竟我是自用的。

值不值得去学习?

总的来说,我认为学习 VSCode 插件开发是非常值得的。首先,学习成本并不高,因为官方文档写得非常详细。

其次,由于 VSCode 的使用占比极高,因此如果您能够开发出一款优秀的插件,那么一定会有很多用户使用它,这会给您带来很大的成就感。

创建插件开发项目

最好的学习方式就是看官方文档,本文简单讲解,带大家快速入门。

官方提供了基于 yo 的脚手架,帮助我们快速生成插件开发的基础环境,安装 yo 和 generator-code:

npm install -g yo generator-code

然后执行

yo code

第一个问题

What type of extension do you want to create?

选择 New Extension,ts 或 js 都可以,其他选项按照问题随意填写。

创建好项目后,可以按 F5 调试插件,按 Ctrl+Shift+P 输入 Hello World,如果看到出现 Hello World from HelloWorld! 通知,则插件运行成功。

目录结构

.
├── .vscode
│   ├── launch.json
│   └── tasks.json
├── .gitignore
├── README.md
├── src
│   └── extension.ts    // 插件的入口文件
├── package.json        // 插件的配置文件
├── tsconfig.json
├── webpack.config.js
├── ...

创建的目录结构非常简单,我们只需要关注 src/extension.ts 和 package.json 即可。

extension.ts 文件中 export 两个方法:activate 和 deactivate,表示激活和销毁时执行的方法,通常我们将核心代码都写在 activate 函数中。

import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
}
export function deactivate() {}

package.json 中有几个特殊的字段需要注意:

  • engines: 最低支持的vscode版本

  • activationEvents: 用来定义插件在什么时候被激活

  • contributes: 最重要的配置,几乎插件所有的配置都在这里,内容较多,请查看文档

看到这里基本就可以说是入门了,剩下的内容直接从实战开始,去了解更多的 API 使用方式。

实战

本章节通过对常用 API 的核心属性方法讲解,结合实际操作带大家了解如何开发插件。

配置

首先打开 package.json,在 contributes 属性中添加 commands 数组,参数中包含:

  • command: 指令,可以在代码中去调用。

  • title:名称,例如在 ctrl+shift+p 输入标题搜索,然后确定可执行这条指令。

这里注册一条初始化摸鱼插件和结束摸鱼的指令:

"contributes": {
  "commands": [
    {
      "command": "FishX.init",
      "title": "开始摸鱼"
    },
    {
      "command": "FishX.dispose",
      "title": "结束摸鱼"
    }
  ]
},

然后注册两个快捷键指令, 用于切换内容,与 commands 一样,需要在 contributes 属性中添加 keybindings 数组,它同样具有 command 属性,不同的是:

  • key: 快捷键,组合快捷键用 + 连接。

"keybindings":[
  {
    "command": "FishX.next",
    "key": "alt+d"
  },
  {
    "command": "FishX.prev",
    "key": "alt+a"
  }
]

其他还可以配置一些插件的基础信息:

  • displayName: 插件名称,这个是在扩展搜索时,展示的名称。

  • description: 插件简介,搜索时同样展示。

  • publisher: 发布者,这块与你后续发布时有关。

  • icon: 图标,直接扔到根目录即可。

爬虫

Puppeteer 在这里作为爬虫使用,用于爬取摸鱼的内容,这是个很有趣的库,这块不做多讲,大家可以自行了解。

参考文档:http://www.puppeteerjs.com/

或者有兴趣可以看一下我的另一篇文章《使用前端技术破解掘金滑块验证码》快速上手 puppeteer 章节,也可以帮你快速入门。

注册指令

通过 vscode.commands.registerCommand 可以将命令 ID 绑定到执行函数。

前文在 package.json 中注册了 FishX.init 命令,这里我们使用 registerCommand 函数将此命令绑定相应的执行函数:

import * as vscode from 'vscode';

export async function activate(context: vscode.ExtensionContext) {

    const initDisposable = vscode.commands.registerCommand(
      "FishX.init",
      async () => {
          // 需要执行的代码
      }
    )

    context.subscriptions.push(
        initDisposable,
    );
}

registerCommand 执行后返回一个 Disposable 对象,使用 context.subscriptions.push 将它添加到当前插件的上下文中,以便在插件被注销时自动释放这些资源。

context.subscriptions.push() 可以将一个或多个 Disposable 对象添加到当前插件的上下文中。

状态栏

VSCode 状态栏是一个非常重要的区域,大多数插件和一些常用配置在这里进行操作。

它具备操作便捷和屏占比低,并且不处于屏幕的核心区域,如果别人在看你的屏幕时,这个位置大概率不会被专注去看,这也是我把它作为插件操作的入口处的原因。

官方示例:https://github.com/microsoft/vscode-extension-samples/tree/main/statusbar-sample

功能

状态栏提供了一些简单的功能,空间比较紧张,所以要谨慎使用:

属性:

方法:

代码

这里创建了 4 个 StatusBarItem,分别对应内容展示、左右切换按钮、登录按钮。

const statusBarContent = vscode.window.createStatusBarItem(
  vscode.StatusBarAlignment.Right,
  100
);
statusBarContent.text = "$(loading~spin) 鱼塘建造中...";
statusBarContent.command = "FishX.quickPick";
statusBarContent.show();
// 其余照葫芦画瓢...

$(loading~spin) 表示加载中的图标,查看更多图标。

快速选择

光靠左右切换,很难快速定位到想看的内容,这时候通过上文触发的 FishX.quickPick 指令,来弹出内容列表:

  • 支持字符串,由于空间问题,尽量使用短文本。

  • 支持图标,尽量在必要的情况下使用,例如制作切换内容和登录按钮。

  • 具备点击事件的功能。

  • 三种状态:进度、失败、警告。

  • 提示:VSCode 提供了内置图标,状态尽量不使用自定义颜色。

    API 详解

    StatusBar 是 VSCode 提供的整个状态栏,我们要做的是将功能写在 StatusBarItem 上,你可以在 StatusBar 添加多个 StatusBarItem。

    使用 createStatusBarItem 函数可以创一个 StatusBarItem:

    createStatusBarItem(alignment?: StatusBarAlignment, priority?: number): StatusBarItem
    

    参数:

  • alignment: 对其方式,参考 StatusBarAlignment。

  • priority:优先级,值越高显示在更靠左侧的位置。

  • text: 展示文字或图标,图标使用 $(***) 的方式。

  • command:点击时触发的指令。

  • tooltip:提示文字。

  • 更多请参考 https://code.visualstudio.com/api/references/vscode-api#StatusBarItem

  • dispose():销毁。

  • show():展示,注意创建后调用才会展示。

  • hide():隐藏。

功能

快速选择提供的功能比较简单,就是一个列表,然后可以选择。

API 详解

使用 vscode.window.createQuickPick() 即可创建一个快速选择功能,调用后返回一个 QuickPick 对象,通过它可以为选择窗口添加内容和绑定事件。

属性:

items: 可以给他传递任何类型的数组,这是最核心的属性。

其他属性请参考文档。

方法:

代码
const quickPickDisposable = vscode.commands.registerCommand(
  "FishX.quickPick",
  async () => {
    if (quickPick === undefined) {
      quickPick = vscode.window.createQuickPick();
    }
    quickPick.items = [...];
    quickPick.onDidChangeSelection(async (selection) => {
      // selection 获取到选择的选项
      // 选择后隐藏
      quickPick.hide();
    });
    quickPick.show();
  }
);

悬停信息

利用鼠标悬浮,可以做到快速展示和隐藏摸鱼内容。

  • onDidChangeSelection:绑定选择事件,其参数就是 items 中选择的那一项。

  • show():展示快速选择。

  • hide():隐藏快速选择。

  • 其他方法请参考文档。

功能

VSCode 提供了 vscode.languages.registerHoverProvider 方法,用于为指定的语言注册一个 hover 提示效果,当用户将鼠标悬停在代码中的某个位置时,会触发 hover provider 并显示相关信息。

API 详解:

使用 vscode.languages.registerHoverProvider 方法可以注册一个 hover provider。

需要传入两个参数:

selector:一个 string 数组,用于指定要注册的语言。

provider:方法,用于实现 hover 逻辑。

provider 方法需要传入三个参数:

另外还有调试和发布本文就不细讲了。

大家如果有什么摸鱼心得和优秀的插件,希望多多在评论区分享。

代码
vscode.languages.registerHoverProvider(
  ["typescript", "javascript", "vue"],
  {
    async provideHover(document, position, token) {
      const range = document.getWordRangeAtPosition(position);
      const word = document.getText(range);
      if (word === "const") {
        return new vscode.Hover('文章...', range);
      }
      if (word === "export") {
        return new vscode.Hover('评论...', range);
      }
    },
  }
);

总结

实战没有贴出完整代码,用少量的代码带大家快速了解如何实现一个插件的基本功能,如果需要深入了解可以参考:

  • document:表示当前代码文档。

  • position: 表示鼠标所在的位置,配合 document 可以获取到选择的文本。

  • token:表示取消操作的 token。

  • 完整代码:https://github.com/codexu/FishX

  • 官方文档:https://code.visualstudio.com/docs