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

原创

yaoyaoah

发布于 2022-10-31 12:31:56

4310

发布于 2022-10-31 12:31:56

文章被收录于专栏：yaoya

创建项目

1. 使用脚手架初始化项目

npx create-react-app jira --template typescript

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

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

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

// 解决命令
yarn config set ignore-engines true

2.运行项目

cd jira
npm start

3. tsconfig 文件添加规则

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

{
"compilerOptions": {
        "baseUrl": "./src"
    }
}

4. 配置格式化代码风格 - prettier

安装依赖

yarn add --dev --exact prettier

创建配置文件

echo {}> .prettierrc.json

创建 .prettierignore 文件

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

// .prettierignore
build
coverage

手动格式化命令

yarn prettier --write

自动格式化代码

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

运行命令

npx mrm lint-staged

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

"lint-staged": {
    "*.{js,css,md}": "prettier --write"
}

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

"lint-staged": {
    "*.{js,css,md,ts,tsx}": "prettier --write"
}

5. 配置 `eslint`

安装

yarn add eslint-config-prettier

修改 eslint config

// 修改前
"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },

// 修改后
"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier"
    ]
  },

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

6. 配置提交规范 `commitlint 工具`

安装

yarn add @commitlint/{config-conventional,cli} -D

7. 使用 `mock 工具` 模拟后端接口

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

安装依赖

yarn add -D json-server

目录名称为 __json_server_mock__

目录中包含 db.json 文件。

scripts 脚本中添加启动 json-server 脚本

"scripts": {
    "json-server": "json-server __json_server_mock__/db.json --watch"
  },

项目启动

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

json

eslint

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

json

eslint

登录后参与评论

0 条评论

热度