试开发一款vscode插件（中）

续上期我们新建好插件demo项目后，本期我带大家伙来完善一下里面的功能函数。在项目的过程中会讲解用到的api，具有什么功能，该如何触发等等。

1、下午三点提示

内容：三点几嚟,饮茶先啦

形式:弹窗提醒

api: vscode.window.showInformationMessage(str)

这个api是能在右下角弹窗，并显示参数内容,str类型是可以支持的，但似乎不支持jsx语句？尝试了一下jsx语句，发现并没有正确识别。

函数也比较简单，我就直接在上期文章末尾创建的countTime命令函数里直接添加了。 （传送门： 试开发一款vscode插件（上））

const countTime = vscode.commands.registerCommand('sanwu.countTime', function () {

    let time
    let conut = 0
    setInterval(() => {
        time = new Date()

        if(time.getHours() === 15 && count === 0) {
            count++
            vscode.window.showInformationMessage(`三点几嚟,*饮茶*先啦`)
        }
    }, 1000)
    context.subscriptions.push(countTime);
});

效果如下

2、检查当前文件行数

内容： 分组件啊分组件，一个文件10000行，屎山代码是吧！？

形式： 菜单命令触发带回调的弹窗提醒

api:

参数大于1的时候，就是带回调的弹窗函数
showInformationMessage(参数1是文本内容，参数2是选项，参数3是选项，参数4也是选项)，可以有n个选项

vscode执行命令，可以执行vscode自带命令，也可以执行自定义的命令
vscode.commands.executeCommand

vscode自带命令，可以打开窗口和网页
vscode.open

（1） package.json文件

这次我们换种触发方式了，onStartupFinished触发，打开vscode就激活该插件 其他activationEvents的激活时机可以看这个activation-events文档

"activationEvents": [
    "onCommand:sanwu.helloWorld",
    "onCommand:sanwu.countTime",
    "onStartupFinished"
 ],

然后在contirbutes里写下这些代码

"contributes": {
    "commands": [
      {
        "command": "sanwu.helloWorld",
        "title": "Hello World"
      },
      {
        "command": "sanwu.countTime",
        "title": "countT"
      },
      {
        "command": "sanwu.countLine",
        "title": "countLine"
      }
    ],
    "menus": {
      "editor/context": [
        {右
          "command": "sanwu.countLine",
          "group": "navigation",
          "when": "editorFocus"
        }
      ]
    }
  },

之前都是在其中的commands写下自定义命令而已，这次是要加上menus数组，可以实现自定义右边菜单功能，其中用到的命令，必须是commands里有的命令。

group（有navigation、1_modification、 9_cutcopypaste 、 z_commands这个四个）是这命令所在的位置，下面我放个图让大家伙看下区别

when是指触发时机

我用的是editorFocus，指单击该右键命令时，如果当前编辑器editor有聚焦，才触发回调命令

其他when的属性可以参考这个available-contexts文档

（2） extension.js文件

在package.json文件里配置好命令后，我们来extension.js文件撰写我们的主逻辑吧

顶部引入一下window对象，也可以直接用vscode.window，只是个人习惯

const { window } = vscode

然后在activate函数里注册countLine命令

const countLine = vscode.commands.registerCommand("sanwu.countLine", (currentUri) => {

    const editor = window.activeTextEditor
    if(!editor) {
        return
    }
    console.log(editor.document.lineCount)
    if(editor.document.lineCount > 10000) {

        watchLine(currentUri, editor)
    }
})
context.subscriptions.push(countLine);

为了不让active函数体积过于庞大，我将具体要实现的逻辑封装成函数，直接调用

function watchLine(currentUri, editor) {

    console.log('当前代码选中的绝对位置', currentUri.fsPath)

    console.log('可以获取当前光标所在行数', editor.selection)
    vscode.window
    .showInformationMessage("分组件啊分组件，一个文件10000行，想写屎山代码？", "是", "否", "不再提示")
    .then(result => {
            if (result === "是") {
                    vscode.window.showInformationMessage(`恭喜达成成就《啊对对对，这样以后我看谁还敢动我代码》`)
            } else if (result === "否") {

                    vscode.window.showInformationMessage(`不!我要去掘金跟大佬们学习！`)
                    setTimeout(() => {
                            vscode.commands.executeCommand(
                                    "vscode.open",
                                    vscode.Uri.parse(`https://juejin.cn/`)
                            )
                    }, 1000)
            } else if (result === "不再提示") {

                    vscode.window.showInformationMessage(`逆子`)
            }
    })
}

（3） 结果验证

开启调试，右键能正常弹出菜单，里面有新建的countLine命令

单击该命令，检查当前文件是否超过10000行（哈哈我找不到10000行的文件，就先把判断条件改成10行），超过会弹出右下角的弹窗。

点击选项-是 弹出成就

点击选项-否 弹出发奋图强宣言，并且打开掘金首页，vscode有安全机制，所以需要额外点击弹窗里的open

点击选项-不再提示 显示逆子（同时下次触发照样提示，因为我没写逻辑）

另外其中的几行代码，是在实验过程中发现的，感觉应该会有用，就留了下来。

console.log('当前代码选中的绝对位置', currentUri.fsPath)

console.log('可以获取当前光标所在行数', editor.selection)

今天就先到这里吧，下期看下再实现个什么功能，然后给大家伙讲讲如何发布打包，赶鸭子上架，写的一般般，有错误的地方还请指正。