渣渣灰手摸手带你提高项目的代码质量

[clock157]

大家好，我是渣渣灰~ 本文的目标是为你介绍典型的前端项目中是如何做代码检查（lint）和代码美化（prettier），并说明其原理。 如果你觉得太复杂不想看，那请直接使用 umi-lint。

为什么

在协同合作的项目中，如果没有统一的代码规范和约定，每个人都按照自己的心情去写代码，那最终项目将变的很难维护。

保证代码质量是每个工程师应该尽到的责任 @yutingzhao1991

方案

在社区中，常见的最佳实践是分两部分

1. 全局检查，一般用于手动执行或是 ci（持续集成）时检查，如果有问题会提示 ci 不通过。
2. 代码提交时检查，只对提交的代码进行检查，并美化和自动修复，如果存在有问题的代码，git 会阻止提交，从根源杜绝垃圾代码入库。

涉及的包

• eslint js 和 ts 代码检查工具
• stylelint css 代码检查工具
• tslint typescript 代码检查工具，已不再推荐。原因
• prettier 代码美化工具
• husky git 钩子创建工具，我们使用的是 precommit 钩子，在提交代码（git commit）时候会触发。
• lint-staged 只对需要提交的代码进行检查

如何做

我们以上一篇教程渣渣灰手摸手带你开发一个组件库的代码为示例项目，接入代码质量规范相关工具。

配置 eslint

代码界的纪检委，eslint 的核心是通过一系列的 rules 规则来定制代码规范，在社区中已经沉淀很多典型的规则集，形成了不同的风格。umi 的规则集 eslint-config-umi 主要是基于 create-react-app，再沉淀了一部分我们自己的规则，并且支持 ts，推荐使用。

Tips: 为了更好的使用 eslint，在代码编辑器安装相应插件会实时显示错误

安装

$ yarn add eslint eslint-config-umi --dev

新建配置文件 .eslintrc

{
    "extends": "umi"
}

在 package.json 添加 scripts，让 eslint 扫描 src/ 目录

"scripts": {
+    "lint": "eslint src/"
}

执行命令

$ yarn run lint

因为没有不规范写法，所以执行完没有错误，但我们修改 src/Foo/index.js，随便写一句 hello = 1 再执行

yarn run v1.13.0
$ eslint src

/Users/puwei/Code/github.com/clock157/umi-library-demo/src/Foo/index.js
  3:1  error  'hello' is not defined  no-undef

✖ 1 problem (1 error, 0 warnings)

error Command failed with exit code 1.

就会提醒你 no-undef 未定义错误，通过这个错误码你可以在 eslint 官网找到相应解决方案。

配置 prettier

代码界的美图秀秀，可以自动的帮你处理一些格式问题，诸如 tab，单双引号，换行，空格等。

安装

$ yarn add prettier --dev

新建配置文件 .prettierrc, 我们常用的配置

{
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 100
}

在 package.json 添加 scripts，自动美化 src/

"scripts": {
	"lint": "eslint src",
+   "prettier": "prettier --write 'src/**/*.{js,jsx}'"
}

运行一次

yarn run v1.13.0
$ prettier --write 'src/**/*.{js,jsx}'
src/Foo/index.js 66ms
src/Foo/index.test.js 15ms
src/index.js 8ms
✨  Done in 0.37s.

快去看看，代码是否已经闪闪发亮 😁

提交时检查代码

社区最佳的实践是在代码提交时进行检查，这样就杜绝了垃圾代码进入代码库，具体的配置需要涉及两个工具：husky和 lint-staged。

安装

$ yarn add husky lint-staged --dev

Tips: husky 在安装时会在 .git/hooks 下创建一系列钩子，请确保安装时你的项目已经 git init 过，否则可能不会生效。

配置 package.json

"scripts": {
    "lint": "eslint src",
    "prettier": "prettier --write 'src/**/*.{js,jsx}'",
+   "precommit": "lint-staged"
},
+"lint-staged": {
+    "*.{js,jsx}": ["eslint --fix", "prettier --wirte", "git add"]
+}

这段代码的意思就是在代码提交前执行 lint-staged, 检查待提交的 js 和 jsx 文件，对它们分别执行 eslint, prettier, 会尝试修复比如少个分号这种，如果不能修复就会报错阻断提交。

Let's Try

$ git add src/Foo/index.js
$ git commit -m 'test'

结果，提交失败，你需要改到没有错误才能提交。

husky > pre-commit (node v8.11.1)
  ↓ Stashing changes... [skipped]
    → No partially staged files found...
  ❯ Running linters...
    ❯ Running tasks for *.{js,jsx}
      ✖ eslint
        prettier --wirte
        git add

✖ eslint found some errors. Please fix them and try committing again.

/Users/puwei/Code/github.com/clock157/umi-library-demo/src/Foo/index.js
3:1  error  'hello' is not defined  no-undef

✖ 1 problem (1 error, 0 warnings)

husky > pre-commit hook failed (add --no-verify to bypass)

至此，代码的检查与美化就处理好了。本篇完整示例代码

结语

lint 的确可以让代码更好看和维护，但是配置过程还是有点麻烦，特别是每次新开一个项目都需要重新配置一次，极其繁琐，那我们怎么简化操作呢？

答案就是封装，我们封装了umi-lint，你只需要两步就可以做到这一切，乃至更多。

安装

yarn add umi-lint --dev

使用

在 package.json 添加

"scripts": {
+   "lint": "umi-lint src/",
+   "precommit": "umi-lint --staged --stylelint --prettier --fix",
}

收工👏

交流

有什么疑问，可以在钉钉群交流