将eslint与typescript一起使用-无法解析模块的路径

Question

我的文件app.spec.ts中有此导入：

import app from './app';

导致此Typescript错误的原因

2:17  error  Unable to resolve path to module './app'  import/no-unresolved

./app.ts确实存在，但是我还没有将.ts文件编译成.js文件。一旦将.ts文件编译为.js，错误就会消失。

但是，由于eslint应该使用typescript，因此应该使用.ts而不是.js解析模块。

我还在eslint配置文件中添加了打字稿信息：

"parser": "@typescript-eslint/parser",
"parserOptions": {
    "project": "./tsconfig.json"
}

如何配置eslint，使其尝试使用.ts而不是.js解析模块？

干杯!

编辑＃1

内容app.ts：

import bodyParser from 'body-parser';
import express from 'express';
import graphqlHTTP from 'express-graphql';
import { buildSchema } from 'graphql';

const app = express();

const schema = buildSchema(`
    type Query {
        hello: String
    }
`);
const root = { hello: () => 'Hello world!' };

app.use(bodyParser());
app.use('/graphql', graphqlHTTP({
    schema,
    rootValue: root,
    graphiql: true,
}));

export default app;

Answer 1

您可以通过将以下代码段添加到.eslintrc.json配置文件中来设置ESLint模块导入分辨率：

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

有关解析器的更多信息：https : //github.com/benmosher/eslint-plugin-import#resolvers

希望能帮助到你。

Answer 2

这对我有用：

.eslintrc.js

{
    ...
    settings: {
        ...
        'import/resolver': {
            node: {
                extensions: ['.js', '.jsx', '.ts', '.tsx'],
                moduleDirectory: ['node_modules', 'src/'],
            },
        },
    }
}

Answer 3

就我而言，我只需要改变

import { SetOptional, SetRequired } from 'type-fest';

到

import type { SetOptional, SetRequired } from 'type-fest';

Answer 4

这是唯一对我有用的解决方案。

首先，你需要安装这个包：

yarn add -D eslint-import-resolver-typescript

然后将其添加到您的.eslintrc文件中，以便它可以将别名设置从您的文件加载tsconfig.json到 ESLint：

{
  "settings": {
    "import/resolver": {
      "typescript": {}
    },
  },
}

Answer 5

使用"eslint": "6.8.0"和"typescript": " 3.8.3" 时，除了将以下内容添加到.eslintrc：

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

您还需要将此行添加到tsconfig.jsonunder compilerOptions：

"compilerOptions": {
  ...
  // Base directory to resolve non-relative module names.
  "baseUrl": "src",
  ...
}

Answer 6

我有同样的问题，我只能使用解决此问题

"plugin:import/errors",
"plugin:import/warnings",
"plugin:import/typescript",

在.eslintrc.js中的“扩展”下，如此处所述eslint-plugin-import

Answer 7

如果您已按照其他答案中的建议更新了您的.eslintrc和tsconfig.json文件，但问题仍然存在……请重新启动 vscode。

我在这个问题上被困了两个小时，一直以来只要简单的重启就可以让编辑器找到该模块。

希望这可以节省别人的时间！

Answer 8

首先添加"plugin:import/typescript"如下扩展：

"extends": [
    "airbnb-base",
    "plugin:import/typescript"
 ],

然后根据规则如下

"rules": {
        "import/extensions": [
            "error",
            "ignorePackages",
            {
                "ts": "never"
            }
        ]
    }

Answer 9

当导入localeAngular 文件时（例如import localeEn from '@angular/common/locales/en';），我必须允许.mjs扩展名。

这是我的摘录.eslintrc.json：

  ...
  "extends": [
    ...
    "plugin:import/recommended",
    "plugin:import/typescript",
    ...
  ],
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".ts", ".mjs"]
      }
    }
  },
  "rules": {
    ...
  }
  ...

编辑：

当导入HttpClient或 时HttpClientModule，错误又回来了。我发现将扩展添加.d.ts到列表中解决了这个问题，这也比.mjs（不再需要）更有意义。

这是我的新内容.eslintrc.json：

  ...

  {
    "files": ["*.ts"],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "project": ["tsconfig.json"],
      "createDefaultProgram": true
    },
    "settings": {
      "import/resolver": {
        "node": {
          "extensions": [".ts", ".d.ts"]
        }
      }
    },
    "extends": [
      "eslint:recommended",
      "plugin:import/recommended",
      "plugin:import/typescript",
      "plugin:@typescript-eslint/recommended",
      "plugin:@angular-eslint/recommended",
      "plugin:@angular-eslint/ng-cli-compat",
      "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
      "plugin:@angular-eslint/template/process-inline-templates"
    ],
    "rules": {
      ...
    }
  }

  ...

（我正在使用@angular-eslint，但你可能有不同的extends列表）

Answer 10

无论TS和eslint是我狂吠，所以我不得不将以下内容添加到我的.eslintrc文件：

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

Answer 11

就我而言，ESLint 无法解析从DefinitelyTyped（@type/包）安装的类型，因此我必须指定在哪里找到它们，.eslintrc如下所示：

"import/resolver": {
    "typescript": {},
    "node": {
        "extensions": [".js", ".ts"],
        "paths": ["node_modules/", "node_modules/@types"]
    }
},

我还添加了"typescript": {}，这基本上是为了使用配置tsconfig.json，并且我已经eslint-import-resolver-typescript安装了它才能工作。

Answer 12

对于那些使用babel-module只添加extensions所以它会是这样的：

      "babel-module": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"],
        "alias": {
          "app": "./app"
        }
      }