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

创建项目

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 人点赞