基于VS Code的JSDoc的使用指南

基于,vs,code,jsdoc,使用指南 · 浏览次数 : 956

小编点评

**JSDoc的使用指南** **1. 安装** * 使用 npm 安装 JSDoc:`npm install jsdoc` * 使用 CMD 安装 JSDoc:`npm install jsdoc -g` **2. 使用** * 在代码中添加 JSDoc 注解:`/** ... */` * 编写注释,以生成 API 文档 * 在 VS Code 中使用 JSDoc 功能,例如代码提示和类型提示 **3. 常用标签** * `Color` 类用于指定颜色,可以包含红、绿、蓝和透明值。 * `CustomPrimitive` 类继承自 `Cesium.Primitive` 类,表示自定义mitives。 * `CesiumMath` 类提供数学常量。 * `Mtah` 模块包含各种常量。 **4. 示例** ```javascript /** * Clones an object, returning a new object containing the same properties. * * @param {Object} object The object to clone. * @param {Boolean} [deep=false] If true, all properties will be deep cloned recursively. * @returns {Object} The cloned object. */ function clone(object, deep) { // ... } /** * A color, specified using red, green, blue, and alpha values, * which range from <code>0</code> (no intensity) to <code>1.0</code> (full intensity). * * @param {Number} [red=1.0] The red component. * @param {Number} [green=1.0] The green component. * @param {Number} [blue=1.0] The blue component. * @param {Number} [alpha=1.0] The alpha component. */ function Color(red, green, blue, alpha) { // ... } ``` **5. 资源** * 官方文档:Use JSDoc: Index * JSDoc 入门指南:JSDoc中文文档 | JSDoc中文网 * 使用 jsDoc 提升我们的开发效率:知乎 (zhihu.com) * JavaScript Programming with Visual Studio Code。归纳总结以上内容

正文

1. 引言

JSDoc是一个用于 JavaScript 的API文档生成器,可以将文档注释直接添加到源代码中,JSDoc 工具将扫描您的源代码并提供一些操作,例如,生成一个 API 文档

JSDoc官网:Use JSDoc: Index

JSDoc中文站点:JSDoc 入门 | JSDoc中文文档 | JSDoc中文网

GitHub站点:jsdoc/jsdoc: An API documentation generator for JavaScript. (github.com)

VS Code是前端常用的开发工具,其内置了JSDoc注解支持,可以参考:JavaScript Programming with Visual Studio Code

所以,使用JSDoc,可以实现:

  • 美观的注释规范
  • 编辑器的代码提示
  • API文档生成等

例如,使用VS Code打开Cesium源码:

image-20230407012035540

可以看到Cesium中的注释是比较规范美观的,另外,鼠标悬浮在注释的变量或者函数上时,会有对应的类型提示

JSDoc主要是生成API 文档,但是与编辑器集成,将会带来代码编辑更好的体验

本文描述VS Code中JSDoc的使用指南

2. 快速使用

