react项目应用中使用的小插曲

1. git钩子 -> pre-commit

pre-commit 钩子在键入提交信息前运行。 它用于检查即将提交的快照，例如，检查是否有所遗漏，确保测试运行，以及核查代码。 如果该钩子以非零值退出，Git 将放弃此次提交，不过你可以用 * git commit --no-verify (-n)* 来绕过这个环节。

在package.json中

"scripts": {
 "start": "node scripts/start.js",
 "build": "node scripts/build.js",
 "test": "node scripts/test.js",
 "lint-staged": "lint-staged",
 "precommit": "lint-staged && npm run test",
 "eslint": "eslint src --ext .js,.ts,.jsx,.tsx"
},
"eslintConfig": {
  "extends": [
    "react-app",
    "plugin:prettier/recommended"
  ],
 "plugins": [
   "react",
   "react-hooks"
 ],
 "rules": {
   "@typescript-eslint/consistent-type-assertions": "off",
   "react-hooks/rules-of-hooks": "error",
   "react-hooks/exhaustive-deps": "warn"
  }
},
"pre-commit": [
  "lint-staged"
],
"lint-staged": {
  "src/**/*.{js,ts,tsx}": [
    "prettier --write",
    "tslint --project tsconfig.json",
     "git add ."
 ]
},
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
 },

添加prettierrc.js

// .prettierrc.js


module.exports = {
  printWidth: 80,
  semi: true, // 在每个语句的末尾添加分号
  singleQuote: true, // 使用单引号而不是双引号
  trailingComma: "none", // 多行时尽可能打印尾随逗号
  bracketSpacing: true, // 对象文字中打印括号之间的空格
  jsxBracketSameLine: true, // 将>多行JSX元素放在最后一行的末尾，而不是单独放在下一行
  arrowParens: "avoid", // 在单个箭头函数参数周围加上括号
  requirePragma: false,
  proseWrap: "preserve"
};

添加插件

yarn add @commitlint/cli @commitlint/config-conventional --dev
yarn add hucky --dev
yarn add pre-commit --save-dev // 安装