使用带有打字稿的 eslint - 无法解析模块的路径答案

【问题标题】：Using eslint with typescript - Unable to resolve path to module使用带有打字稿的 eslint - 无法解析模块的路径
【发布时间】：2019-08-07 11:19:28
【问题描述】：

我的文件 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;

【问题讨论】：

你添加"plugins": ["@typescript-eslint"]了吗？文档github.com/typescript-eslint/typescript-eslint/tree/master/…
嘿@Jasmonate，感谢您的回答！所以我刚刚添加了这个配置，虽然我现在可以做一些特定于 Typescript 的 linting，但它并不能解决我的问题。我仍然收到Unable to resolve path to module './app'
您是否尝试将其添加到您的 .eslintrc 中？ settings: { 'import/resolver': 'webpack' }（我假设代码构建正常。如果不是，您需要告诉 webpack 也解析 .ts/.tsx 文件，这意味着添加类似：```module.exports = { resolve: { extensions: ['.js', '.ts'] } }; ``` 或任何你想导入的文件扩展名！）
以上评论不完整，恐怕！我的编辑时间用完了，我太快按下了 Enter！ module.exports = { resolve: { extensions: ['.js', '.ts'] } }; 位应该在你的 webpack 配置中！
你可以添加你的app.ts文件的内容吗？

标签： typescript eslint

【解决方案1】：

您可以通过将此 sn-p 添加到您的 .eslintrc.json 配置文件中来设置 ESLint 模块导入分辨率：

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

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

【讨论】：

我相信other answer 是解决这个问题的正确方法。
这似乎解决了Unable to resolve path to module 错误，但现在我仍然收到一堆Missing file extension "tsx" for [...]
啊，'import/extensions': 0, 帮助：stackoverflow.com/questions/56064609/…
这是那个时代之一！我遇到了这个问题，使用了这个解决方案，但它没有用。几个小时后又试了一次，然后就可以了。奇怪！

【解决方案2】：

我遇到了同样的问题，我只能通过使用 extends option in .eslintrc 将 typescript 插件添加到 .eslintrc 来解决它

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

【讨论】：

谢谢！添加"plugin:import/typescript" 是为我解决的问题。
这是唯一对我有用的，只需添加这一行并保存。错误马上就消失了！
请注意，您需要 1. 在“airbnb-base”之后放置“plugin:import/typescript”。 2.记得在plugins部分添加"import"。
现在我得到Missing file extension "ts" for <file>
^ 固定为：stackoverflow.com/a/59268871/12658818

【解决方案3】：

这对我有用：

.eslintrc.js

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

【讨论】：

这对我有用；甚至包括“plugin:import/*”扩展也没有做任何事情。指向'src/' 的moduleDirectory 行是我完成这项工作的关键。
这对我也有用。请注意，必须添加“moduleDirectory”键。
添加 moduleDirectory: ['node_modules', 'myModules/'] 确实有帮助。我已经看到这个解决方案的部分版本没有“moduleDirectory”属性，但它不起作用。这个成功了。
添加 moduleDirectory: ['node_modules', 'src/']
这对我有用，在 typescript react 项目中使用 .eslintrc.json 中的相同配置。

【解决方案4】：

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

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

yarn add -D eslint-import-resolver-typescript

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

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

【讨论】：

当使用 monorepo 和不同包的路径别名时，这是唯一对我有用的。
@Semx11，这里也一样！
这是我唯一的解决方案 thx ;)
` "typescript": {} ` 对我有用。
感谢您的解决方案，其他解决方案对我的用例没有帮助

【解决方案5】：

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

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

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

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

【讨论】：

非常感谢添加baseUrl 选项，节省了我的一天
在我的情况下，我必须将 .d.ts 添加到列表中 - 包 csstypes 仅包含一个 index.d.ts: "settings": { "import/resolver": { "node" : { "paths": [ "src" ], "extensions": [ ".js", ".jsx", ".d.ts", ".ts", ".tsx" ] } } }
这也可以解决 eslint 配置在多个项目之间共享，因此位于顶级文件夹中的情况。在paths 属性中列出所有项目的路径可以解决 eslint 错误。

【解决方案6】：

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

【讨论】：

这对我有用！！谢谢你:)

【解决方案7】：

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

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

【讨论】：

确实如此。我的“babel-module”只有 {}

【解决方案8】：

ts 和 eslint 都对我大吼大叫，所以我不得不将以下内容添加到我的 .eslintrc 文件中：

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

【讨论】：

我需要“设置”和“规则”，如本答案中所述。谢谢！
狂吠！！脱帽??

【解决方案9】：

首先在扩展下添加"plugin:import/typescript"，如下所示：

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

然后在规则之下

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

【讨论】：

【解决方案10】：

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

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

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

【讨论】：

【解决方案11】：

我不得不将打字稿导入添加到扩展中，然后在规则中关闭导入：

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

【讨论】：

这并不能解决问题，只是关闭了规则

【解决方案12】：

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

src/components/input => 组件/输入

src/api/external/request => 外部/请求

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

这是 eslint ^6.1.0

的工作示例

【讨论】：

【解决方案13】：

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

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

【讨论】：

【解决方案14】：

在为 Angular 导入语言环境文件（例如 import localeFr from '@angular/common/locales/fr';）时，我必须允许 .mjs 扩展名。

这是我.eslintrc.json的摘录：

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

【讨论】：

【解决方案15】：

我使用 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（与设置相同）这将有助于 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 */
        ],

【讨论】：