php 网站配置,免费vi模板网站,网页游戏前十名就选新壹玩,周口网络推广公司HBuilderx 插件开发变量名称翻译 #xff0c;中文转#xff08;小驼峰#xff0c;大驼峰#xff0c;下划线#xff0c;常量#xff0c;CSS类名#xff09;
插件开发文档
工具HBuilderx #xff0c;创建项目 创建成功后目录 插件需求 开发时 用来将中文转为#xff0…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; charsetUTF-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: fyi1},{title: 大驼峰,command: fyi.bigHump,group: fyi2},{title: 下划线,command: fyi.underline,group: fyi3},{title: 常量,command: fyi.constant,group: fyi4},{title: CSS类名,command: fyi.cssClassName,group: fyi5}]},extensionDependencies: [plugin-manager]},dependencies: {axios: ^1.7.9,js-md5: ^0.8.3}
}配置快捷键 点击工具 ----自定义快捷键 添加代码 保存 快捷键使用正常。
完结。
