我在我的文件app.spec.ts中有这个导入:

import app from './app';

是什么导致了这个Typescript错误

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

/应用程序。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;

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

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

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


对于那些使用babel-module的人来说,只要添加扩展,它就会像这样:

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

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

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

这对我来说很有用:

.eslintrc.js

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

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

src/components/输入=> components/输入 src/火灾/外部请求=>外接/请求 设置:= 进口- resolver: { “节点”:{ “路”:[“src”,“src/ fire”], “分机”:(“js”)jsx”、“。ts”、“tsx。”] 的 的 的

这是eslint ^6.1.0的工作示例


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

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

当使用"eslint": "6.8.0"和"typescript": "3.8.3"时,除了在.eslintrc中添加以下内容:

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

您还需要将这一行添加到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/ packages)安装的类型,所以我必须像这样在.eslintrc中指定在哪里找到它们:

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

我还添加了"typescript":{},这基本上是为了使用tsconfig中的配置。我已经安装了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导入语言环境文件时(例如从'@angular/common/locale /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 */
        ],
      },

添加到eslintrc.js扩展:

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

to

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

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

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

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

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

.)