@clack/prompts 命令行终端中构建交互式用户界面-程序员充电站

@clack/prompts

概述

@clack/prompts是一个轻量、美观且开发者友好的Node.js库，用于在命令行终端中构建交互式用户界面。它提供了一系列样式现代的提示组件，支持异步操作，并包含完整的类型定义（TypeScript），能够显著提升命令行工具的用户体验。

安装

使用npm或yarn进行安装：

# 使用 npmnpminstall@clack/prompts# 使用 yarnyarnadd@clack/prompts# 使用 pnpmpnpmadd@clack/prompts

基础使用模式

每个使用@clack/prompts的CLI工具通常遵循以下模式：

// 1. 引入必要的函数import{intro,outro,confirm,isCancel}from'@clack/prompts';// 2. 显示欢迎信息intro('欢迎使用我的CLI工具');// 3. 执行交互逻辑constshouldContinue=awaitconfirm({message:'是否继续执行？'});// 4. 处理用户取消操作if(isCancel(shouldContinue)){cancel('操作已取消');process.exit(0);}// 5. 显示结束信息outro('任务已完成！');

核心组件详解

1. 文本输入 (input)

用于获取用户单行文本输入。

参数说明：

message: 显示给用户的提示信息
placeholder: 输入框内的占位符文本
defaultValue: 默认值
validate: 验证函数，返回字符串表示验证失败

import{text}from'@clack/prompts';constname=awaittext({message:'请输入项目名称',placeholder:'my-awesome-project',defaultValue:'default-project',validate:(value)=>{if(value.length<3)return'名称至少需要3个字符';if(!/^[a-z\-]+$/.test(value))return'只能包含小写字母和连字符';}});

2. 确认选择 (confirm)

获取布尔值的是/否回答。

import{confirm}from'@clack/prompts';constisReady=awaitconfirm({message:'是否确认删除？',initialValue:true// 默认选中"是"});

3. 单选列表 (select)

让用户从选项列表中选择一个值。

选项配置：

value: 选项的实际值
label: 显示给用户的文本
hint: 额外的提示信息（可选）

import{select}from'@clack/prompts';constframework=awaitselect({message:'请选择前端框架',options:[{value:'react',label:'React',hint:'Facebook开发'},{value:'vue',label:'Vue.js',hint:'渐进式框架'},{value:'angular',label:'Angular',hint:'Google开发'},{value:'svelte',label:'Svelte'}],initialValue:'vue'// 默认选中Vue});

4. 多选列表 (multiselect)

允许用户选择多个选项。

import{multiselect}from'@clack/prompts';constfeatures=awaitmultiselect({message:'选择要添加的功能',options:[{value:'typescript',label:'TypeScript',hint:'类型安全'},{value:'eslint',label:'ESLint',hint:'代码检查'},{value:'prettier',label:'Prettier',hint:'代码格式化'},{value:'tests',label:'测试框架'}],required:false,// 是否至少选择一项initialValues:['typescript','eslint']// 默认选中的值});

5. 密码输入 (password)

输入内容会被隐藏，适用于敏感信息。

import{password}from'@clack/prompts';constsecretKey=awaitpassword({message:'请输入API密钥',mask:'•'// 自定义掩码字符});

6. 进度指示器

显示长时间操作的进度。

import{progress}from'@clack/prompts';// 创建进度条实例constp=progress(0,100,'处理中...');// 更新进度p.update(30,'正在下载文件...');p.update(60,'正在处理数据...');p.update(100,'完成！');// 或使用静态方法progress(30,100,'第一阶段完成');

高级功能

1. 处理取消操作

所有提示函数都可能被用户通过Ctrl+C取消，必须妥善处理：

import{text,isCancel,cancel}from'@clack/prompts';try{constanswer=awaittext({message:'请输入内容'});if(isCancel(answer)){cancel('用户取消了操作');process.exit(0);}console.log(`用户输入:${answer}`);}catch(error){cancel('发生错误: '+error.message);}

2. 自定义样式和主题

通过配置对象自定义外观：

import{setTheme}from'@clack/prompts';// 应用自定义主题setTheme({color:{primary:'#FF6B35',success:'#00C851',error:'#FF4444'}});

3. 分组提示

将多个相关提示组合在一起：

import{group}from'@clack/prompts';constresults=awaitgroup({name:()=>text({message:'姓名'}),email:()=>text({message:'邮箱'}),subscribe:()=>confirm({message:'订阅新闻'})},{onCancel:()=>{cancel('操作取消');process.exit(0);}});console.log(results);// { name: '...', email: '...', subscribe: true/false }

完整示例

以下是一个完整的CLI工具示例，演示了多个组件的组合使用：

#!/usr/bin/env nodeimport{intro,outro,select,text,confirm,multiselect,isCancel,cancel}from'@clack/prompts';asyncfunctionmain(){// 欢迎界面intro('🚀 项目初始化工具');// 收集项目信息constprojectType=awaitselect({message:'选择项目类型',options:[{value:'web',label:'Web应用'},{value:'cli',label:'命令行工具'},{value:'lib',label:'库/包'}]});if(isCancel(projectType)){cancel('操作已取消');returnprocess.exit(0);}constprojectName=awaittext({message:'项目名称',placeholder:'请输入有效的包名'});if(isCancel(projectName)){cancel('操作已取消');returnprocess.exit(0);}constfeatures=awaitmultiselect({message:'选择功能',options:[{value:'typescript',label:'TypeScript'},{value:'testing',label:'测试框架 (Jest)'},{value:'linting',label:'代码检查 (ESLint)'},{value:'formatting',label:'代码格式化 (Prettier)'}]});if(isCancel(features)){cancel('操作已取消');returnprocess.exit(0);}constconfirmSetup=awaitconfirm({message:'确认创建项目？'});if(isCancel(confirmSetup)||!confirmSetup){cancel('项目创建取消');returnprocess.exit(0);}// 模拟创建过程console.log('\n📁 创建项目结构...');console.log(`📦 项目名称:${projectName}`);console.log(`🔧 类型:${projectType}`);console.log(`✨ 功能:${features.join(', ')}`);// 结束界面outro('✅ 项目创建成功！');}main().catch(console.error);