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

Question

17 浏览2023年5月23日

匿名的 2023年5月23日

0 Comments

我有一个使用Typescript制作的简单的Node/Express应用程序。

并且eslint给了我错误

为"./lib/env"的导入缺少文件扩展名"ts" 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。

我无法弄清楚为什么会出现这个错误。

0

3 答案

匿名的 · Answer 1 · 2023-08-29T07:54:43+00:00

问题的原因是在使用Typescript的eslint插件时，遇到了一个文件扩展名的问题。解决方法是在eslint的配置文件中添加一个空字符串的规则。

根据一个GitHub的帖子（https://github.com/import-js/eslint-plugin-import/issues/1573），有人发现将空字符串规则添加到import/extensions规则中可以解决该问题。这个解决方法对他来说是有效的，但并不清楚为什么需要添加空字符串规则。

有人猜测这可能是某个包或扩展的webpack的bug，但并没有确切的答案。在同一个帖子中，有人描述了他如何发现这个解决方法，但并没有找到具体的原因。

另外，如果在VS Code中遇到这个问题，可以在settings.json中添加"eslint.workingDirectories": [{ "mode": "auto" }]来解决，而无需更改eslint规则。

通过在eslint配置中添加空字符串规则，可以解决Typescript eslint - Missing file extension "ts" import/extensions的问题。解决方法的原因尚不清楚，但可以通过这种方法解决该问题。

匿名的 · Answer 2 · 2023-09-12T17:11:34+00:00

问题出现的原因是因为在使用Typescript和ESLint时，导入文件没有指定文件扩展名"ts"，导致ESLint无法正确解析文件。

解决方法是在ESLint配置文件中添加对Typescript的支持，并指定文件扩展名为"ts"。

具体解决方法如下：

1. 首先，安装eslint-config-airbnb-typescript包，可以使用以下命令进行安装：

npm install -D eslint-config-airbnb-typescript

2. 在ESLint配置文件中，如果使用React，需要在"extends"数组中添加"airbnb-typescript"；如果不使用React，需要添加"airbnb-typescript/base"。示例如下：

{


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

或

{


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

3. 如果在tsconfig.json文件中指定了项目路径，需要在ESLint配置文件中设置"parserOptions.project"为tsconfig.json的路径。示例如下：

{


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

以上就是解决Typescript eslint - Missing file extension "ts" import/extensions问题的方法。

另外，如果遇到在monorepo中有部分包使用React，部分包不使用React的情况，可以在根目录中创建一个统一的ESLint配置文件，然后在各个包的配置文件中引入/扩展根配置文件。另一种方法是在根项目中创建一个或多个"base"配置文件，在monorepo中的各个包中导入/扩展这些"base"配置文件。

希望以上内容对解决该问题有所帮助！

匿名的 · Answer 3 · 2023-08-18T22:37:59+00:00

TypeScript eslint - Missing file extension "ts" import/extensions问题的出现原因是使用了eslint-config-airbnb-base规则，在typescript项目中会出现规则“Ensure consistent use of file extension within the import path”的问题。解决方法是在.eslintrc文件中的rules中添加如下代码：

"rules": {


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

这段代码会覆盖airbnb的eslint规则，使其适用于typescript项目。在eslint 7.27.0版本中，可能会出现配置错误的问题，解决方法是将"error"替换为2，即：

"rules": {


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

如果eslint没有安装eslint-plugin-import插件，则需要先安装该插件。有读者反馈说将"error"替换为2仍然不能解决问题，对此，有读者提到了另一种解决方法，即在规则配置中添加如下代码：

{ "": "never", "ts": "never" }

这样做可以帮助解决问题。