【Techo Day 腾讯技术开放日】jira React 实战

2022-10-31 12:31:56 浏览数 (2)

创建项目

1. 使用脚手架初始化项目
代码语言：javascript复制
npx create-react-app jira --template typescript

脚手架初始化项目遇到的问题

说明： 这里使用脚手架安装项目的时候遇到了一个问题，大致可能说的是 node 版本不匹配，也就是我的版本低了，截图如下。

后来在网上找到了解决问题的办法：解决办法链接

代码语言：javascript复制
// 解决命令
yarn config set ignore-engines true
2.运行项目
代码语言：javascript复制
cd jira
npm start
3. tsconfig 文件添加规则

打开 tsconfig.json 文件夹，在编译选项中配置 baseUrl 选项，指向当前路径下 src 目录。

代码语言：javascript复制
{
"compilerOptions": {
        "baseUrl": "./src"
    }
}
4. 配置格式化代码风格 - prettier
  • 安装依赖
代码语言：javascript复制
yarn add --dev --exact prettier
  • 创建配置文件
代码语言：javascript复制
echo {}> .prettierrc.json
  • 创建 .prettierignore 文件

即在该文件中声明不需要格式化的文件

代码语言：javascript复制
// .prettierignore
build
coverage
  • 手动格式化命令
代码语言：javascript复制
yarn prettier --write
  • 自动格式化代码

在我们的项目每次提交前，我们可以借助 Pre-commit Hook 工具完成自动格式化。

  • 运行命令
代码语言：javascript复制
npx mrm lint-staged

我们可以打开 package.json 看到，该命令添加了以下内容

代码语言：javascript复制
"lint-staged": {
    "*.{js,css,md}": "prettier --write"
}

由于我们是一个 ts 项目，我们在项目中添加扩展名中添加 ts, tsx。

代码语言：javascript复制
"lint-staged": {
    "*.{js,css,md,ts,tsx}": "prettier --write"
}
5. 配置 eslint
  • 安装
代码语言：javascript复制
yarn add eslint-config-prettier
  • 修改 eslint config
代码语言：javascript复制
// 修改前
"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
代码语言：javascript复制
// 修改后
"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier"
    ]
  },

即用 prettier 的规则替换之前的一部分规则。

6. 配置提交规范 commitlint 工具
  • 安装
代码语言：javascript复制
yarn add @commitlint/{config-conventional,cli} -D
7. 使用 mock 工具 模拟后端接口

这里我们综合考虑后，选择 json-server.

  • 安装依赖
代码语言：javascript复制
yarn add -D json-server
  • 创建 db 目录

目录名称为 __json_server_mock__

目录中包含 db.json 文件。

  • scripts 脚本中添加启动 json-server 脚本
代码语言：javascript复制
"scripts": {
    "json-server": "json-server __json_server_mock__/db.json --watch"
  },

项目启动

json eslint

0 人点赞