jsdoc-vue-component
A simple plugin for jsdoc (
pase vue SFC info to description by AST analysis).
Maybe you will try jsdoc-vuedoc, and you have a better experience。
Installation
npm i jsdoc-vue-component -DRelated
- espree: parse code to ast.
- escodegen: generate code from ast.
- estraverse: traverse the AST tree.
- JsDoc3.
- docstrap: a theme for jsdoc3.
- jsdoc-vuedoc: A jsdoc3 plugin use
@vuedoc/md.
Use:
This plugin just extract the component's info into
markdownformat, and instert it into the@vuedoc's position.
Not affect other jsdoc features of the code.
- add
@vuedoctag to comment. - add
@exports componentNametag to comment.
just add @vuedoc tag, @exports tag, to the to document in you vue SFC.
/**
* sidebar component description
* @vuedoc
* @exports component/SideBar
*/
export default {}如何使用jsdoc？
- 安装jsdoc:
npm i jsdoc -D - 安装模板：
npm i sherry-docstrap -D, 原来的docstrap有点小bug还未修复，所以自己暂时发布一个。 - 在项目目录下建了配置文件：下面有示例，适当修改。
- 在pacakge.json 里添加一个script:
"jsdoc": "rm -rf public/jsdoc && node_modules/.bin/jsdoc -c jsdoc.json",public/jsdoc为发布位置，适当修改 - 生成文档:
npm run jsdoc
Options
log: true,tag: 'vuedoc'
jsdoc.json
{
"plugins": [
"node_modules/jsdoc-vue-component",
"plugins/markdown",
"plugins/summarize"
],
"jsdoc-vue-component": {
"log": true
},
"markdown": {
"tags": ["author", "classdesc", "description", "param", "property", "returns", "see", "throws", "vue"]
},
"recurseDepth": 10,
"source": {
"include": ["fe/src"],
"includePattern": ".+\\.(js|vue)$",
"excludePattern": "(^|\\/|\\\\)_"
},
"sourceType": "module",
"tags": {
"allowUnknownTags": true,
"dictionaries": ["jsdoc", "closure"]
},
"templates": {
"logoFile": "",
"cleverLinks": false,
"monospaceLinks": false,
"dateFormat": "ddd MMM Do YYYY",
"outputSourceFiles": true,
"outputSourcePath": true,
"systemName": "DocStrap",
"footer": "",
"copyright": "DocStrap Copyright © 2012-2015 The contributors to the JSDoc3 and DocStrap projects.",
"navType": "vertical",
"theme": "cosmo",
"linenums": true,
"collapseSymbols": false,
"inverseNav": true,
"protocol": "html://",
"methodHeadingReturns": false
},
"markdown": {
"parser": "gfm",
"hardwrap": true
},
"opts": {
"template": "node_modules/sherry-docstrap/template",
"encoding": "utf8",
"destination": "./public/jsdoc/",
"recurse": true,
"readme": "README.md",
"tutorials": "./docs/"
}
}效果
.
