Developing a typesetting gadget in He3 for three minutes

As official website said in He3, He3 is a developer's toolbox , which contains many tools that developers need.

Like uTools and Raycast, He3 also provides an open system where users can build their own tools.

Just recently, there was a need for tools. When writing a blog, I often encountered the problem of typesetting . Generally, spaces need to be added between Chinese and English, such as:

Compared with the same quarter in 2022, Apple's revenue from iPhone increased in the first three months of 2023.

Need to be formatted as:

Compared with the same quarter in 2022, Apple's revenue from iPhone increased in the first three months of 2023.

For this text conversion scenario, He3 provides a very convenient TextTransform component, and we only need to give a conversion method to develop a tool :

TextTransform' component development document: https://docs.he3app.com/components/texttransform.html.

We first go to the web provided by He3 ([https://portal.he3app.com/home/createtool]), log in and fill in our tool name, ID, description, keywords and other information on the "Create Tool" page, and then press .

Open the project and execute npm install to install the dependency:

The structure of the project is very simple, mainly' package.json' plus' index.vue' file, and our tool code is written in the' index.vue' file (here I use the writing method of Vue3, and I use a "[copying-correct]" (https://www.npmjs.com/package/blogs/.

<template>
<h-text-transform :sampleData="sampleData" :transform="transform" />
</template>

<script setup lang="ts">
import CopyWritingCorrectService from 'copywriting-correct';


Const sampleData = `He3 is the ultimate developer toolbox containing nearly 400 tools, covering the daily needs of front-end and back-end developers. He3' s intelligent search and clipboard intelligent recommendation will raise your development efficiency to a new level. `

const service = new CopyWritingCorrectService();

const transform = (inputValue: string): string => {
return service.correct(inputValue);
};
</script>

Then execute' npm run dev', and in the He3 client (you need to install client and log in), you can see our tools:

After the development, we can publish our tools by executing' npm run publish' and get our tool link: https://t.he3app.com/67cj.

Later, we can check the review process of our tools on the He3 web side:

It can be seen that the overall development experience is quite simple. You only need to have a node environment locally and install the He3 client, so you can build your own tools. At the same time, He3 provides highly encapsulated components for transformation scenarios, and a small tool can be realized with a few lines of code . Finally, you are also welcome to experience the Chinese and English copywriting typesetting corrector: https://t.he3app.com/67cj.