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

---

学习内容来源：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 的妙用，可参考：

• 【笔记】json-server实战

一切就绪，可以开发啦！