React中的代码规范：配置prettier、eslint、和commitlint

1、prettier

• 安装

  npm install --save-dev --save-exact prettier
  

  或者

  yarn add --dev --exact prettier
  

• 创建配置文件

  echo {}> .prettierrc.json
  

• 创建.prettierignore（不用格式化），写入

  # Ignore artifacts:
  build
  coverage
  

• Pre-commit Hook: 代码提交时自动格式化

• • 安装lint-staged

    npx mrm@2 lint-staged
    

  • 在package.json中添加配置

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

2、eslint

• 安装eslint-config-prettier

  yarn add eslint-config-prettier
  

• 在package.json中添加配置

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

3、commit-lint 提交规范

• 安装

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

• 配置

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

• 提交规范

  类型	描述
  build	编译相关的修改，例如发布版本、对项目构建或者依赖的改动
  chore	其他修改, 比如改变构建流程、或者增加依赖库、工具等
  ci	持续集成修改
  docs	文档修改
  feat	新特性、新功能
  fix	修改bug
  perf	优化相关，比如提升性能、体验
  refactor	代码重构
  revert	回滚到上一个版本
  style	代码格式修改, 注意不是 css 修改
  test	测试用例修改

  例子

  git commit -m 'fix(account): 修复xxx的bug'
  git commit -m 'refactor: 重构整个项目'
  

\