类型脚本 eslint-缺少文件扩展名“ ts”导入/扩展名

我有一个简单的节点/快递应用程序的类型。 埃斯林特告诉我错误

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-typecript。 我不知道为什么，我得到了这个错误。

143718 次浏览
小开
最佳答案

在 rules中添加以下代码:

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

ESLint 配置导致了这个问题。

小开

我知道现在很晚了，但是如果你要扩展 Airbnb 的规则，你可以使用 Eslint-config-airbnb-typecript。有关最新说明，请参阅项目网页。以下是截至2022年3月的要点:

安装

npm install -D eslint-config-airbnb-typescript

ESLint 配置文件

使用 React-add‘ airbnb-typecript’在‘ airbnb’后面添加‘ airbnb-typecript’

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

没有 React-在‘ airbnb-base’后面加上‘ airbnb-typecript/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 配置，从“扩展”部分删除旧的 Airbnb，并添加新的:

extends: ["airbnb-typescript"]
小开

如果你像我一样试图配置 babel、旧的 Javascript 和新的类型脚本文件，并且试图在 *.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"]
},

祝你好运！

小开

把我在网上找到的所有答案捆绑在一起:

这就是我的最终结果:

{
"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"
}
]
}
}

我使用反应本地顺便说一下。如果你使用的东西不同只是删除反应相关的应该足够了

小开

向 。 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
小开

下面是由导入中的“ ~”引发的类似错误:

enter image description here

“ ~/path/”缺少文件扩展名 Eslintimport/扩展

解决方案1:

这个问题可以通过如下配置 tsconfig.json 和. eslintrc.js 来解决。

Tsconfig.json

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

. eslintrc.js

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

解决方案2:

如果错误仍然持续 ，那么您可能必须在根目录以外的另一个目录中打开项目(tsconfig.json 和。Eslintrc.js 的位置)。因此，打开根目录以外的目录会使 eslint 在正确识别路径时产生混淆，并抛出上述错误。

小开

这是一个奇怪的解决方案，但是我已经添加了 "": "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"
}
]
}
小开

在我的例子中，我扩展 monorepo ESLint 配置，并在禁用该规则的包之后加载 airbnb-base。所以我只能最后装货。


提交答案