前端自动化工具&&前端代码规范

项目要使用git进行代码提交时，使用叫pre-commit的git钩子，在调用git commit 命令时自动执行某些脚本检测代码，若检测出错，则阻止commit代码，也就无法push，保证了出错代码只在我们本地，不会把问题提交到远程仓库

【1】 安装husky

husky：husky提供了一套git hook，我们可以在commit前进行我们的代码检查

npm install -D husky --save

【2】在package.json中设置我们需要的git hooks

{
  "husky": {
    "hooks": {
      "pre-commit": "npm run test && npm run format && npm run list", // 在commit之前先执行npm run test 等命令去校对
      "commit-msg": "commitlint -E $HUSKY_GIT_PARAMS" // 校验提交git commit时添加的备注信息是否符合我们要求的规范
    }
  }
}

【3】安装list-staged（可以参考下边第二个资料）

  "lint-staged": {
    "*.{json,md}": [
      "prettier --write",
      "git add"
    ],
    "*.{css,less,scss}": [
      "prettier --write",
      "stylelint --fix",
      "git add"
    ],
    "*.{ts,tsx}": [
      "prettier --write",
      "git add"
    ],
    "*.{jsx,js}": [
      "prettier --write",
      "eslint --fix",
      "git add"
    ]
  }

测试配置是否生效

先触发eslint的规则 在进行代码提交 看是否生效

上面代码提交失败说明配置成功生效，每次执行git commit命令，都会自动调用package.json中的precommit命令，在本项目中precommit命令就会执行eslint的代码校验，若校验失败，则无法将代码commit，避免不规范代码提交到远程仓库

最后一些规范提交可以配置package.json 查看

"scripts": {
    "dev": "rollup --config ./rollup.config.js -w",
    "start": "npm run dev & (cd page && game dev)",
    "build": "NODE_ENV=production rollup --config rollup.config.js",
    "postbuild": "esc js ./page/ && esc html ./page/ && ./scripts/pack.sh",
    "prepack": "npm run build",
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint": "eslint --config .eslintrc.js --fix src --ext .ts,js",
    "commit": "git-cz"
  },

feat：新功能（feature）
fix：修补bug
hotfix：紧急修复bug
test：增加测试
docs：文档（documentation）
style： 格式（不影响代码运行的变动）
refactor：重构（即不是新增功能，也不是修改bug的代码变动）
chore：构建过程或辅助工具的变动

参考其他博主文档：
https://blog.csdn.net/qq_38128179/article/details/85621825
https://zhuanlan.zhihu.com/p/366786798
https://www.cnblogs.com/jiaoshou/p/12250278.html