学习内容来源：React + React Hook + TS 最佳实践-慕课网
相对原教程，我在学习开始时（2023.03）采用的是当前最新版本：
| 项 | 版本 |
|---|---|
| react & react-dom | ^18.2.0 |
| react-router & react-router-dom | ^6.11.2 |
| antd | ^4.24.8 |
| @commitlint/cli & @commitlint/config-conventional | ^17.4.4 |
| eslint-config-prettier | ^8.6.0 |
| husky | ^8.0.3 |
| lint-staged | ^13.1.2 |
| prettier | 2.8.4 |
| json-server | 0.17.2 |
| craco-less | ^2.0.0 |
| @craco/craco | ^7.1.0 |
| qs | ^6.11.0 |
| dayjs | ^1.11.7 |
| react-helmet | ^6.1.0 |
| @types/react-helmet | ^6.1.6 |
| react-query | ^6.1.0 |
| @welldone-software/why-did-you-render | ^7.0.1 |
| @emotion/react & @emotion/styled | ^11.10.6 |
具体配置、操作和内容会有差异，“坑”也会有所不同。。。
一、项目起航：项目初始化与配置
1.项目初始化 —— create-react-app
npx create-react-app jira --template typescript
- baseUrl 配置
{
"compilerOptions": {
"baseUrl": "./src",
...
}
...
}
重新配置后，若是项目已启动，则需要重启才能生效
2.格式化 —— Prettier
- 为确保所有项目参与人员统一格式化代码，项目中引入 Prettier 依赖
npm install --save-dev --save-exact prettier
Prettier 中文网 · Prettier 是一个“有态度”的代码格式化工具
- 创建配置文件：.prettierrc.json（windows 的 powershell 输入内容需要加引号）
echo {}> .prettierrc.json
- 创建格式化黑名单文件：.prettierignore
# cmd
(echo # Ignore artifacts:& echo build& echo coverage)> .prettierignore
# bash
echo -e "# Ignore artifacts:\nbuild\ncoverage"> .prettierignore
prettierignore，powershell请新建文件后直接输入以下内容：
# Ignore artifacts: build coverage
- 为了使格式化操作在每次提交代码时（pre-commit）自动执行，需要安装依赖：husky & lint-staged
npx mrm@2 lint-staged
执行这行命令会同时安装 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
- 在 package.json 的 eslint 配置尾部添加
"prettier"(若有 eslintrc 单独配置文件，同)：
...
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest",
"prettier"
]
},
...
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
生成 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
- 激活 husky
npx husky install
- 在 husky 中添加 hook —— commit-msg
# bash
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'
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)
具体提交规范可参考文章：
【笔记】项目优化代码提交规范 —— commitlint+husky
或者 commitlint 官网文档和 github：
- commitlint - Lint commit messages
- conventional-changelog/commitlint: 📓 Lint commit messagesdetails/129241273)
4.Mock —— json-server
一般开发过程中，前后端是并行的，这就意味着前端开发时是没有接口调用的，这时就涉及到了 Mock 的问题，不同方案对比可参考：
【笔记】不同 Mock 方案的对比及选择
这里选用 json-server
- 安装 json-server
npm i -g json-server
- 创建数据源文件
mkdir __json_server_mock__
cd ./__json_server_mock__
# bash
touch db.json
# cmd
cd.>db.json
- 在 package.json 中新增 scripts 配置：
"scripts": {
"json-server": "json-server __json_server_mock__/db.json -w -p 3001"
},
项目启动默认在 3000 端口，因此把 json-server 端口改为其他: 3001
命令行中输入以下命令启动 json-server：
npm run json-server
接下来可以自行尝试 json-server 的妙用，可参考：文章来源：https://www.toymoban.com/news/detail-531013.html
- 【笔记】json-server实战
一切就绪，可以开发啦！文章来源地址https://www.toymoban.com/news/detail-531013.html
到了这里，关于【实战】一、项目起航：项目初始化与配置 —— React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目（一）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
