vitepress-plugin-props2table

Parsing interface Show as a table.

why?

Writing component documents makes the work cumbersome.
Using this plug-in, you can directly import parameter files to parse the table format you want.

中文

编写组件文档让工作变得繁琐，使用该插件可以直接导入参数文件，从而解析为你想要的表格格式

install

pnpm i vitepress-plugin-props2table

usage

1、add plugin in vite.config.js

import { props2table } from 'vitepress-plugin-props2table'

export default defineConfig({
    plugins: [
        props2table(),
    ],
})

2、add command in markdown

<!-- /path.ts is you file path -->
@props2table(/path.ts)

3、and you will see a table

Output table demo

参数	说明	类型	是否必填	可选值	默认值
a	描述a	string	true		默认值是1
b	描述b 是一个枚举值	a | b | c	true		默认值是a
c	描述c是一个外部引用的类型	Props2	true
e	描述e 是一个数组	string[]	true
f		Record<string, string>	true

Get Parse Interface

If you don't want to render it as a table and want to get the parsing results
you can directly use the parseInterface method.

import { parseInterface } from 'vitepress-plugin-props2table'
parseInterface('you code') // return JSON => ParseInterfaceTypes

ParseInterfaceTypes

doc

http://yucccc.com/vitepress-plugin-props2table/