zqy233的前端学习笔记

主题

回到顶部
索引

开发 HbuilderX 插件

创建插件项目

1.依次选择文件->新建项目->创建->IDE 插件

package.json

设置插件相关信息与功能

key说明
activationEvents插件激活事件
contributes插件相关功能配置
commands设置插件命令
menus设置右键菜单
keybindings设置插件命令快捷键
json
{
  "id": "zqy-formatAndSave",
  "name": "formatAndSave",
  "description": "format and save",
  "displayName": "formatAndSave",
  "version": "0.0.1",
  "publisher": "zqy",
  "engines": {
    "HBuilderX": "^2.7.0"
  },
  "categories": ["Other"],
  "main": "./extension",
  "activationEvents": ["onCommand:extension.formatAndSave"],
  "contributes": {
    "commands": [
      {
        "command": "extension.formatAndSave",
        "title": "formatAndSave"
      }
    ],
    "menus": {
      "editor/context": [
        {
          "command": "extension.formatAndSave",
          "group": "z_commands",
          "when": "editorTextFocus"
        },
        {
          "group": "z_commands"
        }
      ]
    },
    "keybindings": [
      {
        "command": "extension.formatAndSave",
        "key": "Ctrl+S",
        "when": "editorTextFocus"
      }
    ]
  },
  "extensionDependencies": ["plugin-manager"],
  "dependencies": {}
}

{
  "id": "zqy-formatAndSave",
  "name": "formatAndSave",
  "description": "format and save",
  "displayName": "formatAndSave",
  "version": "0.0.1",
  "publisher": "zqy",
  "engines": {
    "HBuilderX": "^2.7.0"
  },
  "categories": ["Other"],
  "main": "./extension",
  "activationEvents": ["onCommand:extension.formatAndSave"],
  "contributes": {
    "commands": [
      {
        "command": "extension.formatAndSave",
        "title": "formatAndSave"
      }
    ],
    "menus": {
      "editor/context": [
        {
          "command": "extension.formatAndSave",
          "group": "z_commands",
          "when": "editorTextFocus"
        },
        {
          "group": "z_commands"
        }
      ]
    },
    "keybindings": [
      {
        "command": "extension.formatAndSave",
        "key": "Ctrl+S",
        "when": "editorTextFocus"
      }
    ]
  },
  "extensionDependencies": ["plugin-manager"],
  "dependencies": {}
}

插件运行

ctrl+r快速运行插件，每次修改插件代码都要重新运行

插件主函数

extension.js

js
var hx = require('hbuilderx')
//该方法将在插件激活的时候调用
function activate(context) {
  let disposable = hx.commands.registerCommand(
    'extension.formatAndSave',
    async () => {
      await hx.commands.executeCommand('editor.action.format')
      hx.commands.executeCommand('workbench.action.files.save')
    }
  )
  //订阅销毁钩子，插件禁用的时候，自动注销该command。
  context.subscriptions.push(disposable)
}
//该方法将在插件禁用的时候调用（目前是在插件卸载的时候触发）
function deactivate() {}
module.exports = {
  activate,
  deactivate
}

var hx = require('hbuilderx')
//该方法将在插件激活的时候调用
function activate(context) {
  let disposable = hx.commands.registerCommand(
    'extension.formatAndSave',
    async () => {
      await hx.commands.executeCommand('editor.action.format')
      hx.commands.executeCommand('workbench.action.files.save')
    }
  )
  //订阅销毁钩子，插件禁用的时候，自动注销该command。
  context.subscriptions.push(disposable)
}
//该方法将在插件禁用的时候调用（目前是在插件卸载的时候触发）
function deactivate() {}
module.exports = {
  activate,
  deactivate
}

插件发布

直接压缩插件项目为 zip，然后至官网提交即可

本地插件使用

放在 HBuilderx 安装目录下的 plugins 中，卸载的话删除即可

调用HBuilderx命令

示例：调用保存操作

js
hx.commands.executeCommand('workbench.action.files.save')

hx.commands.executeCommand('workbench.action.files.save')

获取当前编辑器

js
let activeEditor = await hx.window.getActiveTextEditor()

let activeEditor = await hx.window.getActiveTextEditor()

当前编辑器的所有文本

不传值默认获取所有文本，传值一个范围，获取该范围文本

js
const word = activeEditor.document.getText()

const word = activeEditor.document.getText()

指定行的文本

js
// 0为第一行，2为第三行
let lineInfo = activeEditor.document.lineAt(2)
console.log(lineInfo)
// {
//    line:2,
//    text:"123",
//    isLastLine:false
// }

// 0为第一行，2为第三行
let lineInfo = activeEditor.document.lineAt(2)
console.log(lineInfo)
// {
//    line:2,
//    text:"123",
//    isLastLine:false
// }

光标位置

返回当前光标位置，类型：number

js
console.log(activeEditor.selection.active)

console.log(activeEditor.selection.active)

获取光标所在行的文本

js
let lineInfo = activeEditor.document.lineFromPosition(
  activeEditor.selection.active
)
console.log(lineInfo)
// {
//    line:2,
//    text:"123",
//    isLastLine:false
// }

let lineInfo = activeEditor.document.lineFromPosition(
  activeEditor.selection.active
)
console.log(lineInfo)
// {
//    line:2,
//    text:"123",
//    isLastLine:false
// }

设置光标位置

两个数字类型参数

js
activeEditor.setSelection(cursorOffset, cursorOffset);

activeEditor.setSelection(cursorOffset, cursorOffset);

获取项目管理器下所有的项目对象（不包含已关闭项目）

js
var wsPromise = hx.workspace.getWorkspaceFolders();
  wsPromise.then(function(wsFolders) {
    console.log("项目管理器包含的项目：",wsFolders);
});

var wsPromise = hx.workspace.getWorkspaceFolders();
  wsPromise.then(function(wsFolders) {
    console.log("项目管理器包含的项目：",wsFolders);
});

获取文件所在项目信息

js
const activeEditor = await hx.window.getActiveTextEditor()
const wsPromise = hx.workspace.getWorkspaceFolder(activeEditor.document.fileName);
wsPromise.then(function (wsFolder) {
  console.log("文件所在项目：", wsFolder);
});

const activeEditor = await hx.window.getActiveTextEditor()
const wsPromise = hx.workspace.getWorkspaceFolder(activeEditor.document.fileName);
wsPromise.then(function (wsFolder) {
  console.log("文件所在项目：", wsFolder);
});

获取所有编辑器

js
hx.workspace.textDocuments

hx.workspace.textDocuments

获取所有编辑器目录

js
hx.workspace.textDocuments.map(item=>item.fileName)

hx.workspace.textDocuments.map(item=>item.fileName)

Released under the MIT License.

Copyright © 2022.4-2024.7