项目质量监测（一）——代码质量检查-书写风格、代码规范、高度耦合 & 代码质量监测之Js检验工具-JSLint、JSHint、ESLint

项目质量监测（一）——代码质量检查-书写风格、代码规范、高度耦合 & 代码质量监测之Js检验工具-JSLint、JSHint、ESLint

5-2 项目质量监测

课程介绍

没有规矩不成方圆，所以我们写代码也要有"规矩"，但是我们通常记不住所有的"规矩"，因为人嘛，不可能不犯错。但是，这难不到我们程序员，我们让机器、代码、程序帮我们搞定，让它们来帮我们进行代码质量检查，以便提高的程序的健壮性。

通常来说，项目的质量决定了：

• 软件项目的命运
• 软件项目的可维护性
• 软件项目的运维成本
• 软件项目的扩展性

为什么要进行代码质量检查？

代码检查很重要，原因有三：

1. 避免低级bug：一些常见代码问题，如果在编译或运行前不能及时发现，代码中的语法问题会直接导致编译或运行时错误，影响开发效率和代码质量；
2. 统一代码习惯：每一个团队或个人都会有一些代码规范或者代码习惯，为了便于后期维护和阅读，我们编写的代码也需要符合一定的格式规范；
   • 空格
   • 统一缩进
   • 命名规范
   • …
3. 保证线上代码质量：在版本管理中，我们需要在提交或发布之前自动执行一些代码检查工作，确保我们的代码符合最终版本要求。

如何让一个团队的人产出的代码都在一个基本水平底线之上呢？最初是靠制订规范。要确保规范得以执行只能靠人，所以文字规范成了code review的公共参照标准。**单纯靠人的事最终都容易流于形式，所以需要工具加以保证。**虽说工具并不能完全实现规范中的规则，但至少能够在一定程度上缓解代码不统一的局面。

本课程的学习路径：

• Why
• What
• How

本课程的主要内容：

代码质量监测包括：代码规范（代码编写层面）、功能实现（测试层面）、Code Review（团队协作层面）。

本课程，代码规范作为展开，以eslint为例子；代码质量中的功能实现，以e2e test为例子。

关于，功能实现中的单元测试，5-3课程中有具体的框架使用及介绍。

• 代码Lint——告别低级代码错误，简单的配置让程序来自动检查
• e2e test——了解什么是黑盒测试，如何进行e2e test，即End to End Test，端到端的测试。
• 开源测试平台：Codecov介绍——配合Ci工具，让测试过程自动化，大大提升效率

这些徽章都是可以点击的，第一个点进去是 https://travis-ci.org/，travis-ci 是一个 CI（Continuous integration，持续集成） 平台，主要提供集群编译、单测、集成测试的环境。.org 的服务对公有仓库免费，.com 面向私人、团队、公司的项目提供商业支持（收费）。使用起来非常简单，使用 Github 帐号登录进去，就能看见开始界面。

第二个徽章是 codecov.io（单测覆盖率统计平台），接入过程也很简单，也是不同语言选择不同的配置文件，codecov 可以无缝衔接 travis-ci，只需要在原来的配置文件上稍作修改即可，核心就是生成单测的结果文件。\

本课程的学习准备：

• IDE vscode，node > 10.15
• 包管理工具：yarn, cnpm
• Github账号

代码质量检查

前端代码中的常见问题(Why Lint)

书写风格

这个问题不用作过多阐述，想必接手过他人代码的同学，多少都有些体会。简单来说，太过随意的代码会让强迫症患者难以容忍，难以阅读理解的代码有时甚至不如推倒重来。

// bad
var once
  , upon
  , aTime;

// good
var once,
    upon,
    aTime;

// bad
var hero = {
    firstName: 'Bob'
  , lastName: 'Parr'
  , heroName: 'Mr. Incredible'
  , superPower: 'strength'
};

// good
var hero = {
  firstName: 'Bob',
  lastName: 'Parr',
  heroName: 'Mr. Incredible',
  superPower: 'strength'
};

代码规范

什么样的代码是低质量或高质量的？好的代码可能会让你如读小说一般被吸引，糟糕的代码会让你看一眼就不想继续、甚至看半天而不知所云。

有人可能认为初级程序员才会有这种问题，其实不然，一些工作经验两三年的同学写的代码依然如此。对于一些个人自学意识不够积极、没有团队规范性指引的同学，很容易习惯成“学习半年、然后重复三年无长进”的情况。

Lint会通过源代码去查找：

• 格式问题

• 不遵守编码标准和惯例

• 精确定位程序中可能存在的逻辑错误

高度耦合

这种问题其实是非常普遍的。一个函数几百行、一个文件数千行、一个类几十个方法、方法参数定义随意、没有任何注释、方法与变量命名无明确的语义、数据修改与变更穿插在各种方法中等等。 这样的编码方式，你要去理解它的逻辑往往真的很难，一般只能一块块一行行的去做阅读理解（可能还会开启边看边骂娘模式）。

这主要原因在于开发者个人的基础知识能力、编码经验和意识等的不足。

