探索 typhonjs

1. 使用方式
2. VSCode 插件
3. 关键指标
• 代码圈复杂度
• 代码可读性
• 代码可维护度
4. 核心源码实现
5. 总结

目前市面上的前端代码质量评分中的代码可维护度是大都是基于 typhonjs-escomplex 这个库扫描而来，但是这个库的官方文档并没有介绍相关指标数据的计算规则，不知道规则如何提升指标数据呢？所以本文对 typhonjs-escomplex 源码进行探索，探索其关键指标计算逻辑。

使用方式

使用方式很简单，引用后调用 analyze 方法传入需要检测的源代码即可。

import escomplexModule from 'typhonjs-escomplex-module';

const ast = <some parsed AST>;

const report = escomplexModule.analyze(ast);

analyze 的第二个参数可以传入相关配置项。

commonjs: true,
logicalor: true,
newmi: true,

但此库只支持js文件的检测，对应像vue这类文件无法检测，我们可以通过以下方式提取script中的内容后进行检测。

const fs = require('fs');
const doc = fs.readFileSync('test.vue', 'utf-8');
const escomplex = require('typhonjs-escomplex');

const srcs = doc.match(/(?<=<script>)[sS]*?(?=</script>)/g);
srcs.map((src) => {
  const report = escomplex.analyzeModule(src); 
});

调用analyzeModule返回的report即是代码的相关检测指标数据。

需要注意的是此库已经 5 年没有更新了，由于这方面的库比较少加上本身的能力也比较强大，就算过去了 5 年没有维护的情况下现在的每周下载仍在 1 万+的数量。

总结

通过查阅代码圈复杂度和代码可读性的计算方法，并分析扫描库 typhonjs-escomplex 的源代码的实现逻辑，想要基于此扫码库提升代码质量以及相关指标数据可以从以下几个方面进行：

1. 减少操作符和操作数的种类，尽量使用简单、常见的操作符和操作数，避免过于复杂或冗余的语言特性，以及使用更多的内置函数来实现。
2. 模块化或组件复用，将代码分解为独立的模块或组件，每个模块负责特定的功能，这样可以减少重复的代码也会提示代码可维护度。
3. 简化复杂逻辑，分解更小、更易管理的函数或模块来实现，避免过多的条件判断和嵌套循环，从而降低代码的复杂度。
4. 代码重构：定期审查和重构代码，使其更加清晰、简洁，并符合良好的代码设计原则。

优化代码质量目标是减少代码的复杂性和冗余，提高代码的可读性和可维护性。但在实际优化过程中也需要权衡对代码的改造是否存在过大的风险和需要更多的投入回归测试。如果你对代码质量的要求高，那么这是一件需要长期要去做的事情，需要定期审查过往代码是否存在优化提升的空间。