所在团队招聘信息
背景
在一次兢兢业业的搬砖作业中，碰到一个了常见的问题：
项目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'
复制代码至此，一个可被规范的项目已完成；