制作“导入/扩展”需要Node.js打字稿项目中的.js扩展

Question

首先，一些事实：

• node.js要求所有local import s包括导入模块的扩展（例如'./hello.js'，而不是<<代码>从'./hello'导入Hello）。
• TypeScript将在有或没有 .js 扩展程序的情况下编译导入 s，这意味着缺少 .js 扩展名是运行时错误。
• Typescript不会转换导入 s以添加 .js 扩展名或转换 .ts to .js 。

在我的node.js项目中，我想使用 import/Extensions eslint规则，让缺少丢失的 .js 扩展名为构建时间错误。但是，当我使用以下配置启用此规则时：

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

Answer 1

我用以下配置修复了此问题：

{
  "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/import/resolver”。“ node” 。 （“导入/未解决” 是多余的/代码>插件。

Answer 2

我找到了一个ESLINT插件，可以修复 .ts 文件中的导入的 .js 扩展，而不仅仅是显示错误：

https://github.com/AlexSergey/eslint-plugin-file-extension-in-import-ts< /a>

install：

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

添加到 .eslintrc file：

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

注意：我遇到了类似于 https://github.com/import-js/emport-js/eslint-plugin-import/- essugy/1292 使用此软件包时，它将错误地尝试在自动修复时在这些路径上添加 .js 扩展。

Answer 3

您可以尝试 ts-add-js-extension 软件包，以附加 .js 扩展到thrabiled的JavaScript文件。安装后，您可以做

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