Cómo crear indicaciones de línea de comandos interactivas con Inquirer.js

Introducción

Inquirer.js es una colección de interfaces de usuario de línea de comandos interactivas comunes. Esto incluye escribir respuestas a preguntas o seleccionar una opción de una lista.

El inquirerpaquete ofrece varios mensajes predeterminados y es altamente configurable. También es extensible mediante una interfaz de complemento. Incluso admite promesas y async/awaitsintaxis.

En este artículo, instalará y explorará algunas de las características de Inquirer.js.

Prerrequisitos

Si deseas seguir este artículo, necesitarás:

• Un entorno de desarrollo local para Node.js. Sigue Cómo instalar Node.js y crear un entorno de desarrollo local .

Este tutorial fue verificado con Node v15.14.0, npmv7.10.0 y inquirerv8.0.0.

Paso 1: Configuración del proyecto

Primero, abra su ventana de terminal y cree un nuevo directorio de proyecto:

mkdir inquirer-example

Luego, navegue hasta este directorio:

cd inquirer-example

Para comenzar a agregar indicaciones a sus scripts de Node.js, deberá instalar el inquirerpaquete:

npm install inquirer

En este punto, tienes un nuevo proyecto listo para usar Inquirer.js.

Paso 2: creación de indicaciones

Ahora, crea un nuevo index.jsarchivo en el directorio de tu proyecto y ábrelo con tu editor de código.

Dentro de su guión, asegúrese de requerir inquirer:

índice.js

const inquirer = require('inquirer');

Añade un mensaje que le pregunte al usuario cuál es su reptil favorito:

índice.js

const inquirer = require('inquirer');inquirer  .prompt([    {      name: 'faveReptile',      message: 'What is your favorite reptile?'    },  ])  .then(answers = {    console.info('Answer:', answers.faveReptile);  });

Vuelva a visitar la ventana de su terminal y ejecute el script:

node index.js

Se le presentará un mensaje:

Output? What is your favorite reptile?

Al proporcionar una respuesta se mostrará la respuesta:

Output? What is your favorite reptile? CrocodilesAnswer: Crocodiles

Puede proporcionar un defaultvalor que permita al usuario presionar ENTERsin enviar ninguna respuesta:

índice.js

const inquirer = require('inquirer');inquirer  .prompt([    {      name: 'faveReptile',      message: 'What is your favorite reptile?',      default: 'Alligators'    },  ])  .then(answers = {    console.info('Answer:', answers.faveReptile);  });

Ejecute el script nuevamente y aparecerá un mensaje:

Output? What is your favorite reptile? (Alligators)

Al presionar ENTERsin una respuesta se enviará la respuesta predeterminada:

Output? What is your favorite reptile? AlligatorsAnswer: Alligators

Ahora puedes crear indicaciones y establecer valores predeterminados.

Paso 3: creación de múltiples indicaciones

Es posible que hayas notado que el .prompt()método acepta una matriz u objetos. Esto se debe a que puedes encadenar una serie de preguntas de solicitud y todas las respuestas estarán disponibles por nombre como parte de la answersvariable una vez que se hayan resuelto todas las solicitudes.

Vuelva index.jsa visitar su editor de código y agregue un mensaje que le pregunte al usuario cuál es su color favorito:

índice.js

const inquirer = require('inquirer');inquirer  .prompt([    {      name: 'faveReptile',      message: 'What is your favorite reptile?',      default: 'Alligators'    },    {      name: 'faveColor',      message: 'What is your favorite color?',      default: '#008f68'    },  ])  .then(answers = {    console.info('Answers:', answers);  });

Ejecute el script nuevamente y se le presentarán dos indicaciones:

Output? What is your favorite reptile? Alligators? What is your favorite color? #008f68Answers: { faveReptile: 'Alligators', faveColor: '#008f68' }

Ahora puedes crear múltiples indicaciones.

Paso 4: uso de listas, listas sin formato, listas expandibles, casillas de verificación, contraseñas y editores

inquirerNo solo permite solicitar al usuario que ingrese texto. A modo de ejemplo, los siguientes tipos se mostrarán por sí solos, pero es muy posible encadenarlos pasándolos en la misma matriz.

Lista

El listtipo le permite presentar al usuario un conjunto fijo de opciones para elegir, en lugar de una entrada de formato libre como la inputque proporciona el tipo:

lista.js

const inquirer = require('inquirer');inquirer  .prompt([    {      type: 'list',      name: 'reptile',      message: 'Which is better?',      choices: ['alligator', 'crocodile'],    },  ])  .then(answers = {    console.info('Answer:', answers.reptile);  });

Vuelva a visitar la ventana de su terminal y ejecute el script:

node list.js

Se le presentará un listmensaje:

Output? Which is better? (Use arrow keys)❯ alligator  crocodile

El usuario puede utilizar las teclas ARROW UPy ARROW DOWNpara navegar por la lista de opciones. jLa knavegación con teclado también está disponible.

