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

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

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. 调用百度翻译需要用到 axiosMD5.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 = '你上面申请的密钥';// 生成随机数 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();}
};
  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. 快捷键使用正常。
完结。

相关文章:

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

HBuilderx 插件开发变量名称翻译 ,中文转(小驼峰,大驼峰,下划线,常量,CSS类名) 插件开发文档 工具HBuilderx ,创建项目 创建成功后目录 插件需求 开发时 用来将中文转为&#xff0…...

岳阳市美术馆预约平台(小程序论文源码调试讲解)

第4章 系统设计 一个成功设计的系统在内容上必定是丰富的,在系统外观或系统功能上必定是对用户友好的。所以为了提升系统的价值,吸引更多的访问者访问系统,以及让来访用户可以花费更多时间停留在系统上,则表明该系统设计得比较专…...

C++ | 高级教程 | 文件和流

👻 概念 文件流输出使用标准库 fstream,定义三个新的数据类型: 数据类型描述ofstream输出文件流,用于创建文件并向文件写入信息。ifstream输入文件流,用于从文件读取信息。fstream文件流,且同时具有 ofst…...

Starlink卫星动力学系统仿真建模第九讲-滑模(SMC)控制算法原理简介及卫星控制应用

滑模控制(Sliding Mode Control)算法详解 一、基本原理 滑模控制(Sliding Mode Control, SMC)是一种变结构控制方法,通过设计一个滑模面(Sliding Surface),迫使系统状态在有限时间内…...

JVM相关面试题

1. 类加载与双亲委派机制 聊一下你对类加载器的理解。 类加载器是JVM用来加载类文件到内存的组件。它负责将字节码文件解析为java.lang.Class实例,并存储到运行时数据区的方法区中。类加载器分为Bootstrap ClassLoader、Extension ClassLoader和Application ClassLo…...

WiFi定位:宠物安全的“秘密武器”

从「全网寻狗」到「实时掌控」的进化史 凌晨三点收到邻居转发的「寻狗启事」,配图里的金毛犬项圈上赫然挂着某品牌定位器 —— 这样的魔幻场景在养宠圈并不罕见。随着宠物经济突破 3000 亿规模,智能定位器早已从「小众玩具」变成「刚需装备」。但你知道…...

【git】【reset全解】Git 回到上次提交并处理提交内容的不同方式

Git 回到上次提交并处理提交内容的不同方式 在 Git 中,若要回到上次提交并对提交内容进行不同处理,可使用 git reset 命令搭配不同选项来实现。以下为你详细介绍操作步骤及各选项的作用。 1. 查看提交历史 在操作之前,可通过以下命令查看提…...

【leetcode hot 100 11】移动零

一、暴力解法&#xff1a;两个 for 循环&#xff0c;外层循环遍历所有可能的左边界&#xff0c;内层循环遍历所有可能的右边界 class Solution {public int maxArea(int[] height) {int max_area0;for(int i0; i<height.length; i){for(int ji1; j<height.length; j){in…...

DeepSeek 部署实战:Ollama + 多客户端 + RAG

DeepSeek 部署实战&#xff1a;Ollama 多客户端 RAG 一、前置条件 &#xff08;一&#xff09;硬件要求 GPU&#xff1a;强烈建议使用 NVIDIA RTX 3090 或更高型号&#xff0c;显存至少 24GB。小显存跑大模型会遇到诸多问题&#xff0c;本人亲测 2080Ti 跑模型体验不佳。内…...

Linux通过设备名称如何定位故障硬盘

因为ceph集群的服务器硬盘都是直通的&#xff0c;当我们发现有硬盘存储坏道需要更换硬盘&#xff0c;但是因为盘序可能不是连续的&#xff0c;无法定位服务器上那块硬盘是故障的&#xff0c;如果冒然测试可能把正常的硬盘拔出&#xff0c;得不偿失&#xff0c;所以就写一下我定…...

大模型基础概念之神经网络宽度

在大模型中,神经网络宽度是提升模型容量的核心手段之一,与深度、数据规模共同构成性能的三大支柱。合理增加宽度可显著增强模型表达能力,但需结合正则化、硬件优化和结构设计进行平衡。未来趋势可能包括动态宽度调整、稀疏化宽度设计(如MoE)以及更高效宽度-深度复合缩放策…...

数据开发的简历及面试

简历 个人信息: 邮箱别写QQ邮箱, 写126邮箱/189邮箱等 学历>>本科及以上写,大专及以下不写 专业>>非计算机专业不写 政治面貌>>党员写, 群众不用写 掌握的技能: 精通 > 熟悉 > 了解 专业工具: 大数据相关的 公司: 如果没有可以写的>>金融服…...

数据存储:一文掌握存储数据到ElasticSearch详解

文章目录 一、Elasticsearch简介二、Python与Elasticsearch交互2.1 安装必要的库2.2 连接到Elasticsearch服务器 三、数据准备四、创建索引&#xff08;可选&#xff09;五、存储数据5.1 单个文档索引5.2 批量索引 六、查询数据七、更新和删除数据7.1 更新文档7.2 删除文档 八、…...

Pytorch使用手册--将 PyTorch 模型导出为 ONNX(专题二十六)

