vscode插件开发之按钮

上次看到antfu大佬写了一个GitHub按钮小图标功能获得很多赞。日常我发现我很经常需要打开项目github仓库，所以我自己尝试了下也实现一个小按钮来方便操作

pacakge.json配置

期待以后可以改成toml. json的注释都没法写，下面仅仅为了方便说明，实际是不能写注释的。

{
  "name": "gitjump",
  "displayName": "GitJump",
  "description": "quick open git repository by button",
  "version": "1.6.0",
  "engines": {
    "vscode": "^1.66.6"
  },
  "categories": [
    "Other"
  ],
  "icon": "icon.png", // 配置icon图标
  "activationEvents": [  // 配置什么情况下激活插件
    "onStartupFinished",  
    "onCommand:gitbtn.initBtn"
  ],
  "main": "./src/index.js", // 插件执行入口文件的位置，核心代码都在index.js里面
  "contributes": {  // 配置贡献点
    "commands": [
      {
        "command": "gitbtn.openRepository",
        "title": "openRepository"
      },
      {
        "command": "gitbtn.gitbtnInfo",
        "title": "gitbtn"
      },
      {
        "command": "gitbtn.initBtn",
        "title": "openRepositoryBtn"
      }
    ]
  },
  "scripts": {
    "lint": "eslint .",
    "pretest": "pnpm run lint",
    "test": "node ./test/runTest.js"
  },
  "publisher": "larry",
  "repository": {
    "type": "git",
    "url": "https://github.com/MrYZhou/gitbtn.git"
  },
  "devDependencies": {
    "@types/glob": "^8.1.0",
    "@types/mocha": "^10.0.1",
    "@types/node": "16.x",
    "@types/vscode": "^1.66.6",
    "@vscode/test-electron": "^2.3.0",
    "eslint": "^8.39.0",
    "glob": "^8.1.0",
    "mocha": "^10.2.0",
    "typescript": "^5.0.4"
  },
  "dependencies": {
    "simple-git": "^3.18.0" // 安装git操作依赖
  }
}

index.js代码

注册ui命令

在vscode中命令可以通过f1面板调用和代码里面手动执行。下面的代码意思是注册一个initBtn命令，命令执行后会在状态栏显示一个按钮。

/**
 * 注册一个命令，习惯都是 "项目名.命令名" 的格式
 */
  let initBtn = vscode.commands.registerCommand('gitbtn.initBtn', function () {
    const myButton = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Center, 100);
    myButton.tooltip = "Open RemoteRepository";
    myButton.text = `$(github)`
    myButton.color = 'white';
    myButton.command = 'gitbtn.openRepository';
    myButton.show();
  });

此处注意按钮的图标设置采用的是$(github)，这个是一种内置的icon写法，叫做vscode ThemeIcon.方便我们快速实现图标，非常方便。

仓库打开代码

// 打开git仓库首页
  let openRepository = vscode.commands.registerCommand(
    "gitbtn.openRepository",
    async function () {
      const editor = vscode.window.activeTextEditor
      const filePath = editor.document.uri.fsPath
      const lineNumber = editor.selection.active.line + 1

      if (!filePath) {
        vscode.window.showErrorMessage("No file is opened in the editor!")
        return
      }

      const getGitRepositoryUrl = async (filePath) => {
        try {
          const git = simpleGit(path.dirname(filePath))
          const remotes = await git.getRemotes(true)
          const gitRepoUrl = remotes.filter(
            (remote) => remote.name === "origin"
          )[0].refs.fetch
          return gitRepoUrl
        } catch (error) {
          console.error(error)
          return null
        }
      }

      const gitRepoUrl = await getGitRepositoryUrl(filePath)

      const externalUri = await vscode.env.asExternalUri(
        vscode.Uri.parse(gitRepoUrl)
      )
      vscode.env.openExternal(externalUri)
    }
  )

主要是2个api的使用

vscode.env.asExternalUri 处理外链解析

因为vscode中的地址不转的话，内部打不开网络地址，可能是安全吧

vscode.env.openExternal 打开外链。

注册到插件生命周期

 // 将命令注册到插件上下文中，以便在插件停用时自动注销
  /**
   * Registering commands in the plugin context
   * for automatic logout when the plugin is disabled
   */
  context.subscriptions.push(initBtn)
  context.subscriptions.push(disposable)
  context.subscriptions.push(openRepository)

初始化插件

vscode.commands.executeCommand("gitbtn.initBtn")

手动触发进行插件的初始化。这个是比较好的方式吧。很多东西是没办法在package.json里面都能方便处理的。我都习惯代码写初始化逻辑。

完整代码

const vscode = require("vscode")
const simpleGit = require("simple-git")
const path = require("path")

/**
 * use ThemeIcon
 */
function activate(context) {
  /**
   * 注册一个命令，习惯都是 "项目命名.命令名" 的格式。命令执行后会在状态栏显示一个按钮。
   */
  let initBtn = vscode.commands.registerCommand("gitbtn.initBtn", function () {
    const myButton = vscode.window.createStatusBarItem(
      vscode.StatusBarAlignment.Center,
      100
    )
    myButton.tooltip = "Open RemoteRepository"
    myButton.text = `$(github)`
    myButton.color = "white"
    myButton.command = "gitbtn.openRepository"
    myButton.show()
  })
  /**
   * 显示提示框
   */
  let disposable = vscode.commands.registerCommand(
    "gitbtn.gitbtnInfo",
    function () {
      vscode.window.showInformationMessage("gitbtn create by larryane!")
    }
  )
  /**
   * 打开git仓库首页
   */
  let openRepository = vscode.commands.registerCommand(
    "gitbtn.openRepository",
    async function () {
      const editor = vscode.window.activeTextEditor
      const filePath = editor.document.uri.fsPath
      const lineNumber = editor.selection.active.line + 1

      if (!filePath) {
        vscode.window.showErrorMessage("No file is opened in the editor!")
        return
      }

      const getGitRepositoryUrl = async (filePath) => {
        try {
          const git = simpleGit(path.dirname(filePath))
          const remotes = await git.getRemotes(true)
          const gitRepoUrl = remotes.filter(
            (remote) => remote.name === "origin"
          )[0].refs.fetch
          return gitRepoUrl
        } catch (error) {
          console.error(error)
          return null
        }
      }

      const gitRepoUrl = await getGitRepositoryUrl(filePath)

      const externalUri = await vscode.env.asExternalUri(
        vscode.Uri.parse(gitRepoUrl)
      )
      vscode.env.openExternal(externalUri)
    }
  )

  // 将命令注册到插件上下文中，以便在插件停用时自动注销
  /**
   * Registering commands in the plugin context
   * for automatic logout when the plugin is disabled
   */
  context.subscriptions.push(initBtn)
  context.subscriptions.push(disposable)
  context.subscriptions.push(openRepository)

  // 初始化插件
  // init plugin
  vscode.commands.executeCommand("gitbtn.initBtn")
}

function deactivate() {}

module.exports = {
  activate,
  deactivate,
}

项目地址

github.com/MrYZhou/git…

注意npm i 后按f5可调试。可在插件中看到正在运行的插件

点击按钮后可以跳转到首页

插件也在市场里面了