DEV Community

Cover image for 🕵️‍♀️ "hygen" first impressions
Thomas Reggi
Thomas Reggi

Posted on

🕵️‍♀️ "hygen" first impressions

A couple of days ago I stumbled upon a new tool called hygen on github as jondot/hygen.

Here's what the description from the repo says:

hygen is the simple, fast, and scalable code generator that lives in your project.

The bottom line is it's a cli-based scaffolding tool. It uses an odd combination of ejs and front-matter.

How does it work?

First you install the CLI tool globally using npm.

npm install hygen -g
Enter fullscreen mode Exit fullscreen mode

Then call hygen init self to generate a scaffold, for generating scaffolds, kind of meta right?

This will allow you to run hygen generator new component.

By now you should have a _templates folder with a generator and a component directory inside.

You'll see a temporary file inside _templates/component/hello.ejs.t which you can customize to be be the new component. I would rename hello.ejs.t to simple.ejs.t and put this inside:

to: src/components/<%= name %>.tsx
import React from 'react'

export function <%= name %>(props) {
  return <h1>Hello, {}</h1>;
Enter fullscreen mode Exit fullscreen mode

Then you can run:

hygen component new --name Example
Enter fullscreen mode Exit fullscreen mode

And voila! You will have easily created a new component.

Using Prompts

One super-cool feature is the prompt functionality, just by adding in a prompt.js file to the generator directory you can get prompted when you run the command for different ejs variables rather then supplying them as flags to the command.

The Shell

One nice addition is an option to execute a shell command from the front-matter of a generator. This allows better pipelining of side-effects.

sh: echo "hi"
Enter fullscreen mode Exit fullscreen mode

Open Questions

Is it possible to get .ejs.t vscode syntax with front matter support? Perhaps just use .ejs?

One possible workaround for vscode picking up the .t file- type is to add a file association in the vscode preferences:

  "files.associations": {
    // @see
    "*.ejs.t": "html"
Enter fullscreen mode Exit fullscreen mode


I love it so far! It's greatly improved my workflow and I continue to find new use cases. ❤️❤️❤️❤️❤️

Top comments (1)

raphaelmansuy profile image
Raphael MANSUY

Similor to hygen