大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 voici

A Node.js library for pretty printing your data on the terminal

voici.js（说：/vwasi/）是一个用 TypeScript 编写的开源 Node.js 库，用于在终端上以表格形式精美地显示数据集。

与 console.table() 相比，voici.js 具有许多功能，例如：

文本、列和行样式突出显示和过滤动态栏目色谱柱尺寸调整、积累表导出、类型系统支持排序

目前 voici 在 Github 上通过 MIT 协议开源，是一个值得关注的前端项目。

如何使用 voici

首先需要使用所需的包管理器安装 voici.js：

npm i --save voici.js// yarnyarn add voici.js

接着可以直接在代码里面导入并使用：

import {Table} from 'voici.js';const data = [ {firstname: 'Homer', lastname: 'Simpson', age: 39}, {firstname: 'Marge', lastname: 'Simpson', age: 36}, {firstname: 'Bart', lastname: 'Simpson', age: 10}, {firstname: 'Lisa', lastname: 'Simpson', age: 8}, {firstname: 'Maggie', lastname: 'Simpson', age: 1}];const table = new Table(data);table.print();

此时将打印出如下内容：

firstname lastname age================================ Homer Simpson 39 Marge Simpson 36 Bart Simpson 10 Lisa Simpson 8 Maggie Simpson 1

默认情况下，每列的宽度取决于其包含的值的长度。除了对象之外，开发者还可以在数据集中提供数组。比如下面的例子：

import {Table} from 'voici.js'const data = [ ['Homer', 'Simpson', 39], ['Marge', 'Simpson', 36], ['Bart', 'Simpson', 10], ['Lisa', 'Simpson', 8], ['Maggie', 'Simpson', 1]];const table = new Table(data);table.printPlain();

voici 还支持众多配置，比如：

更改表格的文本和背景颜色const config = { body: { bgColor: '#6184D8', textColor: '#d8b561' }};const table = new Table(data, config);自定义表格的水平和垂直边框。使用 border 选项 color, groupSize , horizontal、vertical 等配置const config = { border: { groupSize: 2, horizontal: '-', vertical: '|', }};const table = new Table(data, config);table.printPlain();按多列和方向对表进行排序。使用 sort 选项提供一系列 columns 和 directions 方向。方向可以是 asc 或 desc。const config = { sort: { columns: ['lastname', 'age'], directions: ['asc', 'desc'] }};const table = new Table(data, config);

更多关于 voici 的用法可以参考文末资料，本文不再过多展开。

参考资料

https://github.com/larswaechter/voici.js

https://voici.larswaechter.dev/examples/arrays