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.

• #Javascript