当前位置： 首页 > news >正文

HBuilderx 插件开发变量名称翻译 ，中文转（小驼峰，大驼峰，下划线，常量，CSS类名）

news 来源：原创 2025/5/23 23:03:11

HBuilderx 插件开发变量名称翻译 ，中文转（小驼峰，大驼峰，下划线，常量，CSS类名）

插件开发文档
工具HBuilderx ，创建项目

在这里插入图片描述
在这里插入图片描述

创建成功后目录

在这里插入图片描述

插件需求 开发时 用来将中文转为（小驼峰，大驼峰，下划线，常量，CSS类名）
  1. 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"
	}
}
  1. 运行插件
    在这里插入图片描述
  2. 运行成功 会打开新的编辑器
    在这里插入图片描述
  3. 打开一个项目 或者新建一个项目 （我这里是打开一个项目）然后右键查看
    在这里插入图片描述
中文翻译需要用到 百度翻译
  1. 百度翻译开放平台
    在这里插入图片描述
  2. 申请秘钥 APPID 和 密钥
    在这里插入图片描述
开始添加逻辑处理

  1. 新建js文件夹 用来处理 翻译 转换的逻辑

  2. 在这里插入图片描述

  3. 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
	}
  1. 调用百度翻译需要用到 axios 和 MD5.js 安装：
npm install axios
npm install js-md5
  1. 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 = '你上面申请的密钥';
        // 生成随机数 salt
        const salt = Math.floor(Math.random() * (65536 - 32768 + 1)) + 32768;

        // 拼接用于生成签名的字符串
        const signStr = appid + text + salt + secretKey;
        // 计算 MD5 哈希值作为签名
        const sign = md5(signStr);

        // 发送请求到百度翻译 API
        const 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();
    }
};
  1. 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
];
  1. 至此 全部开发结束。重新运行插件
    在这里插入图片描述
  2. 测试正常，开发结束。
优化
  1. 菜单合并 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"
	}
}

在这里插入图片描述

  1. 配置快捷键 点击工具 ----自定义快捷键
    在这里插入图片描述
  2. 添加代码 保存
    在这里插入图片描述
    在这里插入图片描述
  3. 快捷键使用正常。
完结。

相关文章：

  • Redis 高可用性：如何让你的缓存一直在线，稳定运行？
  • buuctf-简单注册器题解
  • uniapp h5页面获取跳转传参的简单方法
  • 全星FMEA软件系统是一款高效、智能的失效模式及影响分析工具，广泛应用于汽车、电子、机械等行业
  • LLC谐振变换器恒压恒流双竞争闭环simulink仿真
  • 内容中台的企业CMS架构是什么？
  • Rk3568驱动开发_驱动编写和挂载_2
  • SpringBoot整合Mybatis-Plus+Druid实现多数据源
  • DMA 定制固件教程：小白跟做即得单人固件，超详细纯喂饭教程，100% 成功秘籍！FPGA仿真1:1、中断逻辑和TLP核心都在。
  • Prometheus与Springboot
  • minio多主机分布式部署
  • 请解释 React 中的 Hooks，何时使用 Hooks 更合适？
  • 【Python 语法】Python 数据结构
  • AcWing 蓝桥杯集训·每日一题2025·密接牛追踪2
  • 地基JDK8新特性之Lambda 表达式和Stream 流操作
  • MySQL 复合索引
  • 使用 金南瓜EAP库 进行 二次开发与半导体厂家进行通讯源码
  • 《Vue全栈图形绘制系统开发实战》—— 第二章 Canvas 2D高级绘图系统
  • 安装、使用 tensorflow 遇到的问题
  • SpringBoot 2 后端通用开发模板搭建（异常处理，请求响应）
  • 绵阳市建设工程质监站网站/临沂网站建设公司哪家好
  • 网站空间怎么登陆/整合营销传播的明显特征是
  • 东莞做网站优化哪家好/软文范例大全800字
  • 江都建设总部网站/武汉百度
  • 绿植租摆网站建设/如何制作自己的链接
  • 网站建设公司无锡/北京学校线上教学