与 TS 反应，eslint 错误导入/未解决

Question

• 我有下一个 ESLINT 问题：

  无法解析模块“lib-name”导入/未解决的路径

• 应用技术是 React with Typescript

• 在运行 eslint 时出现了以上错误

• 尝试了很多不同的解决方案，仍然有同样的问题

这是.eslintrc.js文件

const sharedRules = {
  // import
  'import/prefer-default-export': 'off',
  'import/no-extraneous-dependencies': 'off', // This is useful for lodash imports like "import get from lodash/get"
  'import/extensions': [
    'error',
    'ignorePackages',
    {
      js: 'never',
      jsx: 'never',
      ts: 'never',
      tsx: 'never',
    },
  ],
  // js
  'curly': 2,
  'no-use-before-define': 'off', // must disable base rule to use proper typescript-eslint rule
  'camelcase': 'off', // This is unavoidable in data coming from the BE
  'max-classes-per-file': 'off',
  'no-octal': 'off',
  'no-shadow': 'off',
  'no-underscore-dangle': 'off',
  // react
  'react-hooks/exhaustive-deps': 'warn',
  'react/jsx-filename-extension': 'off',
  'react/jsx-one-expression-per-line': 'off',
  'react/jsx-props-no-spreading': 'off',
  'react/prop-types': 'off',
  'react/no-unused-prop-types': 'off',
  'react/require-default-props': 'off',
  'react/react-in-jsx-scope': 'off', // https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
  // a11y
  'jsx-a11y/anchor-is-valid': 'off',
  'jsx-a11y/label-has-associated-control': 'off', // Just a hassle, you can nest inputs inside labels and it works fine. Check checkbox component for example.
  'jsx-a11y/control-has-associated-label': 'off',
  'jsx-a11y/no-noninteractive-tabindex': 'off',
  'jsx-a11y/click-events-have-key-events': 'off',
  'jsx-a11y/no-static-element-interactions': 'off',
  'import/no-unresolved': [2, { caseSensitive: false }],
};

const typeScriptRules = {
  '@typescript-eslint/no-explicit-any': 'warn',
  '@typescript-eslint/ban-ts-comment': 'warn',
  '@typescript-eslint/explicit-function-return-type': 'off',
  '@typescript-eslint/no-use-before-define': ['error'],
  '@typescript-eslint/no-non-null-assertion': 'off',
  ...sharedRules,
};

module.exports = {
  env: {
    browser: true,
    es6: true,
    jest: true,
  },
  extends: ['airbnb', 'airbnb/hooks', 'prettier'],
  globals: {
    createMockHttpRequest: true,
    createStore: true,
    mockAjaxRequest: true,
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 11,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint', 'eslint-plugin-prettier'],
  rules: { ...sharedRules },
  overrides: [
    {
      extends: [
        'airbnb',
        'airbnb/hooks',
        'plugin:@typescript-eslint/eslint-recommended',
        'plugin:@typescript-eslint/recommended',
        'prettier',
        'prettier/@typescript-eslint',
        'prettier/react',
      ],
      files: ['**/*.ts', '**/*.tsx'],
      rules: { ...typeScriptRules },
      settings: {
        'import/resolver': {
          node: {
            extensions: ['.js', '.jsx', '.ts', '.tsx'],
          },
        },
      },
    },
  ],
};

-- 我在 repo 中还有下一个文件eslintrc.json文件

{
  "root": true,
  "plugins": ["@nrwl/nx", "react", "react-hooks"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "rules": {
        "@nrwl/nx/enforce-module-boundaries": [
          "error",
          {
            "enforceBuildableLibDependency": true,
            "allow": [],
            "depConstraints": [
              {
                "sourceTag": "*",
                "onlyDependOnLibsWithTags": ["*"]
              }
            ]
          }
        ]
      },
    },
    {
      "files": ["*.ts", "*.tsx"],
      "extends": ["plugin:@nrwl/nx/typescript"],
      "rules": {}
    },
    {
      "files": ["*.js", "*.jsx"],
      "extends": ["plugin:@nrwl/nx/javascript"],
      "rules": {}
    }
  ]
}

欢迎任何帮助！ :)

Answer 1

我通过将其添加到项目根目录的 .eslintrc.json 来修复我的 Nx 项目中的这个问题：

"settings": {
  "import/parsers": {
    "@typescript-eslint/parser": [".ts", ".tsx"]
  },
  "import/resolver": {
    "typescript": {
      "project": ["tsconfig.base.json"]
    },
    "node": {
      "project": ["tsconfig.base.json"]
    }
  }
}