所在团队招聘信息
背景
在一次兢兢业业的搬砖作业中,碰到一个了常见的问题:
项目CI流程中配置的tslint,在我的一溜包含bug的代码git push之后自动触发,可恨的是它竟然遭遇了阻击。被tsLint无情拦截。
困境出现
此时我的困境出现了:
- tsLint提示code style出现问题!需要返工
- 本地vscode与tslint的配置并不相符,项目本地也没有配置合理的.prettierrc,或.eslintrc
- 返工的时间节点略晚
面临抉择
其实此时我可以有3个选择:
- 本地修复:把本地vscode的prettier工具暂时关闭,就地修改文件code style,直到检查通过;
- 配置本地工具:花点时间,把本地prettier工具配置好,配置的和tslint的要求一致;
- 配置团队工具:配置自动格式化工具,保证该项目每次提交时会自动优化code style
经过考量,打算优化成团队工具,方便略过已有的tslint,并且可以辅助大家规范lint;
我认为此方案的优势有如下几点
- 在git commit时就可发现code style潜在问题,不需要在push后返工
- 自动格式化
- 配置可共享
团队角度思考
- 保证下线:可保障团队code style下线,保证代码风格最低程度的统一。(利用eslint提供的丰富代码风格管控方案,也可直接利用现有风格库)
- 本地化:配置项目化,npm install可自带解决项目管理的方案
- msg更实用:对齐提交标准,每次commit时,语义化更好。让更多有意义的message存在项目中
下面看一下使用到的工具:
工具列表:
- husky
- lint-staged
- eslint
- commitlint
先在项目中添加一个a.js;用于之后的测试;
let a=1;
let b=2;
复制代码
husky使用
这边使用4.2.5版本的husky。
npm i husky@4.2.5 -D
复制代码
在pacakge.json中配置信息
{
"name": "projectName",
"description": "",
"husky": {
"hooks": {
"pre-commit": "echo 111",
}
}
}
复制代码
此时尝试 git commit -am 'husy test'时,可以看到命令控制台有 输出111;
表示husky注册git hooks成功!
lint-staged
工具安装,该工具可以对正则选定的文件进行处理。
比如,在提交的所有文件中,我对css和js有不同的lint操作,可以用*.js或者*.css进行区分
yarn add lint-staged -D
复制代码
在package.json文件中添加配置
{
"lint-staged": {
"*.js": "echo 222"
}
}
复制代码
尝试新增文件a.js,执行git commit -am 'lint-staged'操作,
pre commit钩子的输出&对js的操作已成功;
eslint
这一步就很简单了。
yarn add eslint -D
复制代码
再做一下eslint的初始化
eslint --init
复制代码
此时修改我们的package.json
{
"name": "autolint-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"lint": "eslint --fix"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"eslint": "^7.32.0",
"husky": "4.2.5",
"lint-staged": "^11.2.0"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": "npm run lint"
}
}
复制代码
运行commit 提交命令;可以看到a.js文件中对应地方会被eslint所提示;
装个airbnb的code style
安装:
npx install-peerdeps --dev eslint-config-airbnb-base
复制代码
.eslintrc.js配置:
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: "airbnb-base",
parserOptions: {
ecmaVersion: 12,
sourceType: "module",
},
rules: {},
};
复制代码
至此,提交时,已可以进行自动eslint 格式化~
加个提交规范工具
安装:
yarn add @commitlint/config-conventional @commitlint/cli -D
复制代码
本地配置文件 commitlint.config.js
module.exports = { extends: ['@commitlint/config-conventional'] };
复制代码
安装完后后提交,发现此时提交被拒;
因为提交时需要符合响应规范;
规范地址:www.npmjs.com/package/@co…
执行
git commit -am 'feat: new commit for new commit lint'
复制代码
至此,一个可被规范的项目已完成;