Using Lists In A Yeoman Generator
22 January 2016For 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.