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

Question

I read many resources including Using eslint with Typescript-Unable to resolve path to module . I got same error again and again.

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

eslinter.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' }, 
};

I installed and have double checked all the dev dependecies. This is the part of the 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"
  }

What should I try now?

Answer 1

For me, it was fixed by adding "caseSensitive": false .eslintrc file eg:

"settings": {
  "import/resolver": {
    "node": {
      "extensions": [".js", ".jsx", ".ts", ".tsx"]
    },
    "caseSensitive": false
  }
}

Answer 2

You can set the ESLint module import resolution by adding this snippet to your.eslintrc.json configuration file:

  

    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)$"
                }
          ]
      },