Markdown 中的 Table 一键排序

[simonguo]

背景

在 Markdown 中我们经常会用到表格 , 但是手动排版太麻烦了，特别是表格排序。

在我们的开源项目 React Suite 中，组件的 API 文档，会用到大量的表格, 在写的时候随心所欲的写，发布上线，然后有人反应，包括我自己也觉得没有排序的表格，阅读起来太不爽了。

那怎么办？改呗。 本来想让新来的同事去改的， 然后再一看文档，80 个左右的组件再加上中英文两个版本，有 160 个左右的表格需要改，每一个表格如果要人工调整是很痛苦的。交给新同事太残忍了，还是自己写个工具解决吧。

本来想找个现成的工具，但是没找到，然后看了看类似的表格的格式化 VS Code 的插件，然后随手就改了改，写了一个可以排序的小插件，希望可以帮到您。

效果

格式化前大概长成这个样子，乱七八糟。

| name | email | description |
| -- | -- | --- |
| zhang | [e-mail]  | zhang  |
| wang | [e-mail]   | wang |
| li | [e-mail]   | li  |
| amity | [e-mail]  | amity  |
| batman | [e-mail] | batman |

格式后，就整齐了，同时 name 一列按照字母排序了。

| name   | email        | description |
| ------ | ------------ | ----------- |
| amity  | [e-mail]  | amity       |
| batman | [e-mail] | batman      |
| li     | [e-mail]     | li          |
| wang   | [e-mail]   | wang        |
| zhang  | [e-mail]  | zhang       |

表格的格式我用的是prettier,它提供很方便的 API。

安装

在 VS Code Extensions 中搜索: Markdown Table Sort

• VS Code 安装地址
• 源码地址

[yesmeck]

我们有个脚本 https://github.com/ant-design/ant-design/blob/master/scripts/sort-api-table.js

[lucifineil]

org 大法好

[simonguo]

@yesmeck 这个不错

[lululau]

这个操作叫 tabularization，感觉 LZ 应该也是工具控，建议玩下 Emacs，玩下 org-mode，那种感觉就是再也回不去了。即便是为了和他人协作必须用 Markdown，Emacs 的 markdown-mode, 因为用了 org-tbl-mode，所以它可能也是最棒的 Markdown 编辑器了

[kerr92]

@yesmeck 原来 antd 是这么给 Markdown 表格排序的，明天借鉴一下加到公司文档的 npm scripts 里😄

[quinoa42]

踢一下馆


相关扩展：
```
Plug 'godlygeek/tabular'
Plug 'plasticboy/vim-markdown'
```

[maemolee]

比如 姓名-值 的表格，能按照 值 从大到小排列吗？

[simonguo]

@maemolee 实现上是完全可以的，不过等我过两天空了，把这些配置功能加上。

[maemolee]

@simonguo NICE

[tamlok]

@quinoa42 如果有中文，效果会怎么样？

[simonguo]

@quinoa42 如果能排序，效果会更好

[Betsy]

@quinoa42 想问下你这个动态图是怎么录制的，用的什么工具？

[quinoa42]

@Betsy
[Kap]( https://github.com/wulkano/kap)

[quinoa42]

@simonguo 个人觉得排序不应该是 markdown 工具的一部分（考虑到各种排序的可能性,难免会使问题变得非常复杂），如果有类似需求我会选择用 python 之类的工具事先生成表格

[quinoa42]

@tamlok

[STRRL]

@quinoa42 问一下 中文字体用的什么呀？

[recall704]

当某一格的内容太多的时候还是不好使。

[Daath]

提个建议：能不能只帮我格式化每行的距离，但不要为每行排序上下位置这样的配置，忽略现在按字段名来排序了每行的上下位置。。感觉写文档的时候就已经自己有顺序的去写了。。我是手写的。。。原谅我不是自动生成的。

[Daath]

就像 6 楼那样的。。。。

[Trim21]

有可能从新同事写的工具变成了自己写的工具...