在前端开发中，我们经常需要使用 jsdoc 记录代码注释，便于自己和其他开发人员理解代码。而在大型项目中，如果类的层次结构复杂，那么使用 jsdoc 记录注释的难度也会增加，这时候就可以使用 npm 包 jsdoc-class-hierarchy 来简化这一过程。
jsdoc-class-hierarchy 是什么？
jsdoc-class-hierarchy 是一个可以根据类的继承关系自动生成文档的工具，它可以：
- 生成类之间的继承关系图，帮助开发人员更好地理解和阐述类的结构和作用。
- 自动为类添加注释，减少手动编写注释的工作量。
安装和使用
安装
使用 npm 安装：
npm install jsdoc-class-hierarchy
配置
- 在项目的根目录下创建 jsdoc 配置文件
jsdoc.config.js，添加以下内容：
-- -------------------- ---- -------
-------------- - -
------- -
-------- ----------
--------------- ------------------
--
-------- ---------------------
----- -
------------ --------
--
---------- -
------------ -----
--------------- -----
-------- -
------------------ ----
--
----- ---------------
------ ---------
-------- -----------
--------- -----
----------- ----- -- ----- ------- --
--
--------- -
------- ------
--------- ----
--
------------------------ -
------- ----------------------
-
--- 在
package.json中添加以下 script：
{
"scripts": {
"docs": "node_modules/.bin/jsdoc -c jsdoc.config.js --readme README.md src/*"
}
}使用
- 在你的代码中使用常规的 jsdoc 标记类和类的属性、方法等。例如：
-- -------------------- ---- -------
---
- ------
- ------
--
----- ------ -
------------- --
---
- ----
--
-------- --
-
---
- --
- -------- ------
- ------
--
----- ----- ------- ------ -
------------- -
--------
---
- --
--
--------- - -----
-
---
- --
--
-------- --
-运行
npm run docs生成文档。打开
./docs/index.html，你将看到生成的文档。在导航栏中选择「Classes」标签，你可以看到生成的类之间的继承关系图。生成的继承关系图可能会出现一些问题，你可以在
./jsdoc.config.js文件中的jsdoc-class-hierarchy选项中添加一些配置来解决这些问题。例如，你可能想忽略一些类，你可以添加以下配置：
"jsdoc-class-hierarchy": {
output: "class-hierarchy.json",
ignore: [
"Parent"
]
}总结
npm 包 jsdoc-class-hierarchy 可以为前端开发人员提供一种简单、方便的方式来记录注释和生成继承关系图。通过本篇文章的介绍和示例代码，相信读者已经对该工具有了初步的了解和掌握，希望本文能提供一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f1d5a00403f2923b035c578