學習內容來源：React + React Hook + TS 最佳實踐-慕課網

相對原教程，我在學習開始時（2023.03）采用的是當前最新版本：

具體配置、操作和內容會有差異，“坑”也會有所不同。。。

一、項目起航：項目初始化與配置

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 是一個“有態(tài)度”的代碼格式化工具

• 創(chuàng)建配置文件：.prettierrc.json（windows 的 powershell 輸入內容需要加引號）

echo {}> .prettierrc.json

• 創(chuàng)建格式化黑名單文件：.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）自動執(zhí)行，需要安裝依賴：husky & lint-staged

npx mrm@2 lint-staged

執(zhí)行這行命令會同時安裝 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 規(guī)則

• Prettier 和 ESLint 沖突解決方案 eslint-config-prettier eslint-plugin-prettier - 彭成剛 - 博客園

步驟完成后嘗試將正常代碼格式破壞（比如隨機刪去tsx文件的幾個換行），進行一次代碼提交，提交信息隨意嘗試，查看提交后代碼是否被格式化還原之前正常格式

tips：嘗試后記得撤回提交哦！

3.提交規(guī)范 —— commitlint

接下來規(guī)范 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 執(zhí)行失敗

經過這一步后，代碼提交如果不規(guī)范就會提交失敗啦，結果日志如下：

> 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)

具體提交規(guī)范可參考文章：

【筆記】項目優(yōu)化代碼提交規(guī)范 —— commitlint+husky

或者 commitlint 官網文檔和 github：

• commitlint - Lint commit messages
• conventional-changelog/commitlint: ?? Lint commit messagesdetails/129241273)

4.Mock —— json-server

一般開發(fā)過程中，前后端是并行的，這就意味著前端開發(fā)時是沒有接口調用的，這時就涉及到了 Mock 的問題，不同方案對比可參考：

【筆記】不同 Mock 方案的對比及選擇

這里選用 json-server

• 安裝 json-server

npm i -g json-server

• 創(chuàng)建數據源文件

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實戰(zhàn)

一切就緒，可以開發(fā)啦！文章來源地址http://www.zghlxwxcb.cn/news/detail-499493.html

到了這里，關于【實戰(zhàn)】 項目起航：項目初始化與配置 —— React17+React Hook+TS4 最佳實踐，仿 Jira 企業(yè)級項目（一）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！