NodeJS Typescript eslint -缺少文件扩展名“ts”import/extensions

hlswsv35  于 2023-04-20  发布在  Node.js
关注(0)|答案(9)|浏览(315)

我用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。我不知道为什么,我得到了那个错误。

pgccezyw

pgccezyw1#

将以下代码添加到rules

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

airbnb ESLint config导致问题。

ewm0tg9j

ewm0tg9j2#

我知道这已经很晚了,但如果你正在扩展Airbnb规则,你可以使用eslint-config-airbnb-typescript。请参阅项目页面以获取最新说明。以下是截至2022年3月的要点:
安装

npm install -D eslint-config-airbnb-typescript

ESLint配置文件
using React - add 'airbnb-typescript' after 'airbnb'

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"]
xkrw2x1b

xkrw2x1b3#

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

n1bvdmb64#

向**.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
wmomyfyw

wmomyfyw5#

通过捆绑我在互联网上找到的所有答案,我得到了这个工作:
这是我的最终结果:

{
  "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 btw。如果你使用的是不同的东西,只要删除react相关的就足够了

gmxoilav

gmxoilav6#

如果你和我一样,试图配置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"]
  },

祝你好运!

pxq42qpu

pxq42qpu7#

下面是一个类似的错误,可能会由于导入中的“~”而引发:

缺少“~/path/”eslintimport/extensions的文件扩展名\

方案一:

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

tsconfig.json

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

.eslintrc.js

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

方案二:

如果错误仍然存在,很可能是您在根目录(tsconfig.json和.eslintrc.js所在目录)以外的其他目录打开了项目,因此打开根目录以外的目录会混淆eslint正确识别路径,从而抛出上述错误。

pxy2qtax

pxy2qtax8#

在我的例子中,我正在扩展monorepo ESLint配置,并且在我禁用该规则的包之后加载了airbnb-base。所以我必须最后加载它。

lf5gs5x2

lf5gs5x29#

即使.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/

相关问题