【八股】【C++】内存

文章目录

• • 一、项目起航：项目初始化与配置
  • • 1.项目初始化 —— create-react-app
    • 2.格式化 —— Prettier
    • 3.提交规范 —— commitlint
    • 4.Mock —— json-server

相对原教程，我在学习开始时（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

• 创建配置文件：.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

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

npx mrm@2 lint-staged

• 为避免 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"
    ]
  },
  ...

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

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}'

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

> 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 官网文档和 github：

4.Mock —— json-server

一般开发过程中，前后端是并行的，这就意味着前端开发时是没有接口调用的，这时就涉及到了 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"
  },

命令行中输入以下命令启动 json-server：

npm run json-server

接下来可以自行尝试 json-server 的妙用，可参考：

一切就绪，可以开发啦！