为什么我收到错误无法解析模块路径？ Eslint 与 Typescript

我阅读了很多资源，包括将 eslint 与 Typescript 结合使用 - 无法解析模块的路径。我一次又一次地遇到同样的错误。

yarn lint
  2:24  error    Unable to resolve path to module './components/Column'  import/no-unresolved
  2:24  error    Missing file extension for "./components/Column"        import/extensions
  3:22  error    Unable to resolve path to module './components/Card'    import/no-unresolved
  3:22  error    Missing file extension for "./components/Card"          import/extensions
  4:30  error    Missing file extension "ts" for "./components/styles"   import/extensions
  6:1   warning  Missing return type on function                         @typescript-eslint/explicit-module-boundary-types
  8:5   error    JSX not allowed in files with extension '.tsx'          react/jsx-filename-extension

eslint.js

module.exports = {
  env: {
    browser: true,
    es2020: true,
  },
  extends: [
    'plugin:react/recommended',
    'plugin:import/typescript',
    'airbnb',
    'plugin:@typescript-eslint/recommended',
    'plugin:jest/recommended',
    'prettier',
    'prettier/react',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended'
  ],
  plugins: ['react', '@typescript-eslint', 'jest'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
    project: './tsconfig.json'
  },
  settings: {
    'import/resolver': {
        'node': {
            'paths': ['src'],
            'extensions': ['.js', '.ts', '.d.ts']
        },
    },
  },   
  rules: { 'linebreak-style': 'off',
      'no-use-before-define' : 'off',
      '@typescript-eslint/no-use-before-define': 'warn' }, 
};

我安装并仔细检查了所有开发依赖项。这是package.json的一部分

  "devDependencies": {
    "@types/styled-components": "^5.1.7",
    "@typescript-eslint/eslint-plugin": "^4.15.1",
    "@typescript-eslint/parser": "^4.15.1",
    "eslint": "^7.20.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-airbnb-typescript": "^12.3.1",
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.5",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.2.1"
  }

我现在应该尝试什么？

您可以通过将此代码段添加到 .eslintrc.json 配置文件来设置 ESLint 模块导入解析：

  

    settings: {
        'import/resolver': {
            'node': {
                'paths': ['src'],
                'extensions': ['.js', '.ts', '.d.ts', '.tsx']
            },
        },
      },   
      rules: { 'linebreak-style': 'off',
          'no-use-before-define' : 'off',
          '@typescript-eslint/no-use-before-define': 'warn',
          'react-native/split-platform-components': [
                2,
                {
                    "androidPathRegex": "\\.android.(js|jsx|ts|tsx)$",
                    "iosPathRegex": "\\.ios.(js|jsx|ts|tsx)$"
                }
          ]
      },