React Hooks 项目初始化与配置

1. Create React App

npx create-react-app xxx --template typescript
![image.png](/img/bVcZUJ1)
需要机上指定的版本号解决：
npx create-react-app@5.0.1 xxx --template typescript

2.配置eslint prettier && commitlint规范工程

1.文件相对路径的问题
    ts.config.json中配置baseUrl 指定前缀
2.代码格式化 prettier ==> 不同编辑器 代码风格统一
    ## https://www.prettier.cn/docs//install.html
    yarn add --dev --exact prettier
    echo {}> .prettierrc.json
    ## 创建 .prettierignore
    ## pre-commit Hook
    npx mrm lint-staged // 每次提交之前 自动prettier
    ## 在package.json中新增ts tsx的自动格式化
        ```
        "lint-staged": {
          "*.{js,css,md,ts,tsx}": "prettier --write"
        }
        ```
    ## eslint 与 prettier的冲突
    yarn add eslint-config-prettier -D
    ## package.json中新增：
        ```
        "eslintConfig": {
            "extends": [
              "react-app",
              "react-app/jest",
              "prettier" // 与eslint产生冲突时，接管eslint的配置
            ]
          },
        ```
    让prettier中的一些功能替换eslint的功能，保证不冲突

3.git提交规范

    ## commit Message 是否符合规范
    yarn add -D @commitlint/config-conventional @commitlint/cli
    ## 配置 github中 参考 or 官网
    ## https://commitlint.js.org/#/

    npx husky add .husky/commit-msg "yarn commitlint --edit $1"