reactjs 与TSReact,eslint错误导入/未解析

0md85ypi  于 2022-12-03  发布在  React
关注(0)|答案(1)|浏览(93)
  • 我有下一期ESLINT:
    无法解析模块“lib-name”导入的路径/未解析
  • 应用程序技术人员使用 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": {}
    }
  ]
}

欢迎任何帮助!!:)

h7appiyu

h7appiyu1#

我在Nx项目中修复了这个问题,方法是将以下代码添加到项目根目录的.eslintrc.json中:

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

相关问题