如何规范团队代码，小程序ESLint+Prettier+lintstaged+commit+changelog+standardversion自动规范实践

简介以及优势

ESLint

ESLint中文官网

ESLint 是在 ECMAScript/Javascript 代码中识别和报告模式匹配的工具&＃xff0c;它的目标是保证代码的一致性和避免错误。
相较于Prettier更为自由&＃xff0c;并且更为严苛&＃xff0c;也可以发现JS当中的错误。

Prettier

Prettier官网

Prettier能够解析代码&＃xff0c;使用你自己设定的规则来重新打印出格式规范的代码。正因为Prettier Opinionated 的特性&＃xff0c;所以我们不需要配置过多的规则&＃xff0c;并且它能够支持更多编辑器的插件以及对于html、css等文件的格式化。

husky &＃43; lint-staged

husky Github仓库

lint-staged Github仓库

husky让Git钩子变得容易&＃xff0c;把 git 钩子的功能加到了 package 的 script 里面&＃xff0c;使我们有能力直接调用其他命令而不用把钩子脚本写在项目的 .git/hook 里面, 方便团队间 git 钩子命令的共享.

lint-staged 检查所有被 git add 加入的文件&＃xff0c;对这些文件执行你需要的命令。

由于每次在提交代码之前&＃xff0c;对整个项目进行eslint处理耗时长且容易对老项目产生致命的bug。为了解决这个问题&＃xff0c;我们引入 husky &＃43; lint-staged 可以只对我们本次commit修改的代码进行eslint处理&＃xff0c;让linting更有意义。这样&＃xff0c;您可以确保没有错误进入存储库并强制执行代码样式。

commitizen

commitizen Github仓库

Commitizen 是一个撰写合格 Commit message 的工具&＃xff0c;当您使用 Commitizen 进行提交时&＃xff0c;系统将提示您在提交时填写所有必填的提交字段。

commitlint

commitlint GitHub仓库

commitlint检查您的提交消息是否符合常规的提交格式。

conventional-changelog

conventional-changelog GitHub仓库

如果你的所有 Commit 都符合 Angular 格式&＃xff0c;那么发布新版本时&＃xff0c; Change log 就可以用脚本自动生成。

生成的文档包括以下三个部分。

New features

Bug fixes

Breaking changes.

每个部分都会罗列相关的 commit &＃xff0c;并且有指向这些 commit 的链接。当然&＃xff0c;生成的文档允许手动修改&＃xff0c;所以发布前&＃xff0c;你还可以添加其他内容。

standard-version

standard-version GitHub仓库

利用standard-version进行版本控制&＃xff0c;可以省去git tag手动打标签以及手动生成changelog的过程。

ESLint引入

安装

NPM

npm install eslint --save-dev


配置使用规则

在root文件夹下创建文件 .eslintrc.js 和 .editorconfig

