Develop your own code generator in five minutes
Published: 2021-05-29 16:16:04

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71e4c3g7i9j2nq4ywmlu.jpeg)

> This article is short but full of sincerity  
> You can read it in less than 2 minutes  
> Then there is a high probability that you will be amazed  
> It turned out to be so simple to develop your own code generator

**Tips**: This article is a continuation of "[The new generation of code generator](https://dev.to/danieldx/the-new-generation-of-code-generator-26h1)". If you don’t know what `ncgen` is, it’s best to read "[The new generation of code generator](https://dev.to/danieldx/the-new-generation-of-code-generator-26h1)" first

----

Daniel: Brother Egg, after the last time, according to the method you taught me, I configured a code generator that fully meets my needs in a few minutes. It is really powerful and simple.

Mr. Egg: Just do it, I admire your hands-on ability

Daniel: Thanks. But I came again with a question today

Mr. Egg: Waiting for a long time

Daniel: I hung up `ncgen-config.js` in the cloud, and my friends complained that the command was too long to remember when using it:

```sh
$ ncgen https://raw.githubusercontent.com/daniel-dx/vue3-ncgen-demo/master/ncgen-config.js
```

Look, is it a bit long? Do you have any good suggestions?

Mr. Egg: Of course, `ncgen` has already prepared a very fascinating plan for this

Daniel: What fascinating plan? How charming is it? Tell me quickly please

Mr. Egg: That's it - Rapid development of **your own code generator** through `ncgen`

Daniel: Wo~, it belongs to me, it sounds cool. How to do it？

----

Mr. Egg: Suppose we want to develop a code generator now, let's call it **vue-ncgen-demo-cli**, guess how many steps to get it?

Daniel: I guess, just one step.

Mr. Egg: This is a bit too much, I can't do it, goodbye

Daniel: Just kidding, Brother Egg, just say it

Mr. Egg: Let's go three steps

- Step 1: Generate code generator project

```sh
$ yarn create @ncgen/app # npm init @ncgen/app
```

![create](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wb63ex14emz36iyfbqlw.gif)

- Step 2: Write the code generator logic

Find `ncgen-config.js` in the generated project and modify this configuration file according to the logic of your code generator

> The sample configuration is here: https://github.com/daniel-dx/vue-ncgen-demo-cli/blob/master/ncgen-config.js

Here is a tip. When you need to add sub-commands, in addition to copy and paste, you can actually do it more elegantly through sub-commands.

```sh
cd vue-ncgen-demo-cli
$ yarn create @ncgen/app add-sub # # npm init @ncgen/app add-sub
```

![b.gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v0v4blzuv9sd1qn5owk0.gif)

- Step 3: Release to the world

```sh
$ npm run release
```

---

Daniel: It's over?

Mr. Egg: Yes, it's over, it's that simple

Daniel: How should my friends use this code generator?

Mr. Egg: Very simple, the example is as follows

```sh
# Installation
$ npm i vue-ncgen-demo-cli -g

# Execute the main command to generate the scaffolding project
$ vue-ncgen-demo-cli

# Execute subcommand to insert code
$ vue-ncgen-demo-cli add-component
```

Daniel: Perfect, I can’t wait to develop my own code generator

Mr. Egg: Looking forward to your feedback

---

ncgen github: https://github.com/daniel-dx/ncgen [Please star it]

ncgen documentation: https://daniel-dx.github.io/ncgen/

Keywords: ncgen, scaffolding, generator, code generator