React 项目中引入 Husky 6.x 和 Lint-staged

工具概述

• huskyGit hooks 工具，可在git操作的某个阶段触发相应插件处理。
• prettier 可用于格式化代码。
• lint-staged 提交代码前的处理。
• commitlint 提交规范制定。

一、项目初始化

1.1 生成项目

生成一个全新的 ts + react 的模版 可直接使用指令：npx create-react-app demo --typescript，注意在未来的版本中该指令会被替换为 npx create-react-app demo --template typescript，该模版包含了全套正常运行 React 所需的包和配置，无需再额外手动安装 typescript 等，其中还包含了自动化测试文件以及PWA所需文件等，可自行根据需求增删。

1.2 配置eslint、prettier、commitlint规范工程

1.2.1设置绝对路径。

 1.2.2 安装prettier

npm i --save-dev --save-exact prettier

 1.2.3 项目文件夹下新建文件（暂时不用管）

echo {}> .prettierrc.json

新建.prettierignore文件（注意文件名前面有点的）,用来排除哪些不需要格式化，这里填写官网的参考：

# Ignore artifacts:
build
coverage

注：这里创建的项目是有ESLint的，如果你的项目中也有ESLint需要安装eslint-config-prettier防止和ESLint使用时出现冲突。

1.2.4 安装eslint-config-prettier

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

安装完成后在运行依赖中会多出eslint-config-prettier，在pagckage.json中找到eslintConfig加入prettier，注意优先级放入最后面。

  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier"
    ]
  },

1.2.5 安装lint-staged 提交前，自动格式化代码

npx mrm@2 lint-staged

增加格式化范围

"lint-staged": {

  "*.{js,css,md,ts,tsx}": "prettier --write"

}

1.2.6 安装commitlint

npm install --save-dev @commitlint/config-conventional @commitlint/cli

添加配置文件 

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

添加husky hooks钩子,

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

这将在项目目录下的.husky文件夹内建立commit-msg文件，它在你commit代码阶段触发commitlint检查。