从零开始搞基建（5）——代码质量

小鱼儿 2024-03-22 17:19 26阅读 0赞

## 一、AppWorks ##

[AppWorks][] 是一款基于 VS Code 插件的前端研发工具集。

**1）AppWorks Doctor**

我试用了其中的[代码质量][Link 1]检测插件，这款插件会依赖 package.json 文件。

![5aee8da861d3a9924366d2197dcd618f.png][]

所以当前项目的根目录中需要包含此文件，否则无法运行命令。

在 Mac 环境中，Ctrl+Shift+P 快捷键后弹出命令框，选择 AppWorks: Scan Your Project，开始扫描当前项目。

我试验了管理后台项目，虽然出现了[扫描结果][Link 2]，但是只有 Ali ESLint 给出了打分，里面都是格式问题。

![495a977352468ba6b600fdae22213b3f.gif][]

上图中的可维护性和代码重复度的分数并没有给出。

**2）AppWorks CodeMod**

AppWorks CodeMod 是一个进行大规模代码库重构的插件，也是通过命令来唤起的。

命令框中输入 AppWorks: CodeMod 激活插件，出现一些重构选项，没有 Vue 代码的重构。

![1312422ff9556c75069966f7125c1558.gif][]

试验了 React，会对项目进行扫描，然后给出待优化的文件路径，点 Update 按钮就能自动修改。

不过看不到具体的代码行数，Next Generation JS 中可以修改 JavaScript 的语法。

例如将 var 替换成 let 或 const、替换成箭头函数、使用字符串模板等。

## 二、jscpd ##

[jscpd][] 是一款代码重复检测工具，可以作为库使用，可以在终端通过命令来使用。

**1）安装**

为了简单点，我全局安装了 jscpd。

npm install jscpd -g

全局安装后，就可以根据其提供的[关键字][Link 3]来组织命令。

jscpd --ignore "**/node_modules/**" --reporters html /Users/code/web/backend_server

在上面的命令中，忽略了 node\_modules 目录中的文件，然后输出网页报告，目录如下。

![0a35b93bc13b1ebee63655dfd6f69e9b.png][]

注意，当前目录（终端所在的位置）中必须包含 report 文件夹，否则无法输出报告。

**2）报告**

运行命令后，会在终端看到两两比对，输出重复代码的文件路径，并且给出了详细的行数，例如 416 和 348 行。

![568511646e2132bb0afb11e40eb9eff5.png][]

我将 server 项目扫描了一遍，有 682 个文件包含了 429 段重复代码，总行数 8172 ，重复率占 10.89%。

![5e0976c871f3896a09f4b1f7d76155b2.png][]

[AppWorks]: https://appworks.site/
[Link 1]: https://appworks.site/pack/advanced/doctor.html#%E8%B4%A8%E9%87%8F%E6%A3%80%E6%B5%8B
[5aee8da861d3a9924366d2197dcd618f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/7eee3957111d4919a2d60e89a7907b61.png
[Link 2]: https://github.com/apptools-lab/appworks/blob/master/extensions/doctor/README.zh-CN.md
[495a977352468ba6b600fdae22213b3f.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/beed822caef546429c497a378769825f.png
[1312422ff9556c75069966f7125c1558.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/fc558dd17941444fab56cb4fc7f92c3d.png
[jscpd]: https://github.com/kucherenko/jscpd
[Link 3]: https://github.com/kucherenko/jscpd/tree/master/packages/jscpd
[0a35b93bc13b1ebee63655dfd6f69e9b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/8952938c7f9d49dcac1dfb701ce09217.png
[568511646e2132bb0afb11e40eb9eff5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/08e56aa6cf214d7298b7f0d63c5a3b84.png
[5e0976c871f3896a09f4b1f7d76155b2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/be421fac85d0491cb6fe3e0701e5cb54.png