【实战】一、项目起航：项目初始化与配置 —— React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目（一）_reacthook+ts实战

---

学习内容来源：React + React Hook + TS 最佳实践-慕课网

---

相对原教程，我在学习开始时（2023.03）采用的是当前最新版本：

具体配置、操作和内容会有差异，“坑”也会有所不同。。。

---

一、项目起航：项目初始化与配置

1.项目初始化 —— create-react-app

npx create-react-app jira --template typescript
1

• baseUrl 配置

{
  "compilerOptions": {
    "baseUrl": "./src",
    ...
  }
  ...
}
1
2
3
4
5
6
7

重新配置后，若是项目已启动，则需要重启才能生效

2.格式化 —— Prettier

• 为确保所有项目参与人员统一格式化代码，项目中引入 Prettier 依赖

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

Prettier 中文网 · Prettier 是一个“有态度”的代码格式化工具

• 创建配置文件：.prettierrc.json（windows 的 powershell 输入内容需要加引号）

echo {}> .prettierrc.json
1

• 创建格式化黑名单文件：.prettierignore

# cmd
(echo # Ignore artifacts:& echo build& echo coverage)> .prettierignore
# bash
echo -e "# Ignore artifacts:\nbuild\ncoverage"> .prettierignore
1
2
3
4

prettierignore，powershell请新建文件后直接输入以下内容：

# Ignore artifacts:
build
coverage
1
2
3

• 为了使格式化操作在每次提交代码时（pre-commit）自动执行，需要安装依赖：husky & lint-staged

npx mrm@2 lint-staged
1

执行这行命令会同时安装 husky 和 lint-stage，并自动配置 package.json: "prepare": "husky install" 生成 .husky/pre-commit 和 .husky/_/husky.sh 文件，免除了手动配置

• Pre-commit Hook · Prettier 中文网

• 为避免 prettier 与项目原有 eslint 的冲突，还需要安装依赖：eslint-config-prettier

npm install --save-dev eslint-config-prettier
1

• 在 package.json 的 eslint 配置尾部添加 "prettier" (若有 eslintrc 单独配置文件，同)：

  ...
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier"
    ]
  },
  ...
1
2
3
4
5
6
7
8
9

prettier 会覆盖掉冲突的原有 eslint 规则

• Prettier 和 ESLint 冲突解决方案 eslint-config-prettier eslint-plugin-prettier - 彭成刚 - 博客园

步骤完成后尝试将正常代码格式破坏（比如随机删去tsx文件的几个换行），进行一次代码提交，提交信息随意尝试，查看提交后代码是否被格式化还原之前正常格式

tips：尝试后记得撤回提交哦！

3.提交规范 —— commitlint

接下来规范 commit message:

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

生成 commitlint.config.js，并配置内容:

# cmd
echo module.exports = { extends: ['@commitlint/config-conventional'] }; > commitlint.config.js
# bash
echo "module.exports = { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js
1
2
3
4

• 激活 husky

npx husky install
1

• 在 husky 中添加 hook —— commit-msg

# bash
npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'
1
2

windows 的 cmd 或 powershell 中会报错，具体可参考：

• 【已解决】npx husky add 执行失败

经过这一步后，代码提交如果不规范就会提交失败啦，结果日志如下：

> git -c user.useConfigOnly=true commit --quiet --allow-empty-message --file -
[34m→[39m No staged files match any configured task.
⧗   input: 我掐指一算，这次提交会报错
✖   subject may not be empty [subject-empty]
✖   type may not be empty [type-empty]

✖   found 2 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

husky - commit-msg hook exited with code 1 (error)
1
2
3
4
5
6
7
8
9
10

具体提交规范可参考文章：

【笔记】项目优化代码提交规范 —— commitlint+husky

或者 commitlint 官网文档和 github：

• commitlint - Lint commit messages
• conventional-changelog/commitlint:
  声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小桥流水78/article/detail/940494