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

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

article 2025/2/28 4:52:27

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. 快捷键使用正常。
完结。

http://www.kler.cn/a/564084.html

相关文章：

  • IP---网络类型
  • 【DeepSeek】【GPT-Academic】:DeepSeek集成到GPT-Academic（官方+第三方）
  • DDNS-GO 动态域名解析
  • 前端网页或者pwa如何实现只横屏显示，设备竖着的时候依然保持横屏
  • kiln微调大模型-使用deepseek R1去训练一个你的具备推理能力的chatGPT 4o
  • seacmsv9报错注入
  • 基于MATLAB红外弱小目标检测MPCM算法复现
  • nginx 配置https
  • 归并排序：分而治之的排序之道
  • Mac安装双系统教程
  • 如果更换ip地址会怎么样？网络ip地址怎么更换
  • Elasticsearch索引设计与分片策略深度优化-手记
  • 2025-02-26 学习记录--C/C++-C语言 判断字符串S2是否在字符串S1中
  • docker file中ADD命令的介绍
  • mysql-analyze table导致waiting for table flush
  • python 剪切音频
  • Python入门教程丨3.7 数据可视化
  • 代码审计入门学习
  • MySQL保存超字段长度信息时如何正确截取
  • 神卓 S500 异地组网设备实现监控视频异地组网的详细步骤