开发工具【免费下载链接】enquirerStylish, intuitive and user-friendly prompts. Used by eslint, webpack, yarn, pm2, pnpm, RedwoodJS, FactorJS, salesforce, Cypress, Google Lighthouse, Generate, tencent cloudbase, lint-staged, gluegun, hygen, hardhat, AWS Amplify, GitHub Actions Toolkit, airbnb/nimbus, and more! Please follow Enquirers author: https://github.com/jonschlinkert项目地址https://gitcode.com/gh_mirrors/en/enquirer点击查看免费下载Form Prompt 是 Enquirer 提供的多字段表单型提示器它让用户可以在同一界面内依次填写多个字段并支持字段导航、默认值、基于已有输入的动态建议等能力。本指南以 docs/prompts/form/getting-started.md 为主线带你从最基础的input提示出发逐步将其改造成包含多个字段的form再深入默认值initial与onChoice回调的用法并对照 lib/prompts/form.js 源码理解底层实现。读完本文你将能够独立编写一个可运行、可扩展的多字段表单提示并知道如何为每个字段注入默认值或联动逻辑。适用场景为什么在 CLI 工具中使用 Form在构建命令行工具时表单型提示Form Prompt非常有价值它允许用户在一次交互中填写一组相关字段例如用户注册信息、配置参数或调查问卷。与逐个弹出多个独立提示相比Form 将多个字段呈现在同一块界面中用户可以使用方向键在字段之间上下移动、逐字段输入并随时回看和修改此前填写的内容。正如 docs/prompts/form/getting-started.md 所述用户可以在输入过程中自由导航各字段并得到多种便捷选项。在源码层面Form Prompt 由 lib/prompts/form.js 实现。它继承自SelectPromptlib/prompts/select.js而SelectPrompt又继承自ArrayPromptlib/types/array.js最终继承自基类Promptlib/prompt.js。构造函数中通过super({ ...options, multiple: true })强制开启多选语义并把this.type设置为formlib/prompts/form.js这意味着 Form 在内部复用了选择类提示的字段渲染、滚动与导航机制只是把选择项变成了可输入的字段。第一步定义一个基础 Prompt要使用 Form Prompt首先从enquirer包中引入prompt方法然后像定义普通提示一样定义一个输入字段。以下示例创建了一个名为firstname的文本输入type: inputconst { prompt } require(enquirer); const results prompt({ message: First Name:, name: firstname, type: input });这里的prompt是 Enquirer 的静态方法在 index.js 中Enquirer.prompt会创建一个新的Enquirer实例并依次处理传入的问题对象而Enquirer.prompt上还会为每种已注册提示类型挂载快捷方法例如Enquirer.prompt.formindex.js。prompt()返回一个 Promise其 resolve 值是一个以name为键、以用户输入为值的 answers 对象。第二步把 Prompt 升级为 Form要把单个输入升级为表单只需在配置对象中增加两个关键属性type: form声明这是一个表单提示choices: string[] | Choice[]声明表单中的字段列表。字段可以是纯字符串也可以是包含message、name等属性的对象。同时把原先描述单个字段的message: string改为描述整个表单的引导语并为整个表单指定一个独立的name: string用于在 answers 对象中作为这一组字段的命名空间。const { prompt } require(enquirer); const results prompt({ choices: [{ message: First Name, name: firstname }], message: Please provide the following information:, name: user, type: form });值得注意的是choices中的每个字段对象至少要给出name和messagename是提交结果对象中的键message是界面中显示的字段标签。从源码看lib/types/array.js 的toChoice()会对每个字段做归一化处理ele.name ele.name || ele.key || ele.title || ele.value || ele.message、ele.message ele.message || ele.name并初始化input 、cursor 0等内部状态因此即使只提供name也能正常渲染。第三步添加多个字段现在可以继续为表单追加字段。把需要用户填写的每项信息都作为一个对象加入choices数组即可。下面是一个包含名、姓、GitHub 用户名三个字段的完整示例const { prompt } require(enquirer); const results prompt({ choices: [ { message: First Name, name: firstname }, { message: Last Name, name: lastname }, { message: GitHub username, name: username } ], message: Please provide the following information:, name: user, type: form });运行后界面会依次呈现三个可输入字段用户通过上下方向键切换焦点字段直接键入字符即可填充回车提交整个表单。提交后results形如{ user: { firstname: Jon, lastname: Schlinkert, username: jonschlinkert } }外层键user来自表单的name内层键分别来自每个字段的name。这一结果的组装逻辑在 lib/prompts/form.js 的submit()中提交时this.value this.values而this.values会在每次渲染字段时被重新填充lib/prompts/form.js 的this.values[name] (input || initial)。运行示例与配套脚本仓库的 guide/lib/prompts/form/getting-started.js 提供了与本文示例完全对应的可运行脚本区别在于它用.then(...)/.catch(...)显式处理 Promise并把结果经highlight高亮后打印到控制台const { prompt } require(enquirer); const response prompt({ type: form, name: user, message: Please provide the following information:, choices: [ { message: First Name, name: firstname }, { message: Last Name, name: lastname }, { message: GitHub username, name: username } ] }); response .then(answers console.log(highlight(answers))) .catch(console.error);在本地安装依赖后npm install直接node guide/lib/prompts/form/getting-started.js即可体验完整的表单交互流程。进阶一用initial为字段设置默认值在日常使用中很多字段需要预填默认值。docs/prompts/form/default-values.md 介绍了最简单的方式为字段对象添加initial: string属性。const { prompt } require(enquirer); const results prompt({ choices: [ { initial: Jon, message: First Name, name: firstname }, // ... ], // ... });initial的行为在源码中有两处体现占位提示未输入时lib/prompts/form.js 通过placeholder(this, options)把initial作为占位文本显示在当前字段上提示用户这是默认内容自动补全next()方法lib/prompts/form.js在用户切换字段时检查如果当前输入恰好是initial的前缀initial.startsWith(input) input ! initial则自动把输入补全为完整的initial并把光标移到末尾从而支持输入首字母即可快速补全默认值的交互。另外initial还可以是函数lib/types/array.js 会在字段初始化时调用ele.initial.call(this, this.state, ele, i)并把返回值写入ele.input可用于异步或动态计算默认值。进阶二用onChoice复用已填字段表单的常见需求是让后一个字段根据前面字段的输入自动生成建议值。例如假设 GitHub 用户名等于(firstname lastname).toLowerCase()就可以在 username 字段上定义onChoice(state, choice, i)方法从this.values中取出前面字段的值并动态设置choice.initialconst { prompt } require(enquirer); const results prompt({ choices: [ // ... { message: GitHub username, name: username, onChoice(state, choice, i) { const { firstname, lastname } this.values; choice.initial ${firstname}${lastname}.toLowerCase(); } } ], // ... });onChoice的签名是onChoice(s: State, c: Choice, i: number)。它的调用链位于 lib/types/array.js每当一个字段要渲染时onChoice(choice, i)会先发出choice事件若该字段定义了onChoice回调则以this即当前 Form 实例为上下文调用参数依次为this.state、choice、i而 lib/prompts/form.js 的renderChoice()在每个字段渲染前都会调用this.onChoice(choice, i)。这保证了回调执行时此前所有字段的值含initial与已输入内容已经写入this.values见 lib/prompts/form.js因此可以在回调中放心读取并覆盖当前字段的initial。结合两种技巧一个完整带默认值与联动建议的表单如下对应 guide/lib/prompts/form/default-values.jsconst { prompt } require(enquirer); const results prompt({ choices: [ { initial: Jon, message: First Name, name: firstname }, { initial: Schlinkert, message: Last Name, name: lastname }, { message: GitHub username, name: username, onChoice(state, choice, i) { const { firstname, lastname } this.values; choice.initial ${firstname}${lastname}.toLowerCase(); } } ], message: Please provide the following information:, name: user, type: form });源码视角Form 与 Select 的关键差异从 lib/prompts/form.js 的实现细节可以看出 Form 之所以像表单的几处设计按键即输入dispatch(char)、space()、number()都会把字符追加到当前焦点字段lib/prompts/form.js、L74-L80。这与选择类提示中空格切换选中的语义完全不同——在 Form 中空格和数字都成为字段内容的合法字符。字段级光标编辑append、delete、deleteForward、left、right都在当前字段的input与cursor上操作lib/prompts/form.js使每个字段都像独立的小型输入框。字段指示符indicator()对已有内容的字段显示⦿对空字段显示⊙lib/prompts/form.js方便用户快速识别哪些字段尚未填写。标签对齐默认align: right字段名在渲染时通过padStart右对齐使各字段的输入区对齐成一条竖线lib/prompts/form.js、L136-L137。校验与提示renderChoice()会执行字段级validate不通过则以 danger 色标红、format格式化显示与result改写最终值并支持error/hint后缀提示lib/prompts/form.js后续可据此为单个字段添加独立校验。下一步与相关文档至此你已经掌握了 Form Prompt 的基础用法定义字段、切换字段、设置initial默认值以及用onChoice实现字段间的联动建议。接下来可以继续深入为 Form Prompt 设置默认值initial 与 onChoice 完整指南本文进阶两节的完整出处含更完整的可运行示例guide/lib/prompts/form/getting-started.js 与 guide/lib/prompts/form/default-values.js两份可直接运行的标准示例脚本docs/prompts/form.mdForm Prompt 的其他特性与配置项概览lib/prompts/form.jsForm 提示的完整源码可进一步研究字段校验、格式化与提交流程。……以上。Form Prompt 已就绪接下来就看你如何把它组合进自己的 CLI 工具了。赞分享开发工具【免费下载链接】enquirerStylish, intuitive and user-friendly prompts. Used by eslint, webpack, yarn, pm2, pnpm, RedwoodJS, FactorJS, salesforce, Cypress, Google Lighthouse, Generate, tencent cloudbase, lint-staged, gluegun, hygen, hardhat, AWS Amplify, GitHub Actions Toolkit, airbnb/nimbus, and more! Please follow Enquirers author: https://github.com/jonschlinkert项目地址https://gitcode.com/gh_mirrors/en/enquirer点击查看免费下载相关推荐vxe-table排序功能从入门到精通单字段与多字段实战指南vxe table排序功能从入门到精通单字段与多字段实战指南 你是否还在为表格数据排序功能繁琐而烦恼是否遇到过单字段排序无法满足复杂数据展示需求的情况本文前端UI组件react-jsonschema-form中的表单字段输入建议API设计react jsonschema form中的表单字段输入建议API设计 在现代Web应用开发中表单字段的输入建议功能如自动补全、智能提示是提升用户体验的前端UI组件Gitea 源码构建指南如何用 Makefile 快速编译并运行你的 GiteaGitea 源码构建指南如何用 Makefile 快速编译并运行你的 Gitea Gitea 是一款轻量级、可自托管的 All in one 软件开发平台集后端代码托管研发协作CI/CD上一篇抖音直播录制终极指南完美解决视频文件损坏问题下一篇新手必看obs-localvocal从零开始安装与配置5分钟开启AI字幕之旅创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考