React项目中ESLint与WebStorm的import/no-unresolved问题求助

问题场景 #

React项目中出现import/no-unresolved报错/警告，涉及以下导入代码：

import { ArrowForwardIosRounded as ArrowForwardIcon } from "@mui/icons-material";
import axios from "axios";
import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { Pathname } from "../../../routes";
import { handlers } from "../../../untils/handlers";
import Button from "./../Button";
import Input from ".//src/components/Input";
import Header from "../Header";
import SideBar from "../SideBar";
import WrapperForm from "../WrapperForm";
import FormHeader from "./FormHeader";

期望导入风格 #

使用WebStorm开发，希望组件导入采用基于src模块的路径，避免../../这类相对路径，示例如下：

import { TRANSACTION_STATUSES_PROPERTIES } from "folder/folder/utils/handlers";
// or
... from "str/folder/folder/utils/handlers";
// or
... from "/str/folder/folder/utils/handlers";

当前配置文件 #

jsconfig.json #

{
  "compilerOptions": {
    "target": "es6",
    "baseUrl": "src",
    "paths": {
      "*": ["*"],
      "src/**": ["src/**"]
    },
    "experimentalDecorators": true
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules",
    ".idea",
    ".git"
  ]
}

.eslintrc #

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es6: true,
    jest: true,
    node: true
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:react-hooks/recommended",
    "plugin:jest/recommended",
    "plugin:testing-library/react",
    "plugin:import/recommended",
    "react-app"
  ],
  parser: "@babel/eslint-parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: "latest",
    sourceType: "module"
  },
  plugins: ["react", "react-hooks", "import", "jsx-a11y"],
  root: true,
  rules: {
    "comma-dangle": ["warn", "never"],
    "eol-last": "error"
  },
  settings: {
    react: {
      version: "detect"
    }
  }
};

package.json #

{
  "name": "portfolio-ui",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "node": "v20.1.0",
    "npm": "9.6.4"
  },
  "scripts": {
    "start": "react-scripts --openssl-legacy-provider start",
    "run": "npm run start",
    "dev": "next dev",
    "build": "next build",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/react": "^11.11.0",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.13.0",
    "axios": "^1.4.0",
    "classnames": "^2.3.2",
    "crypto-js": "^4.1.1",
    "jquery": "^3.7.0",
    "moment": "^2.29.4",
    "next": "13.4.2",
    "prop-types": "^15.8.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.11.1",
    "react-scripts": "^5.0.1",
    "redux": "^4.2.1",
    "redux-thunk": "^2.4.2",
    "tailwindcss": "3.3.2",
    "validator": "^13.9.0",
    "web-vitals": "^3.3.1"
  },
  "resolutions": {
    "eslint": "^8.40.0"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.21.8",
    "@babel/eslint-parser": "^7.21.8",
    "@babel/preset-env": "^7.21.5",
    "@webpack-cli/generators": "^3.0.4",
    "autoprefixer": "^10.4.14",
    "babel-loader": "^9.1.2",
    "css-loader": "^6.7.3",
    "eslint": "^8.40.0",
    "eslint-config-auto": "^0.7.3",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-import-resolver-node": "^0.3.7",
    "eslint-import-resolver-typescript": "^3.5.5",
    "eslint-import-resolver-webpack": "^0.13.2",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-testing-library": "^5.11.0",
    "html-webpack-plugin": "^5.5.1",
    "mini-css-extract-plugin": "^2.7.5",
    "postcss": "^8.4.23",
    "postcss-loader": "^7.3.0",
    "prettier": "^2.8.8",
    "sass": "^1.62.1",
    "sass-loader": "^13.2.2",
    "style-loader": "^3.3.2",
    "typescript": "^4.9.4",
    "webpack-cli": "^5.1.1",
    "workbox-webpack-plugin": "^6.5.4"
  }
}

已尝试操作及剩余问题 #

曾在.eslintrc中关闭import/no-unresolved规则，但WebStorm使用Alt+Enter自动导入组件时，仍然生成../../这类相对路径，无法实现基于src路径的导入需求。

内容的提问来源于stack exchange，提问作者p1e0