其实针对这种情况，常见的开源的编码规范都会有所提及。我的建议是这些同学应该好好温习一下面向对象编程、函数式编程、数据结构、常见设计模式，看一看各种开源的编码规范并尝试去真正的理解它们。当你回顾一个月前的代码时，发现可以改进或重构使得编码逻辑更为简洁清晰，说明你是在成长与进步的。

经常看到有同学问这类问题：新项目正在选型，Vue.js、React、Angular 三大框架哪个合适？其实团队开发成员对这些都比较有经验，哪种都可以；如果团队成员前端开发经验大都不是太丰富或人员不够稳定，选择 Vue.js 最适合，为什么？因为它更简单简洁，容易上手。Vue.js 通过 prop、data、computed、method、watch 等各种钩子，一定程度上限定了编码方式与风格，使得初级开发者写出来的代码也不会太难看，这也是它越来越受社区推崇的原因之一。

代码质量监测（Def: Lint Code）

那么，什么是代码质量监测？

Lint或者Linter是一种分析源代码以标记编程过程中（代码、样式、构建）书写的错误的工具或者过程。

Lint, or a linter, is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs.[1] The term originates from a Unix utility that examined C language source code.[2]

代码Lint是动态的监测代码编写的错误，以便我们能写出高质量的代码。

与Prettier或者Format要区别开来，Lint只会告诉你代码中的错误或者不符合规范的地方，而Format是用来对格式进行调整的。

如何进行代码质量监测(How to Lint)

为了统一团队的代码规范，除了一纸规范说明之外，还需要引入工具进行限制。虽说工具并不能完全实现规范中的规则，但至少能够在一定程度上缓解代码不统一的局面。

相对于后端，前端代码规范的质量检查涉及到HTML, CSS，Javascript ，如今还涉及到SCSS，ES5，JSX, React，Vue，Angular等。

常见的代码质量Lint工具：

HTML / tpl: HTMLHint

CSS / SCSS: StyleLint

JS / JSX: ESLint

3种常见的Js检验工具比较

常见三个可以使用的js校验器，但是怎么选择使用哪一个呢？接下来让我们看看这四种流行方案的特点、优点和不足：JSLint、JSHint、ESLint。

四种工具用相同的基本方式工作。他们都有一套用户分析、报告js文件错误的规则。他们都可以通过npm安装。他们都可以通过命令行使用、作为IDE插件使用、也可以集成到编辑器中。他们四种均支持使用注释进行配置。

JSLint

JSLint是其中最老的工具。在2002年 Douglas Crockford开发了该工具，根据其经验，强制使用js语言中精粹的部分。如果你同意这些精粹，JSLint能成为一个好的工具。

JSLint的缺点是不能配置和拓展。你根本不能禁掉需要特性，并且很多缺少文档。官方文档非常不友好，例如缺少如何将其集成到编辑的信息。

优点

• 参数配置完成，可以直接使用

缺点

• JSLint不存在配置文件，如果想改变参数设置，那就存在问题
• 有限的配置选项，许多规则不能禁掉
• 不能增加个性化规则
• 没有文档记录规则
• 很难弄清楚哪个规则引起的错误

JSHint

作为一个可配置的JSLint版本，JSHint被开发出来。你可以配置每个规则，将其放到一个配置文件中，这样在大项目中可以容易使用。JSHint对每个规则有好的文档，所以可以准确知道每个规则的作用。将其集成到编辑器也是简单的。

JSHint的一个小缺点是里面的松散默认配置。也即是你在使其可用之前必须将其启动。和ESLint相比，确定哪个规则用户开启或关闭错误信息，JSHint是更加困难。

优点

• 大多是参数可以配置
• 支持配置文件，在大项目中容易使用
• 已经支持需要类库，像jQuery、QUnit、NodeJS、Mocha等
• 支持基本的ES6

缺点

• 难于知道哪个规则产生错误
• 存在两类选项：强制选项和松散选项。使得配置有些混乱
• 不支持自定义规则

ESLint

ESLint是比较新出来的工具。它被设计的容易拓展、拥有大量的自定义规则、容易的通过插件来安装。它给出准确的输出，而且包括规则名，这样可以知道哪个规则造成了错误。

ESLint文档多少有些混乱。规则容易查找，以及被分为逻辑组，但是配置指南在有些地方容易弄混。然而它可以在一个地方提供链接去编辑集成、插件和样例。

优点

• 灵活：任何规则都可以开启闭合，以及有些规则有些额外配置
• 很容易拓展和有需要可用插件
• 容易理解产出
• 包含了在其他检查器中不可用的规则，使得ESLint在错误检查上更有用
• 支持ES6，支持JSX的工具
• 支持自定义报告

缺点

• 需要一些配置
• 速度慢

JSCS已经合并到ESlint

总结一下：

分类	JSLint	JSHint	ESLint
初始配置	有	有	可配置
自定义	命令行，有限	可配置	可配置
配置文件	否	是	是
ES6	是	是	是
JSX	否	是	是
执行效率	高	中	低
输出友好度	低	中	高
Stars	3.3k	8.2k	14.2k