如何快速给已有的代码加注释

这是我参与更文挑战的第 6 天，活动详情查看：更文挑战

写在前面：这是一个比较扯淡的用法，面对认为不合理的需求，建议还是和规则制定者沟通，了解他们的真实诉求，实在不行的话，能偷懒还是要偷点懒的。

那么故事开始。

前一段时间，某个技术群的群友提到：

公司规范组推广代码规范，要求代码都要配上注释，且注释量需要达到代码行数的 1/3 。现在求一个自动加注释的方案，先把这个事情搞过去。

如果说是在编写代码时加注释，成熟的 IDE 或者代码编辑器都是有插件或者代码模板可以完成类似工作。

以 vscode 为例，插件可以使用 koroFileHeader 或者 Document This。koro 甚至可以添加字符画

但如果说在已有代码上添加注释，可以想到的方案就是重构工具。

重构工具使开发人员能够在短时间内重构大型代码库。在某些情况下，开发人员可能会使用 IDE 来执行类或变量名的重构，但是，通常一次只能将其限定为一个文件。而重构工具允许进行全局查找和替换。

比较著名的 js 重构工具有 facebook 开发的 codemod 和 jscodeshift。这两者都基于 esprima。

值得一提的是，vue 和 react 在代码升级时，均编写了自己的重构工具 react-codemod 和 vue-codemod，两者均有 jscodeshift 的支持。

关于 jscodeshift，可以参考 jscodeshift 简易教程、代码重构利器 —— jscodeshift 和 使用重构件（Codemod）加速 JavaScript 开发和重构

jscodeshift 如何起到重构作用？

jscodeshift 解析 js ，将 js 内容解析成 AST 语法树，而后提供一些便利的操作接口，方便咱们对各个节点进行更改，比如说更改全部的属性名。

以官方提供的代码举例：

const j = require('jscodeshift');

j(jsContent)
    .find(j.Identifier)
    .replaceWith(
      p => j.identifier(p.node.name.split('').reverse().join(''))
    );
复制代码

执行这段代码，可以将 console.log('123') 转换成 elosnoc.gol('123') 。

尝试解决问题吧

话说回来，上面群友提到的问题，同样可以使用 jscodeshift 解决。

解决步骤可以分为三步：