reactjs - tsconfig 中的 eslint + typescript + 路径：ESLint：无法解析模块“@components/some-module”的路径。（import/no-unresolved）

Question

我为路径（别名）添加打字稿配置：

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react",
    "baseUrl": "src",
    "paths": {
      "@components/*": ["components/*"]
    }
  },
  "exclude": [
    "node_modules",
    "public"
  ]
}

之后我尝试导入这样的东西：

import Header from '@components/header';

现在我在 eslint 中遇到错误：ESLint: Unable to resolve path to module '@components/header'.(import/no-unresolved)

Answer 1

我找到了一个解决方案：eslint-import-resolver-typescript

npm i -D eslint-plugin-import @typescript-eslint/parser eslint-import-resolver-typescript

.eslintrc.js

module.exports = {
  'settings': {
    'import/resolver': {
      'typescript': {},
    },
  },
}

Answer 2

我找到了一个解决方案：eslint-import-resolver-alias

npm install -D eslint-import-resolver-alias

.eslintrc

  "settings": {
    "import/resolver": {
      "alias": {
        "map": [
          [
            "@",
            "./src"
          ]
        ],
        "extensions": [
          ".js",
          ".ts",
          ".tsx",
          ".jsx",
          ".json"
        ]
      }
    }
  },