使“import/extensions”需要 Node.js TypeScript 项目中的 .js 扩展名

首先,一些事实:

  • Node.js 要求所有本地 import 包含导入模块的扩展名(例如 import hello from './hello.js' ,而不是 import hello from './hello' )。
  • TypeScript 将编译带有或不带有 import 扩展的 .js ,这意味着缺少 .js 扩展是运行时错误。
  • TypeScript 不会转换 import 以添加 .js 扩展或将 .ts 转换为 .js

在我的 Node.js 项目中,我想使用 .js ESLint 规则使缺少的 import/extensions 扩展成为构建时错误。但是,当我使用以下配置启用此规则时:

{
  "root": true,
  "env": {
    "node": true
  },
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:import/recommended",
    "plugin:import/typescript",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "settings": {
    "import/resolver": {
      "typescript": {},
      "node": {
        "extensions": [".js"]
      }
    }
  },
  "rules": {
    "import/extensions": ["error", "ignorePackages"]
  }
}

运行 eslint 给我以下错误:

/sandbox/src/index.ts
  1:19  error  Missing file extension "ts" for "./hello.js"  import/extensions

源文件:

// index.ts
import hello from "./hello.js";

hello();
// hello.ts
export default function hello() {
  console.log("Hello");
}

CodeSandbox 链接: https://codesandbox.io/s/elated-germain-13glp7

stack overflow Make "import/extensions" require the .js extension in a Node.js TypeScript project
原文答案
author avatar

接受的答案

我使用以下配置解决了这个问题:

{
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:import/recommended",
    "plugin:import/typescript",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    "import/extensions": ["error", "ignorePackages"],
    "import/no-unresolved": "off"
  }
}

主要是禁用 "import/no-unresolved" 规则并删除 "settings"."import/resolver"."node" 。 ( "import/no-unresolved" 是多余的,因为在编译阶段解决了未解析的导入。)由于扩展 @typescript-eslint 插件,已经添加了此处删除的其他项目。


答案:

作者头像

我找到了一个 eslint 插件,它可以修复 .js 文件中缺少的 .ts 导入扩展,而不仅仅是显示错误:

https://github.com/AlexSergey/eslint-plugin-file-extension-in-import-ts https://www.npmjs.com/package/eslint-plugin-file-extension-in-import-ts

安装:

npm i -D eslint-plugin-file-extension-in-import-ts

添加到 .eslintrc 文件:

{
  "plugins": [
    "file-extension-in-import-ts"
  ],
  "rules": {
    "file-extension-in-import-ts/file-extension-in-import-ts": "error"
  }
}

注意: 我在使用这个包时遇到了类似于 https://github.com/import-js/eslint-plugin-import/issues/1292 的问题,它会在自动修复时错误地尝试在这些路径上添加 .js 扩展。

作者头像

您可以尝试使用 ts-add-js-extension 包将 .js 扩展名附加到转译后的 JavaScript 文件。安装后你可以做

ts-add-js-extension add --dir={your-transpiled-outdir}