Typescript eslint - 缺少文件扩展名 "ts" import/extensions

Question

我有一个使用Typescript制作的简单Node/Express应用程序。但是eslint给了我错误提示。

Missing file extension "ts" for "./lib/env" import/extensions

这是我的.eslintrc文件

    {
  "extends": [
    "airbnb",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "prettier/react",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier", "import"],
  "settings": {
    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "typescript": {
        "directory": "./tsconfig.json"
      },
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "rules": {
    "@typescript-eslint/indent": [2, 2],
    "no-console": "off",
    "import/no-unresolved": [2, { "commonjs": true, "amd": true }],
    "import/named": 2,
    "import/namespace": 2,
    "import/default": 2,
    "import/export": 2
  }
}

我已经安装了 eslint-plugin-import 和 eslint-import-resolver-typescript。但我无法弄清为什么会出现这个错误。

- Nolat

---

好的，以下是内容翻译：标题：无法解析模块路径“@”前缀我正在使用 Webpack 和 Babel 进行项目开发。在我的项目中，我希望能够使用“@”符号作为根目录的别名（alias）。然而，在使用 ESLint 进行代码检查时，我遇到了一个问题：ESLint 无法正确地解析这种路径。我已经确定我的 Webpack 配置和 Babel 配置都没有问题，因为我的应用程序可以正常启动并运行。请问是否有人遇到过类似的问题，并且知道如何解决？ - youwhut

自我备忘录：我之前解决过这个问题。这是关于“Airbnb”的问题，可以使用一行代码解决："import/extensions": [ "error", "ignorePackages", { "": "never" } ]。 - VimNing

Answer 1

将以下代码添加到rules中：

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

airbnb 的 ESLint 配置文件 存在问题。

- superoryco

---

行了！谢谢。 （其他读者：确保将其放在“规则”下，而不是“设置”下...） - Venryx

但是，这个东西有什么作用？ - JulianSoto

@JulianSoto 如果在 TypeScript 项目中使用 'eslint-config-airbnb-base'，则会出现“确保在导入路径中一致使用文件扩展名”的规则，这会导致问题。因此，我们可以覆盖它以适应 TypeScript 项目。 - superoryco

replace "error" with 2. - Mike

这只是完全禁用了 import/extensions。毫无意义的答案。 - Steve

Answer 2

我知道现在可能晚了，但如果您正在扩展Airbnb规则，则可以使用eslint-config-airbnb-typescript。有关最新说明，请参阅项目页面。截至2022年3月，以下是要点：

安装

npm install -D eslint-config-airbnb-typescript

ESLint 配置文件

使用 React - 在 'airbnb' 后面添加 'airbnb-typescript'

extends: [
  'airbnb',
+ 'airbnb-typescript'
]

没有使用React - 在'airbnb-base'之后添加'airbnb-typescript/base'

extends: [
  'airbnb-base',
+ 'airbnb-typescript/base'
]

将 parserOptions.project 设置为您的 tsconfig.json 文件路径。

{
  extends: ['airbnb', 'airbnb-typescript'],
+ parserOptions: {
+   project: './tsconfig.json'
+ }
}

---

注意: 在 2021 年 8 月之前，您还需要完成以下任务。 这些说明仅供历史参考。您现在不需要再执行此操作。

首先卸载旧版并添加新版：

# uninstall whichever one you're using
npm uninstall eslint-config-airbnb
npm uninstall eslint-config-airbnb-base

# install the typescript one
npm install -D eslint-config-airbnb-typescript

然后更新您的ESlint配置，从“extends”部分中删除旧的Airbnb，并添加新的：

extends: ["airbnb-typescript"]

- Ryan Wheale

---

谢谢兄弟。这是解决该问题的最佳方法，因为正如被接受的答案所述，问题源自常规的 Airbnb 配置不支持 TypeScript。而这个包就是在添加这种支持。 - smac89

这应该是被接受的答案；其他的只是权宜之计，这才是真正的问题。 - Hugo Elhaj-Lahsen

根据最新的指示，您不应该“卸载 eslint-config-airbnb”，请参见：https://www.npmjs.com/package/eslint-config-airbnb-typescript。 - Cristian E.

谢谢！我已经更新了答案以反映新的流程。 - Ryan Wheale

这应该是被接受的答案。感谢您花时间更新原来的答案。 - Ricardo Rodriguez

Answer 3

这是一个奇怪的解决方案，但是我添加了"": "never"，它对我有用(https://github.com/import-js/eslint-plugin-import/issues/1573)。

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

- dragomirik

---

很奇怪，这是唯一对我有效的解决方案。有人知道为什么需要空引号吗？ - Hazy

@Hazy，我可以假设这是某个包/扩展程序中webpack的一个错误，但我不知道确切的答案。https://github.com/import-js/eslint-plugin-import/issues/1573#issuecomment-565973643 - 这里是发现此解决方案的人。看起来，他也没有答案，但他描述了他是如何得出这个结论的。 - dragomirik

在我的情况下，它也有所帮助。 - klaucode

如果在VS Code中遇到此问题： "eslint.workingDirectories": [{ "mode": "auto" }] 将其添加到我的settings.json中解决了我的问题，而无需更改eslint规则。 - Steffen

为什么它会这样工作？ - Ilja KO

Answer 4

在.eslintrc中添加导入扩展和解析器是很重要的。

    "settings": {
    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
},

进一步添加规则：

 "import/extensions": [
  "error",
  "ignorePackages",
  {
    "js": "never",
    "jsx": "never",
    "ts": "never",
    "tsx": "never"
  }
]



enter code here

- Yauheni Saladukha

Answer 5

我通过打包在互联网上找到的所有答案来实现这个功能:

这是我最终得到的结果:

{
  "settings": {
    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },

  "env": {
    "browser": true,
    "es2021": true
  },

  "extends": ["plugin:react/recommended", "airbnb"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["import", "react", "@typescript-eslint"],
  "rules": {
    "no-console": 1,
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never",
        "mjs": "never"
      }
    ]
  }
}

顺便说一下，我正在使用React Native。如果您使用的是其他技术，请将相关的React内容删除即可。

- nishi

Answer 6

如果您像我一样尝试配置babel、旧的Javascript和新的typescript文件，并尝试在*.ts上启用无扩展名导入，那么您可能会遇到这个ESLint问题（我也发现了以下解决方案）：

除了rules配置之外：

"rules": {
   "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "mjs": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
   ]
}

你还需要在你的 .eslintrc.js 文件中添加一个额外的设置条目：

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

祝你好运！

- jfunk

Answer 7

以下是由于导入中的'~'可能引发的类似错误：

缺失文件扩展名 "~/path/" eslintimport/extensions。

解决方案1：

可以通过以下方式配置tsconfig.json和.eslintrc.js来解决此问题。

tsconfig.json

...
“paths”: {
 “~*”: [“./src/*”],
},
...

".eslintrc.js" 翻译成中文是 ".eslintrc.js"。

...
settings: {
  'import/resolver': {
     alias: {
       map: [['~', './src/']],
       extensions: ['.ts', '.js', '.tsx'],
     },
   },
},
...

解决方案2：

如果错误仍然存在，则可能是您在根目录之外的另一个目录中打开了项目（tsconfig.json和.eslintrc.js所在的目录）。因此，打开根目录之外的目录可能会使eslint无法正确识别路径，并抛出上述错误。

- Pawara Siriwardhane

Answer 8

在我的情况下，我正在扩展monorepo的ESLint配置，并且在禁用该规则的包之后加载了airbnb-base。所以我只需要将它最后加载即可。

- Hyoretsu

Answer 9

即使我的.eslintrc中有所有的TypeScript属性，问题仍然存在。

.eslintrc

"extends": [
    "airbnb-base",
    "airbnb-typescript/base"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],

我通过将以下内容添加到我的webpack配置中成功解决了这个问题：

webpack.config.json

resolve: {
  extensions: ['.tsx', '.ts', '.js'],
}

来源：https://smartdevpreneur.com/the-three-easiest-ways-to-fix-the-missing-file-extension-tsx-error/

- Raphael

Answer 10

我碰到这个是因为我在做：

import Ham from "./Ham.tsx"       // bad!

我需要做的事情是：

import Ham from "./Ham"           // good!

- duhaime