从零开始搞基建(5)——代码质量

简介: 从零开始搞基建(5)——代码质量

一、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%。

  

  有些重复代码可以不用关注,例如数据库字段的声明。

  有些重复代码可以做针对性的优化,降低复制黏贴的频率。

  但工作量还是有点的,并且在重构后,还需要对原功能做验证。

相关文章
|
1月前
|
前端开发 NoSQL 关系型数据库
探索后端开发:从零到精通的旅程
【9月更文挑战第36天】在数字时代,后端开发是构建强大、可靠和高效应用程序的核心。本篇文章将带你踏上一段奇妙之旅,从基础概念到高级实践,揭示后端开发的奥秘。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的知识和启发。让我们一起探索后端开发的世界,发现它的无限可能!
40 3
|
3月前
|
XML Java 开发工具
探索安卓应用开发:从零到一的旅程
【8月更文挑战第31天】跟随一位初学者的视角,本篇文章将带你走进安卓应用开发的奇妙世界。我们将从安装开发工具开始,逐步深入到编写第一个“Hello World”程序,并最终实现一个简单的待办事项应用。通过这个旅程,你将学会如何将创意转化为可触及的应用,体验技术带来的成就感。
|
3月前
|
存储 关系型数据库 数据库
探索后端开发:从零到一的旅程
【8月更文挑战第27天】本文将引导你踏上后端开发的奇妙之旅,从基础概念的搭建到实际项目的实现。我们将通过一个简单的例子—构建一个博客网站后端—来展示如何一步步地将理论转化为实践。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的视角和深入的理解。让我们开始吧!
|
敏捷开发 架构师 程序员
十年前对敏捷开发的体会
十年前对敏捷开发的体会
|
前端开发 jenkins 测试技术
自动化测试技术笔记(一):前期调研怎么做
虽然说自动化测试比较偏技术工作,但在开展前,明确你的工作目标和KPI也是不可忽视的一点。并不是说技术优秀就可以拿到好的绩效,企业生存第一法则是先活下来做产出,再考虑锦上添花和技术优化的事。
|
设计模式 Serverless 领域建模
实战经验 | 怎样才能提升代码质量?
提升代码质量的三个有效方法:领域建模、设计原则、设计模式。
实战经验 | 怎样才能提升代码质量?
|
安全 测试技术
从零开始搞基建(3)——设计方案
  最近看了一篇文章,文章中提到在开发流程中包含一个设计方案的阶段,位于需求评审之后,用于描述自己对于该需求的实现思路、模块划分等相关考虑的点,可供今后自己或他人查阅。   目的就是在编码前理清思路,整体架构,查缺补漏,作为他人或自己的技术参考文档。   自己在项目开发的过程中,也曽有过这样类似的想法,但没有作者那样写的系统,也没有在团队中落地。   基于文章中的设计方案,自己做了点修改。设计方案包括4个部分:需求、调研、实现和复盘。
从零开始搞基建(3)——设计方案
|
存储 移动开发 前端开发
从零开始搞基建(1)——前端代码规范
对所有引用都使用 const,不要使用 var。原因:这样做可以确保你无法重新分配引用,以避免出现错误和难以理解的代码。 如果引用是可变动的,使用 let 代替 var。原因:let 是块级作用域的,而不像 var 属于函数级作用域。 坚持使用全等 === 摒弃相等 ==,原因:相等会进行隐式的类型转换。 使用浏览器全局变量时加上 window 前缀,document 和 navigator 除外。
|
JSON 前端开发 测试技术
从零开始搞基建(2)——团队协作规范
前端会与公司的所有部门有协作,若在某一环出现问题,就会发生不必要的时间开销,降低开发效率。所以有必要制订一套完善的协作流程。