一、AppWorks
AppWorks 是一款基于 VS Code 插件的前端研发工具集。
1)AppWorks Doctor
我试用了其中的代码质量检测插件,这款插件会依赖 package.json 文件。
所以当前项目的根目录中需要包含此文件,否则无法运行命令。
在 Mac 环境中,Ctrl+Shift+P 快捷键后弹出命令框,选择 AppWorks: Scan Your Project,开始扫描当前项目。
我试验了管理后台项目,虽然出现了扫描结果,但是只有 Ali ESLint 给出了打分,里面都是格式问题。
上图中的可维护性和代码重复度的分数并没有给出。
2)AppWorks CodeMod
AppWorks CodeMod 是一个进行大规模代码库重构的插件,也是通过命令来唤起的。
命令框中输入 AppWorks: CodeMod 激活插件,出现一些重构选项,没有 Vue 代码的重构。
试验了 React,会对项目进行扫描,然后给出待优化的文件路径,点 Update 按钮就能自动修改。
不过看不到具体的代码行数,Next Generation JS 中可以修改 JavaScript 的语法。
例如将 var 替换成 let 或 const、替换成箭头函数、使用字符串模板等。
二、jscpd
jscpd 是一款代码重复检测工具,可以作为库使用,可以在终端通过命令来使用。
1)安装
为了简单点,我全局安装了 jscpd。
npm install jscpd -g
全局安装后,就可以根据其提供的关键字来组织命令。
jscpd --ignore "**/node_modules/**" --reporters html /Users/code/web/backend_server
在上面的命令中,忽略了 node_modules 目录中的文件,然后输出网页报告,目录如下。
注意,当前目录(终端所在的位置)中必须包含 report 文件夹,否则无法输出报告。
2)报告
运行命令后,会在终端看到两两比对,输出重复代码的文件路径,并且给出了详细的行数,例如 416 和 348 行。
我将 server 项目扫描了一遍,有 682 个文件包含了 429 段重复代码,总行数 8172 ,重复率占 10.89%。
有些重复代码可以不用关注,例如数据库字段的声明。
有些重复代码可以做针对性的优化,降低复制黏贴的频率。
但工作量还是有点的,并且在重构后,还需要对原功能做验证。