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

我在我的文件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配置文件中添加了typescript信息:

"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;
289546 次浏览
小开
最佳答案

你可以通过在你的.eslintrc.json配置文件中添加这个代码片段来设置ESLint模块的导入分辨率:

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

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

小开

对于那些使用babel-module的人，只需添加extensions，因此它将是这样的:

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

我也遇到了同样的问题，我只能通过将typescript插件添加到.eslintrc中来修复它，使用__ABC0中的extends选项

  extends: [
"plugin:import/errors",
"plugin:import/warnings",
"plugin:import/javascript",
"plugin:import/typescript"
],
小开

这对我来说很有用:

.eslintrc.js

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

以防万一，如果有人需要支持子目录以及。例如，它支持

  1. Src /components/input => components/input

  2. src/api/external/request => external/request

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

This is working example for eslint ^6.1.0

小开

ts和eslint都在对我吼叫，所以我必须在我的.eslintrc文件中添加以下内容:

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

当使用:“eslint 6.8.0”和:“打印稿3.8.3”时，除了向.eslintrc添加以下内容外:

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

你还需要将这一行添加到compilerOptions下的tsconfig.json:

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

我必须将typescript导入添加到extends中，然后在规则中关闭导入:

"extends": {
"plugin:import/typescript"
},
"rules": {
"import/extensions": "off"
}
小开

在我的例子中，ESLint无法解析从DefinitelyTyped (@type/包)安装的类型，所以我必须像这样指定在.eslintrc中找到它们的位置:

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

我还添加了"typescript": {}，它基本上是用于使用来自tsconfig.json的配置，并且我已经安装了eslint-import-resolver-typescript以使其工作。

小开

这是唯一对我有效的解决办法。

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

yarn add -D eslint-import-resolver-typescript

然后将它添加到你的.eslintrc文件中，这样它就可以从你的tsconfig.json中将别名设置加载到ESLint中:

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

如果你已经更新了你的.eslintrc和tsconfig.json文件，在其他答案中建议，你仍然有问题- 重启vscode。

小开

首先在extends下面添加"plugin:import/typescript"，如下所示:

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

下面是规则

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

对我来说，这只是简单地安装eslint-import-resolver-node:

yarn add -D eslint-import-resolver-node
# or
npm install eslint-import-resolver-node --save-dev
小开

在为Angular导入locale文件时(例如import localeFr 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列表)

小开

我与ts monorepo的情况是，我在IDE中没有得到lint错误，所有的别名都得到了解决，但只要我在其中一个项目上运行eslint，我就会得到

error  Unable to resolve path to module

显示每个包的tsconfig文件的eslint路径很重要。

综上所述，对于TS，别名和monorepo患者:

  • 安装eslint-import-resolver-typescript
  • 添加到eslintrc.js设置(这将帮助ide和eslint计算别名和其他东西):
    'import/resolver': {
node: {
paths: 'packages/*/src',
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
typescript: {
alwaysTryTypes: true,
project:[
path.resolve(__dirname, '.tsconfig.json'), // root tsconfig
path.resolve(__dirname, './packages/projA/tsconfig.json'),
path.resolve(__dirname, './packages/projB/tsconfig.json'),
/* ...rest of projects path to its tsconfig */
],
},
  • add to eslintrc.js extends:
{
...,
'plugin:import/recommended',
'plugin:import/typescript',
}
  • 添加到eslintrc.js插件:
  plugins: ['@typescript-eslint', ..., 'import'],
  • 添加到eslintrc.js parserOptions(与settings相同)，这将帮助eslint:
        project: [
path.resolve(__dirname, '.tsconfig.json'), // root tsconfig
path.resolve(__dirname, './packages/projA/tsconfig.json'),
path.resolve(__dirname, './packages/projB/tsconfig.json'),
/* ...rest of projects path to its tsconfig */
],
小开

就我而言，我只是需要改变

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

来

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

优秀的人知道如何在2022年通过在线程序解决这个问题:

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

在我的例子中，我必须删除eslint缓存，然后它就像魔法一样工作了。(我们的纱线脚本是

"lint:eslint": "eslint . --cache --cache-location '../../eslintcache/' --format stylish"

)。


提交答案