作者：天圣_sxyengene
原文链接：https://juejin.cn/post/7015378212368695304

背景

在一次兢兢业业的搬砖作业中，碰到一个了常见的问题：项目CI流程中配置的tslint，在我的一溜包含bug的代码git push之后自动触发，可恨的是它竟然遭遇了阻击。被tsLint无情拦截。

困境出现

此时我的困境出现了：

tsLint提示code style出现问题！需要返工
本地vscode与tslint的配置并不相符，项目本地也没有配置合理的.prettierrc，或.eslintrc
返工的时间节点略晚

面临抉择

其实此时我可以有3个选择：

本地修复：把本地vscode的prettier工具暂时关闭，就地修改文件code style，直到检查通过；
配置本地工具：花点时间，把本地prettier工具配置好，配置的和tslint的要求一致；
配置团队工具：配置自动格式化工具，保证该项目每次提交时会自动优化code style

经过考量，打算优化成团队工具，方便略过已有的tslint，并且可以辅助大家规范lint；下面看一下使用到的工具：

工具列表：

husky —— 劫持git hooks工具
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'

至此，一个可被规范的项目已完成；

每个前端组长必须会的项目管理技能

背景