HBuilderx 插件开发变量名称翻译 ，中文转（小驼峰，大驼峰，下划线，常量，CSS类名）
HBuilderx 插件开发变量名称翻译 ，中文转（小驼峰，大驼峰，下划线，常量，CSS类名）
插件开发文档
工具HBuilderx ，创建项目
创建成功后目录
插件需求 开发时 用来将中文转为（小驼峰，大驼峰，下划线，常量，CSS类名）
package.json文件中配置插件菜单，通过在插件package.json文件中contributes节点下定义的一些JSON格式的配置项。（注意：配置时一定要注意json格式）
{"id": "plugin-fyi","name": "fyi","description": "plugin-fyi","displayName": "plugin-fyi","version": "0.0.0","publisher": "your name","engines": {"HBuilderX": "^2.7.0"},"categories": ["Other"],"main": "./extension","activationEvents": ["*"],"contributes": {"commands": [{"command": "fyi.smallHump","title": "小驼峰"},{"command": "fyi.bigHump","title": "大驼峰"},{"command": "fyi.underline","title": "下划线"},{"command": "fyi.constant","title": "常量"},{"command": "fyi.cssClassName","title": "CSS类名"}],"menus": {"editor/context": [{"group": "z_commands"}, {"title": "小驼峰","command": "fyi.smallHump","group": "z_commands"},{"title": "大驼峰","command": "fyi.bigHump","group": "z_commands"},{"title": "下划线","command": "fyi.underline","group": "z_commands"},{"title": "常量","command": "fyi.constant","group": "z_commands"},{"title": "CSS类名","command": "fyi.cssClassName","group": "z_commands"},{"group": "z_commands"}]},"extensionDependencies": ["plugin-manager"]},"dependencies": {"axios": "^1.7.9","js-md5": "^0.8.3"}
}
- 运行插件
- 运行成功 会打开新的编辑器
- 打开一个项目 或者新建一个项目 （我这里是打开一个项目）然后右键查看
中文翻译需要用到 百度翻译
- 百度翻译开放平台
- 申请秘钥
APPID和密钥
开始添加逻辑处理
-
新建js文件夹 用来处理 翻译 转换的逻辑
-
-
extension.js文件 该文件为主文件 需要与package.json中的main保持一致
const hx = require("hbuilderx");const commands = require('./js/index')//该方法将在插件激活的时候调用function activate(context) {for (const c of commands) {//订阅销毁钩子，插件禁用的时候，自动注销该command。context.subscriptions.push(c);}}//该方法将在插件禁用的时候调用（目前是在插件卸载的时候触发）function deactivate() {}module.exports = {activate,deactivate}
- 调用百度翻译需要用到
axios和MD5.js安装：
npm install axios
npm install js-md5
- util.js 调用百度api 翻译
*******请更换代码中的 appid 和密钥********
const axios = require('axios');
const hx = require("hbuilderx");
const md5 = require('js-md5');// 封装百度翻译 API 请求函数
module.exports = async function (text) {try {// 在状态栏显示正在转换的消息hx.window.setStatusBarMessage(`正在转换...`);// 百度翻译 API 的配置信息const appid = '你上面申请的appid';const secretKey = '你上面申请的密钥';// 生成随机数 saltconst salt = Math.floor(Math.random() * (65536 - 32768 + 1)) + 32768;// 拼接用于生成签名的字符串const signStr = appid + text + salt + secretKey;// 计算 MD5 哈希值作为签名const sign = md5(signStr);// 发送请求到百度翻译 APIconst response = await axios({method: 'post',url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',data: {q: text,from: 'auto',to: 'en',appid: appid,salt: salt,sign: sign},headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }});const data = response.data;// 检查响应数据是否包含必要的字段if (data.from && data.to && data.trans_result) {// 解析出翻译结果return data.trans_result[0].dst;} else {// 处理识别失败的情况const errorMessage = `识别失败，错误码: ${data.error_code}`;hx.window.showErrorMessage(errorMessage);return {msg: "识别失败",code: data.error_code};}} catch (error) {// 处理请求过程中可能出现的错误const errorMessage = `请求翻译 API 时发生错误: ${error.message}`;hx.window.showErrorMessage(errorMessage);console.error(errorMessage, error);return {msg: "请求翻译 API 时发生错误",code: -1};} finally {// 清除状态栏的消息hx.window.clearStatusBarMessage();}
};
- index.js 转换方法文件
const hx = require("hbuilderx");
const util = require("./util");// 定义字符串转换类型的映射对象
const conversionFunctions = {'1': toCamelCase,'2': toPascalCase,'3': toSnakeCase,'4': toConstantCase,'5': toCssClassName
};// 注册命令的函数
function registerCommand(method, type) {return hx.commands.registerCommand(method, async () => {try {// 获取当前活动的文本编辑器const activeEditor = await hx.window.getActiveTextEditor();if (!activeEditor) {return;}const editor = await activeEditor;const selections = editor.selections;// 遍历每个选中区域for (const selection of selections) {const selectText = editor.document.getText(selection);let text = await util(selectText);// 根据类型获取对应的转换函数const convertFunction = conversionFunctions[type] || toCamelCase;const str = convertFunction(text);// 替换选中区域的文本editor.edit(editBuilder => editBuilder.replace(selection, str));}} catch (error) {console.error('执行命令时发生错误:', error);}});
}// 小驼峰转换函数
function toCamelCase(str) {const words = str.split(' ');return words.map((word, index) => {if (index === 0) {return word.toLowerCase();}return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();}).join('');
}// 大驼峰转换函数
function toPascalCase(str) {return str.split(' ').map(word => {return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();}).join('');
}// 下划线转换函数
function toSnakeCase(str) {return str.replace(/\s/g, '_').toLowerCase();
}// 常量转换函数
function toConstantCase(str) {return str.replace(/\s/g, '_').toUpperCase();
}// CSS类名转换函数
function toCssClassName(str) {return str.toLowerCase().replace(/\s/g, '-');
}// 注册各个命令
const smallHump = registerCommand('fyi.smallHump', '1');
const bigHump = registerCommand('fyi.bigHump', '2');
const underline = registerCommand('fyi.underline', '3');
const constant = registerCommand('fyi.constant', '4');
const cssClassName = registerCommand('fyi.cssClassName', '5');// 导出注册的命令
module.exports = [smallHump,bigHump,underline,constant,cssClassName
];
- 至此 全部开发结束。重新运行插件
- 测试正常，开发结束。
优化
- 菜单合并
package.json
{"id": "plugin-fyi","name": "fyi","description": "plugin-fyi","displayName": "plugin-fyi","version": "0.0.0","publisher": "your name","engines": {"HBuilderX": "^2.7.0"},"categories": ["Other"],"main": "./extension","activationEvents": ["*"],"contributes": {"commands": [{"command": "fyi.smallHump","title": "小驼峰"},{"command": "fyi.bigHump","title": "大驼峰"},{"command": "fyi.underline","title": "下划线"},{"command": "fyi.constant","title": "常量"},{"command": "fyi.cssClassName","title": "CSS类名"}],"menus": {"editor/context": [{"id": "fyi","title": "來啊快樂啊","group": "assist"},{"title": "小驼峰","command": "fyi.smallHump","group": "fyi@1"},{"title": "大驼峰","command": "fyi.bigHump","group": "fyi@2"},{"title": "下划线","command": "fyi.underline","group": "fyi@3"},{"title": "常量","command": "fyi.constant","group": "fyi@4"},{"title": "CSS类名","command": "fyi.cssClassName","group": "fyi@5"}]},"extensionDependencies": ["plugin-manager"]},"dependencies": {"axios": "^1.7.9","js-md5": "^0.8.3"}
}
- 配置快捷键 点击工具 ----自定义快捷键
- 添加代码 保存
- 快捷键使用正常。