eslint / typescript：无法解析模块路径

Question

我的.eslintrc.json是：

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "node": true,
        "jest": true
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "prettier",
        "import"
    ],
    "extends": [
        "airbnb",
        "airbnb/hooks",
        "plugin:@typescript-eslint/recommended",
        "plugin:react/recommended",
        "plugin:import/errors",
        "plugin:import/warnings",
        "plugin:import/typescript",
        "prettier"
    ],
    "root": true,
    "rules": {
        "no-const-assign": 1,
        "no-extra-semi": 0,
        "semi": 0,
        "no-fallthrough": 0,
        "no-empty": 0,
        "no-mixed-spaces-and-tabs": 0,
        "no-redeclare": 0,
        "no-this-before-super": 1,
        "no-unreachable": 1,
        "no-use-before-define": 0,
        "constructor-super": 1,
        "curly": 0,
        "eqeqeq": 0,
        "func-names": 0,
        "valid-typeof": 1,
        "import/extensions": 0,
        "react/jsx-filename-extension": 0,
        // note you must disable the base rule as it can report incorrect errors
        "no-shadow": 0,
        "@typescript-eslint/no-shadow": [
            1
        ],
        "no-unused-vars": 0,
        "@typescript-eslint/no-unused-vars": 1,
        "no-undef": 0,
        "jsx-a11y/click-events-have-key-events": 0,
        "jsx-a11y/no-static-element-interactions": 0,
        "@typescript-eslint/explicit-module-boundary-types": 0,
        "react/button-has-type": 0,
        "react/require-default-props": 0,
        "react/prop-types": 0,
        "react-hooks/exhaustive-deps": 0,
        "react/jsx-props-no-spreading": 0
    },
    "settings": {
        "import/resolver": {
            "node": {
                "extensions": [
                    ".js",
                    ".jsx",
                    ".ts",
                    ".tsx"
                ]
            }
        }
    }
}

在文件 src/components/elements/ProtectedRoutes/InviteRoute.tsx 中，我有：

import routeNames from 'constants/routeNames';
import useRoles from 'hooks/roles';
import { ROLE } from 'shared/src/types/enums';

应用程序运行很好，但是当我运行 lint 时，出现错误：

  2:24  error  Unable to resolve path to module 'constants/routeNames'    import/no-unresolved
  3:22  error  Unable to resolve path to module 'hooks/roles'             import/no-unresolved
  5:22  error  Unable to resolve path to module 'shared/src/types/enums'  import/no-unresolved

我做错了什么？

Answer 1

您似乎定义了自定义 paths in your TypeScript config (usually tsconfig.json). The import plugin doesn't know about the correct location of the TypeScript config and hence cannot resolve those paths. What you need to do, is to specify the correct path to your TypeScript config via the project parameter in the resolver options:

{
    ...
    "settings": {
        "import/resolver": {
            "project": "./my-path-to/tsconfig.json",
            ...
        }
    }
}

或者，如果您的 tsconfig.json 位于存储库的根目录中，请设置："project": {}，请参阅此 GitHub 问题：https://github.com/import-js/eslint-plugin-import/issues/1485

Answer 2

如果您想导入不带扩展名的 ts / tsx 文件，您应该将此配置传递给 eslint。模块目录在这里很重要，可以解析 ./src 中的路径。如果在 src 中找不到模块，它将在 node_modules

中搜索

"settings": {
  "import/resolver": {
    "node": {
      "extensions": [".ts", ".tsx"],
      "moduleDirectory": ["src", "node_modules"]
    }
  }
}

Answer 3

如果你在 VSCode 的 monorepo 中遇到这个错误，可能是因为 ESLint 正在错误的文件夹中寻找 tsconfig 文件，你应该添加一个 .vscode/settings.json 有一些配置。

例如，如果您有一个位于 workspaces/server 的项目：

{
  "eslint.workingDirectories": [
    { "directory": "workspaces/server", "changeProcessCWD": true },
  ]
}

告诉 eslint 所有不同的 sub-project 文件夹

eslint / typescript：无法解析模块路径

eslint / typescript: Unable to resolve path to module

javascript

lint

typescript

eslint