eslint / typescript :无法解析模块的路径

xbp102n0  于 2022-12-24  发布在  TypeScript
关注(0)|答案(4)|浏览(272)

我的.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

我哪里做错了?

o8x7eapl

o8x7eapl1#

如果要导入不带扩展名的ts / tsx文件,则应将此配置传递给eslint。此处的模块目录对于解析./src内的路径非常重要。如果在src内找不到模块,则会在node_modules内搜索

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

lbsnaicq2#

看起来您已经在TypeScript配置中定义了自定义路径(通常为tsconfig.json)。import插件不知道TypeScript配置的正确位置,因此无法解析这些路径。您需要做的是通过解析器选项中的project参数指定TypeScript配置的正确路径:

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

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

icomxhvb

icomxhvb3#

如果您在VSCode的monorepo中遇到此错误,可能是因为ESLint正在错误的文件夹中查找tsconfig文件,您应该添加带有一些配置的. vscode/settings.json。
例如,如果您有一个位于工作区/服务器的项目:

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

告诉eslint所有不同的子项目文件夹

flvtvl50

flvtvl504#

如果这有帮助的话,我也有类似的问题,但是在一个没有 typescript 的create-react-app项目中,我所要做的是将当前目录添加到moduleDirectory字段中,见下文。
在我的.eslintrc.json中,我添加了以下内容,请注意,我没有在我的项目中使用 typescript 文件:

"settings": {
"import/resolver": {
    "node": {
      "extensions": [".js", ".jsx"],
      "moduleDirectory": [".", "node_modules"]
    }
  }
}

相关问题