module.exports &＃61; {env: {browser: true,es2021: true,node: true,},extends: [&＃39;eslint:recommended&＃39;],parserOptions: {ecmaVersion: 12,sourceType: &＃39;module&＃39;,},globals: {// 小程序的全局变量__DEV__: true,__WECHAT__: true,__ALIPAY__: true,__wxConfig: true,App: true,Page: true,Component: true,Behavior: true,wx: true,getApp: true,getCurrentPages: true,},rules: {// 这是我的配置&＃xff0c;大家可以参考官方团队的配置&＃39;linebreak-style&＃39;: [&＃39;error&＃39;, &＃39;unix&＃39;], //换行样式quotes: [&＃39;error&＃39;, &＃39;single&＃39;, { avoidEscape: true }], //单引号semi: [&＃39;error&＃39;, &＃39;always&＃39;], //分号&＃39;no-mixed-spaces-and-tabs&＃39;: [2, false], //禁止混用tab和空格&＃39;object-curly-spacing&＃39;: [0, &＃39;never&＃39;], //大括号内是否允许不必要的空格&＃39;no-multiple-empty-lines&＃39;: [2, { max: 2, },], // 不允许多个空行&＃39;brace-style&＃39;: [2, &＃39;1tbs&＃39;, { allowSingleLine: true, },], // if while function 后面的{必须与if在同一行&＃xff0c;java风格。&＃39;no-redeclare&＃39;: 2, //禁止重复声明变量&＃39;no-trailing-spaces&＃39;: 1, //一行结束后面不要有空格&＃39;no-unused-vars&＃39;: [2, { vars: &＃39;all&＃39;, args: &＃39;none&＃39; }], //不能有声明后未被使用的变量或参数&＃39;default-case&＃39;: 2, //switch语句最后必须有default&＃39;prefer-const&＃39;: 2, //未被赋值的常量 使用const&＃39;template-curly-spacing&＃39;: 1, //强制使用大括号内的间距 Bad: {people.name} 正确{ people.name }&＃39;array-bracket-spacing&＃39;: [2, &＃39;never&＃39;], //是否允许非空数组里面有多余的空格 Bad:[ &＃39;foo&＃39;, &＃39;bar&＃39; ] Good:[&＃39;foo&＃39;, &＃39;bar&＃39;];&＃39;brace-style&＃39;: [2, &＃39;1tbs&＃39;, { allowSingleLine: true, },], //大括号风格&＃39;key-spacing&＃39;: [2, { beforeColon: false, afterColon: true, },], //冒号前后的空格},
};

.editorconfig

root &＃61; true[*]
charset &＃61; utf-8
indent_style &＃61; space
indent_size &＃61; 2
end_of_line &＃61; lf
insert_final_newline &＃61; true
trim_trailing_whitespace &＃61; true

使用方法

终端中输入以下代码即可修复代码文件

// 全局安装eslint
eslint --fix index.js // fix后接文件名
// 没有全局安装eslint
npx eslint --fix index.js // fix后接文件名


在package.json中配置以下代码

"scripts": {"lint": "npx eslint --fix **/*.js",},


这样就可以在终端中输入以下代码就可以实现整个项目的eslint格式化

npm run lint


Prettier引入

安装

NPM

npm install prettier --save-dev


配置使用规则

在root文件夹下创建文件 .prettierrc.js&＃xff0c; 由于prettier是Opinionated code formatter&＃xff0c;所以配置项相对较少。

module.exports &＃61; {// 使用 4 个空格缩进tabWidth: 2,// 不使用缩进符&＃xff0c;而使用空格useTabs: false,semi: true,singleQuote: true,overrides: [// 使用css/html的规则格式化wxss/wxml{files: &＃39;*.wxss&＃39;,options: {parser: &＃39;css&＃39;,},},{files: &＃39;*.wxml&＃39;,options: {parser: &＃39;html&＃39;,},},],
};


使用方法

终端中输入以下代码即可修复代码文件

// 全局安装prettier
prettier --fix index.js // fix后接文件名
// 没有全局安装prettier
npx prettier --write index.js // fix后接文件名


在package.json中配置以下代码

"scripts": {"prettier": "npx prettier--write **/*.js",},


这样就可以在终端中输入以下代码就可以实现整个项目的eslint格式化

npm run prettier


ESLint 和 Prettier 结合使用

由于两者都会进行代码的格式化&＃xff0c;我们并不希望代码的重复格式化以及发生不必要的冲突&＃xff0c;所以我们要安装中间件来保证两者和谐运行

安装

npm install --save-dev eslint-config-prettier
npm install --save-dev eslint-plugin-prettier


配置使用方法

修改 .eslintrc.js 中的部分配置项

module.exports &＃61; {extends: [&＃39;eslint:recommended&＃39;, &＃39;plugin:prettier/recommended&＃39;],plugins: [&＃39;prettier&＃39;],
}


husky &＃43; lint-staged引入

安装

NPM

npm install husky --save-dev
npm install lint-staged --save-dev


配置使用规则

在package.json中配置

{"husky": {"hooks": {"pre-commit": "lint-staged"}},"lint-staged": {"miniprogram/**/*.js": ["npx eslint --fix","prettier --write","git add"]},
}


Commitizen

安装

npm install commitizen --save-dev
// 使用npx初始化常规更新日志适配器
npx commitizen init cz-conventional-changelog --save-dev --save-exact


配置使用规则

在package.json中配置

{"scripts": {"commit": "cz"}
}


使用方法

在git add提交代码后&＃xff0c;可以使用npm run commit 或者 npx cz 来提示填写commit信息

git add .
npm run commit
// npx cz


踩坑

虽然GitHub仓库中提到commitizen可以结合husky使用&＃xff0c;从而达到在git commit的钩子中执行commitizen&＃xff0c;但是至少Windows环境下使用这一方法会导致commitizen每次输入都会重复呈现提示信息&＃xff0c;给人不友好的交互&＃xff0c;因此并不建议在Windows环境下结合husky使用。

这个问题在其GitHub仓库的issue中有提及&＃xff0c;不过暂时没有解决办法。issue网址

Commitlint

安装

npm install --save-dev &＃64; commitlint / config-conventional &＃64; commitlint / cli


配置使用规则

在package.json中配置

{"husky": {"hooks": {"pre-commit": "lint-staged", // 这个是之前配置的内容"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"}},
}


新建 commitlint.config.js

module.exports &＃61; {extends: [&＃39;&＃64;commitlint/config-conventional&＃39;],rules: {&＃39;body-leading-blank&＃39;: [1, &＃39;always&＃39;],&＃39;footer-leading-blank&＃39;: [1, &＃39;always&＃39;],&＃39;header-max-length&＃39;: [2, &＃39;always&＃39;, 72],&＃39;scope-case&＃39;: [2, &＃39;always&＃39;, &＃39;lower-case&＃39;],&＃39;subject-case&＃39;: [2,&＃39;never&＃39;,[&＃39;sentence-case&＃39;, &＃39;start-case&＃39;, &＃39;pascal-case&＃39;, &＃39;upper-case&＃39;],],&＃39;subject-empty&＃39;: [2, &＃39;never&＃39;],&＃39;subject-full-stop&＃39;: [2, &＃39;never&＃39;, &＃39;.&＃39;],&＃39;type-case&＃39;: [2, &＃39;always&＃39;, &＃39;lower-case&＃39;],&＃39;type-empty&＃39;: [2, &＃39;never&＃39;],&＃39;type-enum&＃39;: [2,&＃39;always&＃39;,[&＃39;build&＃39;,&＃39;chore&＃39;,&＃39;ci&＃39;,&＃39;docs&＃39;,&＃39;feat&＃39;,&＃39;fix&＃39;,&＃39;improvement&＃39;,&＃39;perf&＃39;,&＃39;refactor&＃39;,&＃39;revert&＃39;,&＃39;style&＃39;,&＃39;test&＃39;,],],},
};

使用方法

在你git commit 提交代码的时候会自动检查你的commit信息是否符合规范

踩坑

虽然GitHub仓库中的初始步骤中使用的方法是借助以下代码生成commitlint.config.js文件&＃xff0c;但是在Windows环境下生成的文件解码方式是UTF-16&＃xff0c;所以在自动运行时会报错。因此建议自己手动创建一个commitlint.config.js&＃xff0c;输入以上代码进行配置。

conventional-changelog

安装

npm install --save-dev conventional-changelog-cli


配置使用规则

在package.json中配置

{"scripts": {"version": "npx conventional-changelog -p angular -i CHANGELOG.md -s"}
}


使用方法

npm run version
// 或者不进行配置&＃xff0c;直接使用以下代码
npx conventional-changelog -p angular -i CHANGELOG.md -s
// 假如希望生成至今所有的改动
npx conventional-changelog -p angular -i CHANGELOG.md -s -r 0


standard-version

安装

npm install --save-dev standard-version


配置使用规则

在package.json中配置

{"scripts": {"release": "npx standard-version"}
}


使用方法

npm run release
## 或者不进行配置&＃xff0c;直接使用以下代码
npx standard-version
## 使用以上两种方式&＃xff0c;默认是生成下一个大版本&＃xff0c;假如希望手动规定版本号
npm run release -- -r 1.1.0


Git操作规范汇总

1. 提交代码

git add .
npm run commit
git pull origin master
git push origin master


2. 版本更新

提交所有上线前代码后

npm run release -- -r 1.0.0 ## 输入本次版本号
git push --follow-tags origin master