多人协作项目及开源项目，制定团队协作规范十分重要，本篇将从项目 eslint 代码规范、单元测试、持续集成、commit 规范等方面的实践做一些总结。
eslint 篇
eslint 对多人协作项目配置规范化特别重要。
安装 eslint
执行如下指令，安装 eslint 并初始化：
# 安装 eslint
npm install eslint -D
# 初始化
npx eslint --init
复制代码如果要配合 typescript 使用，提前安装 typescript(如不使用 typescript 可忽略此步)：
npm install typescript -D
复制代码忽略部分文件的 eslint 检测
创建 .eslintignore 文件，可配置某些文件忽略 eslint 的检测，例如：
src/test.js
复制代码集成 prettier
安装如下几个包：
npm install prettier eslint-plugin-prettier eslint-config-prettier -D
复制代码在 .eslintrc.js 中添加 plugin:prettier/recommended 并且添加 prettier 的 rules:
module.exports = {
// ...
extends: ['plugin:prettier/recommended'], // 要放在 estends 数组的最后一项
rules: {
'prettier/prettier': 'error',
// ...
},
// ...
};
复制代码然后在根目录新建 .prettierrc 里面配置自己的 prettier 规则，例如：
{
"singleQuote": true,
"semi": true,
"endOfLine": "auto",
"tabWidth": 2,
"printWidth": 80
}
复制代码集成 husky 和 githook
安装 lint-staged
npm install lint-staged -D
复制代码指定 lint-staged 只对暂存区的文件进行检查，在 package.json 中新增如下内容：
{
// ...
"lint-staged": {
"**/*.{jsx,txs,ts,js,vue}": [
"eslint --fix",
"git add"
]
}
}
复制代码集成 husky，新版本(v7) 的 husky 通过如下方式集成：
# 安装 husky
npm install husky -D
# husky 初始化，创建 .husky 目录并指定该目录为 git hooks 所在的目录
npx husky install
# 指定 husky 在 commit 之前运行 lint-staged 来检查代码
npx husky add .husky/pre-commit "npx lint-staged"
复制代码由于 husky 是装在本地的，在 package.json 中新增如下指令，项目安装依赖时同时预装 husky:
{
// ...
"scripts": {
// ...
"prepare": "npx husky install"
},
// ...
}
复制代码配合 vscode
vscode 安装 eslint 插件，让我们在编写代码时就能够进行错误提示：
测试篇
单元测试
安装测试库
执行如下命令，安装测试库 mocha + 断言库 chai：
npm install mocha chai -D
复制代码编写测试用例
要测试如下 src/index.js 中的内容：
function add(a, b) {
return a + b;
}
function sub(a, b) {
return a - b;
}
module.exports.add = add;
module.exports.sub = sub;
复制代码新建 test/index.test.js 测试文件，编写如下测试用例：
const { add, sub } = require('../src/index');
const expect = require('chai').expect;
describe('测试', function () {
it('加法', function () {
const result = add(2, 3);
expect(result).to.be.equal(5);
});
it('减法', function () {
const result = sub(2, 3);
expect(result).to.be.equal(-1);
});
});
复制代码执行测试命令
在 package.json 文件中新增如下 test 命令：
{
// ...
"scripts": {
// ...
"test": "node_modules/mocha/bin/_mocha"
},
// ...
}
复制代码执行 npm run test，即可看到测试执行结果：
增加测试覆盖率
执行如下命令，安装 istanbul：
npm install istanbul -D
复制代码在 package.json 中增加如下指令：
{
// ...
"scripts": {
// ...
"test": "node_modules/mocha/bin/_mocha",
"test:cover": "istanbul cover node_modules/mocha/bin/_mocha"
},
// ...
}
复制代码执行 npm run test:cover，即可看到测试覆盖率：
覆盖率说明：
- 语句覆盖率（Statements）：是否每个语句都执行了
- 分支覆盖率（Branchs）：是否每个 if 代码块都执行了
- 函数覆盖率（Functions）：是否每个函数都调用了
- 行覆盖率（Lines）：是否每一行都执行了
持续集成(CI)
通过持续集成，我们可以进行一些自动化构建的任务以及快速发现错误。
常见的 github CI 有 Travis CI、Circle CI、Jenkins 等，这里我们以 Travis CI 为例。
登录 Travis 账号
github 登录 Travis CI，选择下图选项，确保对应 git 项目开启了 Travis CI:
创建 .travis.yml
在项目根目录添加 .travis.yml 文件，添加对应的构建内容，例如:
language: node_js
sudo: false
cache:
apt: true
directories:
- node_modules # 对 node_modules 文件夹开启缓存以便更快安装依赖
node_js: stable # 设置相应版本
install:
- npm install -D # 安装依赖
script:
- npm run test:cover
复制代码项目提交代码后，可以在 Travis CI 看到项目 CI 的情况：
规范 commit & 自动生成 changelog
良好的 commit 能够帮助我们更好维护代码以及提高 code review 的效率。
commit 准则
大多数团队都会通过在 commit 最前面加上一个 tag 的方式来快速区分 commit 类型：
- feat: 新功能特性
- fix: 修复问题
- refactor: 代码重构，没有新增功能或者修复问题
- docs: 仅修改了文档
- style: 代码格式修改，如增加空格，修改单双引号等
- test: 测试用例修改
- chore: 改变构建流程、增加依赖库或者工具等
- revert: 回滚上一个版本
- ci：ci 流程修改
- perf: 体验、性能优化
使用 git-cz 规范 commit
执行以下命令，安装 commitizen 和 cz-conventional-changelog:
npm install commitizen cz-conventional-changelog -D
复制代码修改 package.json 文件，新增以下内容：
{
// ...
"scripts": {
// ...
"commit": "git-cz"
},
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
},
// ...
}
复制代码执行 npm run commit 命令，即可自动进行规范化提交：
自动生成 changelog
执行如下命令安装 conventional-changelog-cli：
npm install conventional-changelog-cli -D
复制代码在 package.json 中新增如下内容：
{
// ...
"scripts": {
// ...
"genlog": "conventional-changelog -p angular -i CHANGELOG.md -s"
}
// ...
}
复制代码执行 npm run genlog 命令，会自动在 CHANGELOG.md 文件中增加 commit 的信息：