注意 截至 PyTorch 2.1,ONNX 导出器有两个版本。 torch.onnx.dynamo_export 是最新的(仍处于测试阶段)导出器,基于 PyTorch 2.0 发布的 TorchDynamo 技术。 torch.onnx.export 基于 TorchScript 后端,自 PyTorch 1.2.0 起可用。 一、torch.onnx.dynamo_export使用 在 60 …...

Vue2+Element实现Excel文件上传下载预览

目录 一、需求背景 二、落地实现 1.文件上传 图片示例 HTML代码 业务代码 2.文件下载 图片示例 方式一&#xff1a;代码 方式二&#xff1a;代码 3.文件预览 图片示例 方式一&#xff1a;代码 方式二&#xff1a;代码 一、需求背景 在一个愉快的年后&#xff…...

物联网平台建设方案一

系统概述 构建物联网全域支撑服务能力&#xff0c;为实现学院涵盖物联网设备的全面感知、全域互联、全程智控、全域数字基底、全过程统筹管理奠定基础&#xff0c;为打造智能化提供坚实后台基石。 物联网平台向下接入各种传感器、终端和网关&#xff0c;向上通过开放的实施分…...

机器学习破局指南:零基础6个月系统训练计划

以下是为零基础学习者制定的「机器学习」系统学习计划&#xff08;含学习路径资源推荐&#xff09;&#xff0c;分为6个阶段&#xff0c;建议学习周期4-6个月&#xff1a; 一、基础准备阶段&#xff08;1-2周&#xff09; 目标&#xff1a;掌握必要数学工具与编程基础 数学基础…...

mmdetection框架下使用yolov3训练Seaships数据集

之前复现的yolov3算法采用的是传统的coco数据集&#xff0c;这里我需要在新的数据集上跑&#xff0c;也就是船舶检测方向的SeaShips数据集&#xff0c;这里给出教程。 Seaships论文链接&#xff1a;https://ieeexplore.ieee.org/stamp/stamp.jsp?tp&arnumber8438999 一、…...

unity学习52:UI的最基础组件 rect transform,锚点anchor,支点/轴心点 pivot

目录 1 image 图像&#xff1a;最简单的UI 1.1 图像的基本属性 1.2 rect transform 1.3 image的component: 精灵 → 图片 1.4 修改颜色color 1.5 修改材质 1.6 raycast target 1.7 maskable 可遮罩 1.8 imageType 1.9 native size 原生大小 2 rect transform 2.1 …...

STM32MP15-FSMP1A单片机移植Linux系统platform总线驱动

之前在该单片机下移植的Linux驱动是学习过程中&#xff0c;对Linux内核驱动的引导学习&#xff0c;接下来才是比较正常的驱动开发。 在Linux内核中&#xff0c;对于驱动的处理&#xff0c;一般会通过总线进行设备信息和设备驱动的匹配&#xff0c;来达到自动检测外设连接系统以…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...

基于Java+MySQL实现(GUI)客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

云原生周刊:k0s 成为 CNCF 沙箱项目

开源项目推荐 HAMi HAMi&#xff08;原名 k8s‑vGPU‑scheduler&#xff09;是一款 CNCF Sandbox 级别的开源 K8s 中间件&#xff0c;通过虚拟化 GPU/NPU 等异构设备并支持内存、计算核心时间片隔离及共享调度&#xff0c;为容器提供统一接口&#xff0c;实现细粒度资源配额…...

在 Visual Studio Code 中使用驭码 CodeRider 提升开发效率:以冒泡排序为例

目录 前言1 插件安装与配置1.1 安装驭码 CodeRider1.2 初始配置建议 2 示例代码&#xff1a;冒泡排序3 驭码 CodeRider 功能详解3.1 功能概览3.2 代码解释功能3.3 自动注释生成3.4 逻辑修改功能3.5 单元测试自动生成3.6 代码优化建议 4 驭码的实际应用建议5 常见问题与解决建议…...

验证redis数据结构

一、功能验证 1.验证redis的数据结构&#xff08;如字符串、列表、哈希、集合、有序集合等&#xff09;是否按照预期工作。 2、常见的数据结构验证方法&#xff1a; ①字符串&#xff08;string&#xff09; 测试基本操作 set、get、incr、decr 验证字符串的长度和内容是否正…...

【工具教程】多个条形码识别用条码内容对图片重命名,批量PDF条形码识别后用条码内容批量改名,使用教程及注意事项

一、条形码识别改名使用教程 打开软件并选择处理模式&#xff1a;打开软件后&#xff0c;根据要处理的文件类型&#xff0c;选择 “图片识别模式” 或 “PDF 识别模式”。如果是处理包含条形码的 PDF 文件&#xff0c;就选择 “PDF 识别模式”&#xff1b;若是处理图片文件&…...

智能照明系统:具备认知能力的“光神经网络”

智能照明系统是物联网技术与传统照明深度融合的产物&#xff0c;其本质是通过感知环境、解析需求、自主决策的闭环控制&#xff0c;重构光与人、空间、环境的关系。这一系统由智能光源、多维传感器、边缘计算单元及云端管理平台构成&#xff0c;形成具备认知能力的“光神经网络…...