十分钟搭建React项目模板[TOC] 项目是一个基于 create-react-app 搭建的 react 项目模板，

项目是一个基于 create-react-app 搭建的 react 项目模板，集成了 TypeScript、ESLint、Prettier、Husky、lint-staged 等等

运行环境： VSCode、Node16+、 VSCode 插件：Prettier - Code formatter

安装

1.全局安装create-react-app

npm install create-react-app -g

2.创建项目

create-react-app my-app
// 也可以创建ts模板项目
npx create-react-app my-app --template typescript

3.运行项目

cd my-app
npm run start

重写配置

项目创建好后，查看项目目录你会发现没有webpack.config.js相关的配置文件，那是怎么修改配置的呢？

需要通过npm run eject弹出配置文件，但是这个过程是不可逆的。推荐使用react-app-rewired,它的作用是用来帮助你重写react脚手架配置的。需要搭配customize-cra使用。

npm i react-app-rewired customize-cra --save
npm i less less-loader --save-dev

在根目录下创建文件config-override.js文件

const {
  override,
  // ...
  addLessLoader,
  // ...
} = require('customize-cra')

module.exports = override(
  // ...
  // less
  // addLessLoader(),
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      relativeUrls: false,
      modifyVars: { '@primary-color': '#A80000' },
    } 
  })
  // ...
)

修改package.json文件

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
}

开发环境跨域问题

npm install http-proxy-middleware --save-dev

在src中创建文件 setupProxy.js

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    proxy('/api', {
      target: 'http://localhost:3001/',
      changeOrigin: true,
      // pathRewrite: {
      //   '^/api': ''
      // }
    })
  )
}

添加UI组件库：antd4

安装

npm install antd --save
// 安装按需加载组件代码和样式的插件,同时less-loader的版本要6.0以上
npm i babel-plugin-import -D

'antd/dist/antd.css'引入样式的，改为 'antd/dist/antd.less'
config-override.js配置改为

const { override, addLessLoader, fixBabelImports, adjustStyleLoaders} = require('customize-cra')
module.exports = override(
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: {
        "@primary-color": "red", //主题定制
      }
    }
  }),
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'true', // less或者sass导入
    }),

    adjustStyleLoaders(({ use: [, , postcss] }) => {
      const postcssOptions = postcss.options;
      postcss.options = { postcssOptions };
    })  
)

集成Eslint

Eslint 不仅可以检查代码语法的错误，还可以检查格式的错误。用create-react-app创建的项目本身内置了Eslint校验，如果我们想更改校验规则的话，就请按下面的操作来：在根目录下新增 .eslintrc.json文件

{
    "extends": [
        "react-app" // 默认的校验规则
    ],
    "rules": {
        "quotes": ["error", "single"] // 此处新增你想要的校验规则
    },
    // 只针对Typescript文件的校验规则
    "overrides": [
      {
        "files": ["**/*.ts?(x)"],
        "rules": {
          "additional-typescript-only-rule": "warn" // 此处新增你想要的校验规则
        }
      }
    ]
}

重写运行项目，你会发现你新增的校验规则生效了。当代码中使用双引号而不是单引号的时候，启动项目时报错提示eslint错误了。

如果想要书写代码保存时就进行Eslint校验，参考下面的操作：

vscode安装插件 Eslint
vscode settings->open settings 中配置保存自动用eslint修复

    //配置eslint
    "eslint.autoFixOnSave": true, //  启用保存时自动修复,默认只支持.js文件
    "eslint.validate": [
      "javascript", //  用eslint的规则检测js文件
      {
        "language": "vue", // 检测vue文件
        "autoFix":true //  为vue文件开启保存自动修复的功能
      },
      {
        "language": "html",
        "autoFix": true
      },
    ],
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },

保存后重启VScode, 你会发现一保存就会自动修复代码。

集成Prettier

1.安装

npm install prettier --save-dev

2、创建 .prettierrc (配置你想要的格式化规则)

{
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid"
}

3、package.json中增加prettier

  "scripts": {
    "prettier": "prettier --write \"./**/*.{tsx,ts,js,jsx}\""
  },

4、运行npm run prettier 你会发现src目录下的代码都按照Prettier配置的规则更改了。如果你想要ctrl+s 就会自动按照Prettier校验，请在vscode settings->open settings中配置

      "editor.formatOnSave": true,
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },

保存成功后重启vscode 就能生效了。

处理 ESLint 与 Prettier 冲突

在开发中，我们会经常遇到 prettier 与 ESLint 的配置存在冲突。此时我们可以通过 eslint-config-prettier 和 eslint-plugin-prettier 来避免这个问题。 eslint-config-prettier 时 ESLint 的配置，会关闭可能与 Prettier 冲突的 ESLint 规则。它允许你在项目中同时使用 ESLint 和 Prettier，而不会出现规则冲突的问题。 eslint-plugin-prettier 是一个 ESLint 插件，它将 Prettier 的格式化功能集成到 ESLint 中。通过使用 eslint-plugin-prettier，你可以在 ESLint 中运行 Prettier 的格式化规则，并在代码检查过程中自动修复格式错误。

# 安装 eslint-config-prettier
npm i --save-dev eslint-config-prettier
npm i --save-dev eslint-plugin-prettier

Eslint配置文件

{
    "extends": [
        "react-app",
        "plugin:prettier/recommended" // 告诉 ESLint 关闭与 Prettier 格式化规则冲突的任何规则，需写在最后，会覆盖前面的配置
    ],
    "plugins": ["prettier"],// 将 Prettier 的格式化功能集成到 ESLint 中。会应用Prettier的配置
    "rules": {
    }
}

注意：上面的方法只能处理 extends 中的配置冲突。rules 中的冲突无法处理。我们一般会在 perttier 中统一我们的代码风格。在 eslint 中保证我们的代码质量。

集成husky 和 lint-staged

husky 和 lint-staged 是两个常用的工具，它们的作用是帮助开发团队在代码提交前进行代码质量检查和格式化，以确保代码的一致性和可维护性。具体来说,husky的作用是通过 Git 钩子，在 Git 操作的不同阶段运行自定义脚本。它可以在代码提交前运行脚本，例如运行代码风格检查工具（如Eslint或Perttier）或运行单元测试。这样，每次提交代码时，husky会自动运行这些脚本，并在有问题的情况下阻止提交，从而确保提交的代码符合团队的规范和标准。

lint-staged 会根据配置的规则，只对即将提交的文件进行检查，而不是对整个代码库进行检查，从而提高检查的效率。如果有问题的文件被检测到，lint-staged 可以阻止提交，确保只有符合规范的代码被提交到代码库中。

npm installl husky lint-staged --save-dev
# 生成 .husky文件夹
npx husky install
# 生成我们需要的git hook
npx husky add ./husky/pre-commit "npx lint-staged"

我们可以看到生成的 git hook： .husky/pre-commit

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

pnpm lint-staged

在 package.json 中配置 lint-staged

"lint-staged": {
    "src/**/*.{ts,js,jsx,tsx,vue}": [
      "eslint --fix",
      "prettier --write"
    ]
  }

完成上面的操作后，git commit 提交代码的时候会自动校验代码，代码中有语法错误或者是格式错误会自动修复，没办法修复的会报错。