由于VS Code内置了JSDoc支持,在输入/**后就会触发语法提示:

动画

随即就可键入注释内容:

image-20230407015311594

保存文件之后,使用该函数或者鼠标悬浮这个函数之上时就会有相应提示:

动画2

安装JSDoc,就可以生成API文档

在当前目录下使用NPM安装JSDoc:

npm install jsdoc

运行JSDoc生成API文档:

npx jsdoc .\test.js

此时会在同目录下生成一个out文件,文件夹下有相关API的HTML文档:

image-20230407020452429

JSDoc更为具体的命令参数和使用方法可以参考:JSDoc 入门 | JSDoc中文文档 | JSDoc中文网

综上,在VS Code中使用JSDoc,实现了:

  • 美观的注释规范
  • 编辑器的代码提示
  • API文档生成等

如果想生成Markdown文件,可以使用:jsdoc-to-markdown

使用方法也基本类似:

安装:

npm install jsdoc-to-markdown

运行:

npx jsdoc-to-markdown .\test.js

不过这个命令只是将数据输出在控制台终端(Terminal)中,要输入文件需要使用重定向字符或命令将数据输入文件:

npx jsdoc-to-markdown .\test.js > README.md
  • 笔者注:使用Power Shell运行上述命令时产生的文件可能有乱码问题,可以使用CMD运行这个命令

image-20230412224455883

API的Markdown文件生成完毕,更为具体的信息可以参考:jsdoc2md/jsdoc-to-markdown: Generate markdown documentation from jsdoc-annotated javascript (github.com)

3. 常用标签

这里以Cesium源码为例,列举一些常用的标签,完整详细的标签说明和命令使用请参考官方文档:Use JSDoc: Index

3.1 函数标签

Cesium源码core文件夹下的clone.js包含一个clone函数:

/**
 * Clones an object, returning a new object containing the same properties.
 *
 * @function
 *
 * @param {Object} object The object to clone.
 * @param {Boolean} [deep=false] If true, all properties will be deep cloned recursively.
 * @returns {Object} The cloned object.
 */
function clone(object, deep) {
  // ...
  return result;
}

其中,

  • 第一句 Clones an object......properties.,是描述语句
  • @function,标记为一个函数
  • @param,标记函数参数的名称、类型和描述,格式为:{参数类型} 参数名 参数描述
  • @returns,标记记录函数返回的值的名称、类型和描述

3.2 类标签

Cesium源码core文件夹下的Color.js包含一个Color类:

/**
 * A color, specified using red, green, blue, and alpha values,
 * which range from <code>0</code> (no intensity) to <code>1.0</code> (full intensity).
 * @param {Number} [red=1.0] The red component.
 * @param {Number} [green=1.0] The green component.
 * @param {Number} [blue=1.0] The blue component.
 * @param {Number} [alpha=1.0] The alpha component.
 *
 * @constructor
 * @alias Color
 *
 * @see Packable
 */
function Color(red, green, blue, alpha) {
  /**
   * The red component.
   * @type {Number}
   * @default 1.0
   */
  this.red = defaultValue(red, 1.0);
  // ...
}

其中,

  • @constructor,标记一个类的构造函数,API文档中为@constructs
  • @alias,标记成员的别名
  • @see,标记可以参考的另一个标识符的说明文档,或者一个外部资源
  • @type,标记一个类型表达式
  • @class,标记一个类

ES 2015 Class不需要使用诸如如 @class@constructor 的标签来描述:

/**
 * 自定义Primitive
 * 
 * @extends Cesium.Primitive
 */
class CustomPrimitive extends Cesium.Primitive {
  /**
   * 构造函数
   * @param {Object} options Primitive的参数
   */
  constructor(options) {
    super(options)
    const modelCenter = Cesium.Cartesian3.fromDegrees(121.474509, 31.233368, 0)
    const modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(modelCenter)
    this._modelMatrix = modelMatrix
  }
}

其中,

  • JSDoc 通过分析代码会自动识别类和它们的构造函数
  • @extends,指明标识符继承自哪个父类,同@augments
  • 通常还有@example,提供代码标识的示例

3.3 常量标签

Cesium源码core文件夹下的Mtah.js包含很多常量:

/**
 * Math functions.
 *
 * @exports CesiumMath
 * @alias Math
 */
const CesiumMath = {};

/**
 * 0.1
 * @type {Number}
 * @constant
 */
CesiumMath.EPSILON1 = 0.1;

// ...

其中,

  • @constant,标记为常量

3.4 模块标签

常见的有,

  • @namespace,标记命名空间
  • @exports,标记导出内容
  • @module,标记一个模块

3.5 变量标签

常见的有,

  • @default,标记默认值
  • @enum,标记为枚举类型
  • @global,标记为全局变量
  • @kind,标记类型(例如,常量、函数等,不同于@class)
  • @readonly,标记为只读

4. 参考资料

