导语
Commently 是一款方便前端开发者在代码中添加注释的 npm 包。使用 Commently，你可以很方便的在你的代码文件中添加注释，同时保证注释风格的统一性。本文将详细介绍 Commently 的安装、使用方法和特点，以及如何构建一个带注释的前端项目。
安装 Commently
安装 Commently 非常简单。只需要打开终端，然后运行以下命令即可：
npm install --save-dev commently
当然，也可以使用 yarn 来安装 Commently：
yarn add --dev commently
安装完成后，就可以开始使用 Commently 了。
使用 Commently
Commently 的使用非常简单，只需在你的代码文件中添加类似于以下的注释，Commently 就会根据注释的位置自动为你检测代码的函数、类、方法、属性等，并将注释展示在对应的代码上方：
-- -------------------- ---- ------- --- - ------ - ------ -------- ------ - --- - ------ -------- ------ - --- - -------- --------- ----- -- -------- ------------------ ------- - ------ ----- -
如上注释可以被 Commently 识别出来并 $\color{Green}\text{高亮}$ 和$\color{DeepSkyBlue}\text{格式化}$ 示例函数：
这里概述一下注释块的规则：
- 注释块以
/**开头，以*/结尾； - 强制每一行都以
*开头； - 在注释中可以添加
@param、@return等标记，以指定参数、返回值的类型和描述； - 可以在注释中添加其他的内容，以帮助其他人更好的理解你的代码。
除了对函数的注释，Commently 也支持对以下几种语法结构进行注释：
- 类
- 枚举
- 类型
- 接口
- 继承（ extends、implements 后面的注释块）
以下是用 Commently 注释的一个类和一个枚举：
-- -------------------- ---- ------- --- - ----- - ------ -- ----- ------- - --- - ------ -- ------------- -- --- - ------ -- ---------- -- - --- - ------ - ----- -------- -- ----- ------ - - ---- -- ---- -- ------ -- --
在示例代码中，在定义类 MyClass 时，在注释块中使用 @class，该注释将为该类添加注释块。而在定义枚举时在注释块中使用 @enum {number}，该注释将为该枚举添加注释块。
Commently 的特点
Commently 有以下特点：
统一风格
使用 Commently，你可以通过固定的注释格式，统一你的代码库的注释风格。这将使得阅读和理解代码更加容易和方便。
智能识别
Commently 可以智能识别代码中的函数、类、方法、枚举、接口等语法结构，并在其上方添加相应的注释块。这将使得你的代码注释更加精准且有针对性。
更好的可维护性
使用 Commently，你可以在注释块中添加关于代码的解释、用法、警告、方式等描述，有利于团队之间的沟通以及之后的维护工作。
快速构建带注释的项目
使用 Commently，你可以很快速的构建一个带注释的项目。你只需要在你的代码中添加注释块，添加必要的标记，即可生成统一风格的注释块。
总结
Commently 是一款非常好用的 npm 包，在代码中添加注释十分方便，同时也可以帮助前端开发者构建可维护、易阅读的项目。在项目中使用 Commently，可以帮助你和团队更好地协作，也提高了代码开发和维护效率。
示例代码
-- -------------------- ---- ------- --- - ------ - ------ -------- ------ - --- - ------ -------- ------ - --- - -------- --------- ----- -- -------- ------------------ ------- - ------ ----- - --- - ----- - ------ -- ----- ------- - --- - ------ -- ------------- -- --- - ------ -- ---------- -- - --- - ------ - ----- -------- -- ----- ------ - - ---- -- ---- -- ------ -- --
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f406e37dbf7be33b25671ff