react项目搭建

初始化

请自行安装环境

  npx create-react-app syd-react --template typescript
  

贴一下依赖

# package.json
{
  "name": "syd-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

配置路径绝对路径

修改tsconfig.json，添加baseUrl

说明 我没有采用配置@符号的形式，那种需要重写webpack的配置，后面有需要再说吧。 baseUrl根据路径的关系，可以配置为. 或./src。看实际情况，那个能正常启动就用那个。

效果

添加依赖

prettier

在提交代码的时候会帮你格式化代码

yarn add --dev --exact  prettier

在根目录添加.prettierrc.json 和 .prettierignore文件

安装依赖 npx mrm lint-staged

解决和eslint的冲突

添加依赖 yarn add eslint-config-prettier 修改package.json中eslint的配置，使用prettier替换eslint的一些规则

mock (json-server)

yarn add json-server -g

在项目里配置

"json-server": "json-server __json_server_mock__/db.json --watch"