[1] Use JSDoc: Index

[2] JSDoc 入门 | JSDoc中文文档 | JSDoc中文网

[3] 使用 jsDoc 提升我们的开发效率 - 知乎 (zhihu.com)

[4] JavaScript Programming with Visual Studio Code

与基于VS Code的JSDoc的使用指南相似的内容:

基于VS Code的JSDoc的使用指南

本文描述VS Code中JSDoc的使用指南

[转帖]从零开始搞基建(5)——代码质量

https://www.cnblogs.com/strick/p/17336589.html 一、AppWorks AppWorks 是一款基于 VS Code 插件的前端研发工具集。 1)AppWorks Doctor 我试用了其中的代码质量检测插件,这款插件会依赖 package.json 文件

Cursor是什么?基于ChatGPT代码编辑器的cursor如何使用?VS Code如何迁移到Cursor的步骤

Cursor 是一个基于 Visual Studio Code(VS Code)技术构建的高级代码编辑器,专为提高编程效率并更深度地整合 AI 功能而设计。它不仅继承了 VS Code 的强大功能和用户界面,还增加了专门针对 AI 支持的特色功能。Cursor 是 VS Code 的一个分支,这意味...

一个基于GPT模型实现的Git Commit信息自动生成工具

每次提交代码的时候,你是否有为如何写Commit Message而迟迟按不下提交的时刻呢?然后,死磨硬泡写了一些并提交后,又被review的小伙伴吐槽了呢?相信很多小伙伴有过这样的经历吧? 趁着最近ChatGPT那么火,就来顺手推荐一个可以用于解决这个问题的VS Code插件:vscode-gpto

【VS Code+Qt6】拖放操作

由于老周的示例代码都是用 VS Code + CMake + Qt 写的,为了不误导人,在标题中还是加上“VS Code”好一些。 上次咱们研究了剪贴板的基本用法,也了解了叫 QMimeData 的重要类。为啥要强调这个类?因为接下来扯到的拖放操作也是和它有关系。哦,对了,咱们先避开一下主题,关于剪

windows离线部署VSCode在Centos7上的远程开发环境

前言 公司一直使用的是ssh+vim的远程开发方式,习惯了vim之后已经非常方便了。但是还是想尝试一下VSCode的开发方式。就我而言,原因如下 漂亮的语法高亮,并且有补全 基于语法解析的引用查找(尽管在我们项目的场景下还是一坨翔) Ctrl+Shift+F的快速搜索 可视化调试,可以直接在代码中下

性能的极致,Rust的加持,Zed-Dev编辑器快速搭建Python3.10开发环境

快就一个字,甚至比以快著称于世的Sublime 4编辑器都快,这就是Zed.dev编辑器。其底层由 Rust 编写,比基于Electron技术微软开源的编辑器VSCode快一倍有余,性能上无出其右,同时支持多人编辑代码。 安装和配置Zed.dev Zed.dev编辑器还在灰度测试阶段,暂时只释出了M

1.课程介绍及环境准备

此合集是刘老师教编程的学习笔记,是个值得推荐的up up链接 https://space.bilibili.com/472907970?spm_id_from=333.788.0.0 1.课程介绍及环境准备 SpringBoot + vue 全栈开发基础 开发工具:IDEA+VSCode 后端:ja

【电脑操作技巧】重装系统之后的常用数据恢复方式和基础环境搭建

记录人生第一次重装系统之后的数据恢复过程,包括桌面恢复、常用软件下载和属性修改、vscode插件、zotero数据恢复、onenote笔记数据恢复,让重装系统的你不用慌。

[转帖]LVS负载均衡的三种方式

1.VS-NAT(基于网络地址转换,network address translation ,NAT) VS-NAT是LVS最基本的方法,如果想要设置一个用于测试的LVS,这是一个最简单的方法。 当客户发出请求,lvs负载均衡中的director会将接受到的包的目标地址重写为某个real-serve