代码质量
格式化代码
安装依赖
$ yarn add --dev prettier pretty-quick husky
1
package.json 中添加
{
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
这样就能在代码预本地提交时将代码格式化
git hooks
pre-commit，预本地提交。通常会在该提交之前，进行一些语法和 lint 的检测。pre-push，预远程提交。通常会在该提交之前，运行一些测试。
代码 Lint
根据所需安装相应的依赖和添加对应的 script，具体可以参考 Ant Design
{
"scripts": {
"lint": "npm run lint:tsc && npm run lint:script && npm run lint:demo && npm run lint:style && npm run lint:deps",
"lint-fix": "npm run lint-fix:script && npm run lint-fix:demo && npm run lint-fix:style",
"lint-fix:demo": "eslint-tinker ./components/*/demo/*.md",
"lint-fix:script": "npm run lint:script -- --fix",
"lint-fix:style": "npm run lint:style -- --fix",
"lint:demo": "cross-env RUN_ENV=DEMO eslint components/*/demo/*.md --ext '.md'",
"lint:deps": "antd-tools run deps-lint",
"lint:md": "remark components/",
"lint:script": "eslint . --ext '.js,.jsx,.ts,.tsx'",
"lint:style": "stylelint '{site,components}/**/*.less' --syntax less",
"lint:tsc": "npm run tsc"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^2.0.0",
"@typescript-eslint/parser": "^2.0.0",
"babel-eslint": "^10.0.1",
"eslint": "^6.1.0",
"eslint-config-airbnb": "^18.0.0",
"eslint-config-prettier": "^6.0.0",
"eslint-plugin-babel": "^5.3.0",
"eslint-plugin-import": "^2.17.3",
"eslint-plugin-jest": "^22.6.4",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-markdown": "^1.0.0",
"eslint-plugin-react": "^7.14.2",
"eslint-tinker": "^0.5.0"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
测试
开发人员自己写测试会更友好一些。按照测试金字塔理论来说，我们需要三种类型的测试：
单元测试，用于保证我们的基础函数是正常、正确工作的。服务测试，不仅仅自身的服务，也会测试第三方依赖服务。UI 测试，模仿用户操作行为的测试。
对于一个前端项目来说，我们通常只需要两种： 单元测试 和 E2E测试。实际上，理论上应该还有 UI 组件的测试，但是一般而言，我们在选用 UI 组件的时候，会考虑到组件的稳定性。
用于保证这个项目的质量，在代码提交之后，会经过一系列的测试：
- 单元测试
- 自动化 UI 测试
- 开发人员手动进行集成测试
- 测试人员进行 3~4 轮的测试