Lista en bruto

El rawlisttipo es similar a list. Muestra una lista de opciones y permite al usuario ingresar el índice de su elección (comenzando en 1):

lista de reproducción.js

const inquirer = require('inquirer');inquirer  .prompt([    {      type: 'rawlist',      name: 'reptile',      message: 'Which is better?',      choices: ['alligator', 'crocodile'],    },  ])  .then(answers = {    console.info('Answer:', answers.reptile);  });

Vuelva a visitar la ventana de su terminal y ejecute el script:

node list.js

Se le presentará un rawlistmensaje:

Output? Which is better?  1) alligator  2) crocodile  Answer:

Si envía un valor no válido, se producirá un "Please enter a valid index"error.

Lista expandible

El expandtipo recuerda a algunas aplicaciones de línea de comandos que le presentan una lista de caracteres que corresponden a funciones que se pueden ingresar. expandLos avisos inicialmente presentarán al usuario una lista de los valores de caracteres disponibles y les darán contexto cuando se presione la tecla:

expandir.js

const inquirer = require('inquirer');inquirer  .prompt([    {      type: 'expand',      name: 'reptile',      message: 'Which is better?',      choices: [        {          key: 'a',          value: 'alligator',        },        {          key: 'c',          value: 'crocodile',        },      ],    },  ])  .then(answers = {    console.info('Answer:', answers.reptile);  });

Vuelva a visitar la ventana de su terminal y ejecute el script:

node expand.js

Se le presentará un expandmensaje:

Output? Which is better? (acH)

De forma predeterminada, Hse incluye la opción que representa "Help"y al ingresar Hy presionar ENTERcambiará a una lista de opciones, indexadas por sus caracteres que luego se pueden ingresar para hacer una selección.

Output? Which is better? (acH)  a) alligator  c) crocodile  h) Help, list all options  Answer:

Si envía un valor no válido, se producirá un "Please enter a valid command"error.

Caja

El checkboxtipo también es similar a list. En lugar de una única selección, permite seleccionar varias opciones.

casilla de verificación.js

const inquirer = require('inquirer');inquirer  .prompt([    {      type: 'checkbox',      name: 'reptiles',      message: 'Which reptiles do you love?',      choices: [        'Alligators', 'Snakes', 'Turtles', 'Lizards',      ],    },  ])  .then(answers = {    console.info('Answer:', answers.reptiles);  });

Vuelva a visitar la ventana de su terminal y ejecute el script:

node checkbox.js

Se le presentará un checkboxmensaje:

Output? Which reptiles do you love? (Press space to select, a to toggle all, i to invert selection)❯◯ Alligators ◯ Snakes ◯ Turtles ◯ Lizards

De manera similar a los otros listtipos, puede utilizar las teclas de flecha para navegar. Para hacer una selección, presione SPACEy también puede seleccionar todo con ao invertir su selección con i.

OutputAnswer: [ 'Alligators', 'Snakes', 'Turtles', 'Lizards' ]

A diferencia de los otros tipos de solicitud, la respuesta para este tipo de solicitud devolverá una matriz en lugar de una cadena. Siempre devolverá una matriz, incluso si el usuario optó por no seleccionar ningún elemento.

Contraseña

Este passwordtipo ocultará la información ingresada por el usuario, lo que permite que los usuarios proporcionen información confidencial que no debería verse:

const inquirer = require('inquirer');inquirer  .prompt([    {      type: 'password',      name: 'secret',      message: 'Tell me a secret',    },  ])  .then(answers = {    // Displaying the password for debug purposes only.    console.info('Answer:', answers.secret);  });

Vuelva a visitar la ventana de su terminal y ejecute el script:

node password.js

Se le presentará un passwordmensaje:

Output? Tell me a secret [hidden]

La entrada está oculta para el usuario.

Editor

Este editortipo permite a los usuarios utilizar su editor de texto predeterminado para entradas de texto más grandes.

editor.js

const inquirer = require('inquirer');inquirer  .prompt([    {      type: 'editor',      name: 'story',      message: 'Tell me a story, a really long one!',    },  ])  .then(answers = {    console.info('Answer:', answers.story);  });

Vuelva a visitar la ventana de su terminal y ejecute el script:

node editor.js

Se le presentará un editormensaje:

Output? Tell me a story, a really long one! Press enter to launch your preferred editor.

inquirerIntentará abrir un editor de texto en el sistema del usuario en función del valor de las variables de entorno $EDITORy $VISUAL. Si no hay ninguna, se utilizarán vim(Linux) y (Windows) en su lugar.notepad.exe

Conclusión

En este artículo, instalaste y exploraste algunas de las características de Inquirer.js. Esta herramienta puede ser útil para recuperar información de los usuarios.

Continúa tu aprendizaje con algunos de los complementos . Como inquirer-autocomplete-prompt, inquirer-search-list, y inquirer-table-prompt.