react+ts项目搭建

create-react-app地址
https://create-react-app.bootcss.com/docs/getting-started

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

安装完后配置别名路径
安装craco

 npm i -D @craco/craco@alpha   脚手架> 5.0
 npm i -D @craco/craco  脚手架 < 5.0

配置路径别名craco.config.js

const path = require("path");
const resolve = (dir) => path.resolve(__dirname, dir);
module.exports = {
  webpack: {
    alias: {
      "@": resolve("src"),
    },
  },
};

ts.config也需要配置不然报错

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

配置编辑器设置
.editorconfig

root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
max_line_length = off
trim_trailing_whitespace = false

配置prettier
npm install prettier -D

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}

配置eslint
npx install eslint 选项看自己选
配置eslint和prettier兼容
npm install eslint-plugin-prettier eslint-config-prettier -D
如下eslint.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:prettier/recommended'
  ],
  overrides: [
    {
      env: {
        node: true
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script'
      }
    }
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: ['@typescript-eslint', 'react'],
  rules: {
    '@typescript-eslint/no-var-requires': 'off'
  }
}

划分项目目录结构
关联gitee仓库
配置gitngore文件