React+ts配置别名

1.craco

npm i @craco/craco

 在根目录创建craco.config.js,内容如下

const path = require('path');
module.exports = {
  webpack: {
    alias: {
      '@': path.join(__dirname, 'src'),
      '@pages': path.join(__dirname, 'src/pages'),
    },
  },
};

在package.json将script修改成如下

 "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }

2.在tsconfig.json添加

"compilerOptions": {
    // 别名配置
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "@pages/*": ["src/pages/*"]
    },
   。。。。。。
}

 扩展：

在eslint规则里面引入排序import/order

1.下载相关

npm i eslint-plugin-import eslint-import-resolver-typescript 

2.在eslint.json配置

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    。。。。。。
    "plugin:import/recommended" // 添加
  ],
 
  "rules": {
     。。。。。。
    "import/order": [ // 添加引入的排序
      "error",
      {
        "groups": ["builtin", "external", "internal"],
        "pathGroups": [
          {
            "pattern": "react",
            "group": "external",
            "position": "before"
          }
        ],
        "pathGroupsExcludedImportTypes": ["react"],
        "newlines-between": "always",
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        }
      }
    ]
  },
  "settings": {  //添加
    "import/resolver": {
      "node": {
        "extensions": [".ts", ".tsx"],
        "moduleDirectory": [
          "node_modules",
          "src/"
        ]
      },
      "typescript": {
        "alwaysTryTypes": true
      }
    },
    "react": {
      "version": "detect"
    }
  }
}