Using Lists In A Yeoman Generator

For a large project I’ve been working on with Monotype I recently, through some requirement changes, needed to create a list of options in Yeoman Generator. After some quick googling I found that the best option for me was to use the list type available.

Further reading various Stack Overflow questions and answers, examples from the inquirer.js repo and any documentation I was a little flummoxed.

Every example I could find gave simple one-word options. This works when choosing what size of pizza you require:

var prompts = [
  {
    type: 'list',
    name: 'features',
    message: 'What do you want to make today?',
    choices: ['Jumbo', 'Large', 'Standard', 'Medium', 'Small'],
  },
];

this.prompt(
  prompts,
  function () {
    // do things with the answer here
  }.bind(this)
);

For this project I needed a more descriptive explanation of what they were about to install. Was it a project for a new typeface specimen? A new email project? A quick prototype? We needed to be able to be verbose with out list of choices.

var prompts = [{
type: 'list',
name: ‘project’,
message: 'What type of project do you want to create today?',
    choices: [
        “a new email campaign“,
        “a low fidelity prototype“,
        “a new typeface specimen“,
        “a new landing page“,
        “a new bespoke article”
    ]
}];

this.prompt(prompts, function () {
  // do things with the answer here
}.bind(this));

Looking at this and how the simpler example had one-word answers I thought this would be a problem when it came to assigning the choice made to various options that may or may be required.

I searched the documentation, various blogposts and Stack Overflow (again) for an answer and then I tried something.

Taking a look at the gulp web app generator from the Yeoman Github organisation I looked at how they had used the checkbox type from inquirer.js –

var prompts = [{
  type: 'checkbox',
  name: 'features',
  message: 'What more would you like?',
  choices: [{
    name: 'Sass',
    value: 'includeSass',
    checked: true
  }, {
    name: 'Bootstrap',
    value: 'includeBootstrap',
    checked: true
  }, {
    name: 'Modernizr',
    value: 'includeModernizr',
    checked: true
  }]
  }, {
    //
  }
}];

Here we had name, value and checked. Well I knew I didn’t need checked so I tried using name and value. It worked.

var prompts = [
  {
    type: 'list',
    name: 'features',
    message: 'What do you want to make today?',
    choices: [
      {
        name: 'a new email campaign',
        value: 'includeEmail',
      },
      {
        name: 'a low fidelity prototype',
        value: 'includePrototype',
      },
      {
        name: 'a new typeface specimen',
        value: 'includeSpecimen',
      },
      //
    ],
  },
];

Now, using name we can have a verbose, descriptive option and use it’s value when generating a new project to include the relevant files, bits of HTML or CSS, images, fonts etc.

So now, when we are in a terminal window and Yo the generator we get a nice list to choose one option from.

• CSS
• HTML
• JavaScript
• Sass
• Typography