ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

如何用 Ant Design CLI 离线查询组件 API、Demo 与 Design Token

如何用 Ant Design CLI 离线查询组件 API、Demo 与 Design Token 如何用 Ant Design CLI 离线查询组件 API、Demo 与 Design Token【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design在编写或维护基于 Ant Designantd的代码时经常需要确认三件事组件支持哪些 Prop、类型和默认值是什么有哪些可参考的 Demo 源码当前版本下组件使用了哪些 Design Token。官方命令行工具ant-design/cli将全部元数据随包安装——antd v3 / v4 / v5 / v6 的每个 Prop、Token、Demo 和 Changelog 条目——在终端毫秒级查询完全离线无需网络请求也无 API Key。本文以 Node.js20.0.0环境为前提讲解如何安装该工具并用antd info、antd demo、antd token完成上述查询。安装 CLI 并验证全局安装ant-design/clinpm install -g ant-design/cli文档同时给出 pnpm 和 bun 的等价安装方式pnpm add -g ant-design/cli bun add -g ant-design/cli安装后所有元数据都在本地本文后续查询均不需要网络。用 CLI 版本号确认安装成功antd -V-V即--cli-version会打印 CLI 版本号看到版本号即说明命令已可用。查询组件 APIantd info与antd doc先用antd list确认组件名称及版本信息再对目标组件发起查询antd list # 所有组件含双语名称、分类和引入版本 antd info Button # 组件 Props、类型、默认值 antd doc Button # 完整 Markdown 文档antd info Component输出该组件的 Props 表格内容包括类型、默认值、since版本和废弃状态可以直接回答“这个 Prop 存不存在、默认值是什么、是否已废弃”。antd doc Component输出组件的完整 Markdown 文档适合把某个组件的完整说明离线取到终端或编辑器中。组件名记错时不必反复试错CLI 基于 Levenshtein 距离做智能纠错例如输入Buttn会建议Button。查询可运行的 Demo 源码antd demo需要参考某个组件的用法时直接取 Demo 源码antd demo Select basic # 输出 Select 的 basic Demo 源码命令形式为antd demo Component [name]name是 Demo 名称上例为basic输出的是可运行的 Demo 源码TSX。查询 Design Tokenantd tokenantd token # 全局 Design Token antd token DatePicker # DatePicker 的组件级 Design Token[Component]参数可省略以查询全局 Token指定组件名则查询该组件级 Token。注意该命令的 Token 值仅覆盖 v5 及以上版本v5。指定查询的目标版本与输出格式上述查询默认自动检测目标 antd 版本检测顺序为--version参数、node_modules/antd、package.json依赖声明然后使用默认回退版本。CLI 内置 v3/v4/v5/v6 共 55 个小版本快照要查询某个精确版本时显式传--version参数值为 antd 版本号如5.20.0antd info Button --version 5.20.0常用全局参数如下参数说明默认值--format json\|text\|markdown输出格式text--version v目标 antd 版本如5.20.0自动检测--lang en\|zh输出语言en--detail包含扩展信息false-V, --cli-version打印 CLI 版本号-每个组件名、描述和文档均有中英文通过--lang zh切换所有命令都支持--format json得到结构化输出antd doc Button --lang zh antd info Button --format json在 CI 等环境中的行为调整文档列出的环境变量均可按需设置变量说明ANTD_NO_AUTO_REPORT1关闭 AI Agent 的 Bug 上报建议NO_UPDATE_CHECK1跳过静默版本更新检查CI1跳过静默版本更新检查等同于NO_UPDATE_CHECK1例如在 CI 流水线中执行查询CI1 antd info Button --format json验证方式与已知边界安装验证antd -V能打印 CLI 版本号。查询验证antd info Button返回 Props 表格类型、默认值、since、废弃状态antd doc Button返回完整 Markdown 文档antd demo Select basic返回可运行的 TSX 源码antd token DatePicker返回 Design Token 值——对照上述命令说明即可判断查询是否命中。边界antd token的 Token 值仅覆盖 v5离线查询能力来自随包安装的元数据本文全部命令无需网络。如果希望 AI 工具Claude Code、Cursor、VS Code、Codex 等也能查询这些知识CLI 还支持antd mcp启动 MCP 服务器提供 8 个工具和 2 个提示词或用antd setup --client client写入项目配置具体见 MCP Server 指南 与 LLMs.txt 指南。完整的 CLI 命令与参数以 CLI 指南 为准。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表