解决ESlint，prettierrc，husky遇到的坑，配置完成后pre commit钩子函数没有触发问题

1.看这边文章之前，先给大家看下我这边这几个包的版本吧

注意看下husky这个版本，husky新版本和旧版本的用法是不一样的，husky（6.0.0）已经做了破坏性的变更，之前的设置方式已经失效了，所以才有可能导致你在commit的时候没有生效。这是导致我出现问题的根本原因，解决办法呢也很简单，在package.json中的script脚本中加入这句
然后运行下

npm run prepare

这个命令，该命令会在src同级目录下创建.husky/目录并指定该目录为git hooks所在的目录。

然后在运行下下面这个命令就会在.husky下面生成一个pre-commit脚本

npx husky add .husky/pre-commit "npm run lint-staged"

 这个脚本就是你在git commit 的时候他就会运行这个脚本执行  npm run lint-staged这个命令，这时候就解决了pre-commit不生效的问题。

下面我就给大家说下我怎样重头开始到配置完成的办法吧。

首先先安装下相应的工具：

npm install -D stylelint prettier eslint husky

// yarn 
yarn add stylelint prettier eslint husky  -D

然后在根目录下创建相应的文件

.stylelintrc.js文件配置
const fabric = require('@umijs/fabric');

module.exports = {
  ...fabric.stylelint,
};
<---------------------------------------->

.eslintrc.js文件配置
module.exports = {
  extends: [require.resolve('@umijs/fabric/dist/eslint')]
};
<---------------------------------------->
.eslintignore配置

.eslintrc.js
node_modules
package.json
<---------------------------------------->
.prettierrc.js文件配置

const fabric = require('@umijs/fabric');

module.exports = {
  ...fabric.prettier,
  singleQuote: true,
  trailingComma: 'es5',
  printWidth: 100,
  overrides: [
    {
      files: '.prettierrc',
      options: { parser: 'json' },
    },
  ],
};

<---------------------------------------->
.prettierignore文件配置

**/*.md
**/*.svg
**/*.ejs
**/*.html
package.json
.umi
.umi-production
.umi-test
node_modules

最后就是package.json文件

  "scripts": {
      ......
     //这里我省略了很多，只看下面的就行
    "lint": "umi g tmp && npm run lint:js && npm run lint:style && npm run lint:prettier",
    "lint:prettier": "prettier --check \"**/*\" --end-of-line auto",
    "lint-staged": "lint-staged",
    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
    "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style",
    "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
    "lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
    "prettier": "prettier -c --write \"**/*\"",
    "prepare": "husky install"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**/*.less": "stylelint --syntax less",
    "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
    "**/*.{js,jsx,tsx,ts,less,md,json}": [
      "prettier --write",
    ]
  },

配置完成之后呢就先运行下上面那两个命令npm run prepare和npx husky add .husky/pre-commit "npm run lint-staged"
然后就可以了。
本文写的有点粗糙，有很多不足之处还望谅解，欢迎留言