react脚手架创建项目

一、项目搭建

1、构建命令行

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

生成目录结构：

2、项目基础配置

（1）craco配置webpack

为什么使用craco

使用create-react-app 创建的项目默认是无法修改其内部的webpack配置的, 只能使用eject 命令将配置完全暴露出来，但这是一个不可逆的操作，复杂的webpack等配置将由框架本身转交给用户自己进行维护。但实际需求中我们还是需要更新webpack、babel的配置，此时我们就能借助craco来覆盖webpack的配置。

配置步骤

• 安装craco依赖

npm install --save @craco/craco
npm install --save craco-less 

• 在项目根目录下创建配置文件craco.config.js

const CracoLessPlagin = require('craco-less')
const path = require('path')
const resolve = (dir) => path.resolve(__dirname, dir)

module.exports = {
   
  plugins: [{
    plugin: CracoLessPlagin }],
  // 修改 webpack 配置
  webpack: {
   
    alias: {
   
      '@': resolve('src'),
    }

  },
  // 修改 babel 配置
  babel: {
   
    // ...
  },
  // 修改 eslint 配置
  eslint: {
   
    // ...
  },
  devServer: {
   
    proxy: {
   

    }
  }
};

• 修改 package.json 中的 scripts

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

（2）配置@快捷路径导入

在tsconfig.json文件中加：

"baseUrl": "./",
"paths": {
   
    "@/*": ["src/*"]
}

此时启动项目可能出现报错

“@babel/plugin-proposal-private-property-in-object” package without
declaring it in its dependencies. This is currently working because
“@babel/plugin-proposal-private-property-in-object” is already in your
node_modules folder for unrelated reasons, but it may break at any time.

解决：

npm install --save-dev @babel/plugin-proposal-private-property-in-object

二、项目内容配置

1、配置Eslint和Prettier

（1）配置Eslint

Eslint 是一个在 JavaScript 代码中通过规则模式匹配作代码识别和报告的插件化的检测工具，它的目的是保证代码规范的一致性和及时发现代码问题，提前避免错误发生。使用Eslint可以极大的提高项目中多人协作开发时的效率、代码的可读性以及可维护性。

• 安装Eslint

npm install eslint --save-dev

• 初始化

npx eslint --init

• install相关插件

npm install @typescript-eslint/eslint-plugin eslint-plugin-react @typescript-eslint/parser --save-dev

• 生成.eslintrc.js文件并修改：

module.exports = {
   
  env: {
   
    browser: true,
    es2021: true,
    node: true,
  },
  root: true,
  extends: [
    "eslint:recommended",
    "plugin:prettier/recommended",
    "plugin:@typescript-eslint/recommended",
  ],
  overrides: [],
  parser: "@typescript-eslint/parser",
  parserOptions: {
   
    ecmaVersion: "latest",
    sourceType: "module",
    ecmaFeatures: {
   
      jsx: true,
    },
  },
  plugins: ["react", "@typescript-eslint"],
  rules: {
   
    "no-undef": 2,
    "@typescript-eslint/no-explicit-any": 0,
    "@typescript-eslint/no-non-null-assertion": 0,
    "@typescript-eslint/no-var-requires": 0,
  },
};

此处如果出现插件@typescript-eslint冲突情况，记得检查package.json和.eslintrc.js文件内容是否有引入版本不同导致的冲突情况。

• .eslintrc.js 文件中第一行有报错或警告，需要添加一个 .eslintignore文件，把.eslintrc.js 添加到忽略文件即可：
  .eslintignore文件内容：

.eslintrc.js
build/*.js
coverage
.vscode/*
public/*

• 在vscode中安装eslint插件
  

（2）配置Prettier

Prettie在美化代码方面有很大的优势，并不具有lint检查语法等能力，配合ESLint可以对ESLint格式化基础上做一个很好的补充。

• 安装Prettier

npm install prettier --save-dev

• 配置Prettier规则
  在项目根目录新建.prettierrc.js：

module.exports = {
   
  // 1.一行代码的最大字符数，默认是80(printWidth: <int>)
  printWidth: 120,
  // 2.tab宽度为2空格(tabWidth: <int>)
  tabWidth: 2,
  // 3.是否使用tab来缩进，我们使用空格(useTabs: <bool>)
  useTabs: false,
  // 4.结尾是否添加分号，false的情况下只会在一些导致ASI错误的其工况下在开头加分号，我选择无分号结尾的风格(semi: <bool>)
  semi: true,
  // 5.使用单引号(singleQuote: <bool>)
  singleQuote: true,
  // 6.object对象中key值是否加引号（quoteProps: "<as-needed|consistent|preserve>"）as-needed只有在需求要的情况下加引号，consistent是有一个需要引号就统一加，preserve是保留用户输入的引号
  quoteProps: "as-needed",
  // 7.在jsx文件中的引号需要单独设置（jsxSingleQuote: <bool>）
  jsxSingleQuote: false,
  // 8.尾部逗号设置，es5是尾部逗号兼容es5，none就是没有尾部逗号，all是指所有可能的情况，需要node8和es2017以上的环境。（trailingComma: "<es5|none|all>"）
  trailingComma: "es5",
  // 9.object对象里面的key和value值和括号间的空格(bracketSpacing: <bool>)
  bracketSpacing: true,
  // 10.jsx标签多行属性写法时，尖括号是否另起一行(jsxBracketSameLine: <bool>)
  jsxBracketSameLine: false,
  // 11.箭头函数单个参数的情况是否省略括号，默认always是总是带括号（arrowParens: "<always|avoid>"）
  arrowParens: "