Få "import/extensions" att kräva .js-tillägget i ett Node.js TypeScript-projekt

Först och främst, några fakta:

  • Node.js kräver att alla lokala import-satser inkluderar den importerade modulens filändelse (t.ex. import hello från './hello.js', inte import hello från './hello').
  • TypeScript kommer att kompilera import-satser med eller utan .js-ändelsen, vilket betyder att en saknad .js-ändelse är ett körtidsfel.
  • TypeScript omvandlar inte import-satser för att lägga till .js-tillägget eller konvertera .ts till .js.

I mitt Node.js-projekt vill jag göra att en saknad .js-tillägg blir ett byggtidsfel med hjälp av import/extensions-regeln i ESLint. Men när jag aktiverar denna regel med följande konfiguration:

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

att köra eslint ger mig följande fel:

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

Källfiler:

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

hello();

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

CodeSandbox-länk: https://codesandbox.io/s/elated-germain-13glp7

Svar #1

Jag fixade detta med följande konfiguration:

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

Det viktigaste är att inaktivera regeln "import/no-unresolved" och ta bort "settings"."import/resolver"."node". ("import/no-unresolved" är överflödig eftersom oupptäckta importer hanteras vid kompilering.) Andra objekt som togs bort här lades redan till som en följd av att @typescript-eslint-plugins utvidgades.

Svar #2

Jag hittade ett eslint-plugin som kan fixa saknade .js-tillägg för imports i .ts-filer, istället för att bara visa ett fel:

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

Installera :

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

Lägg till i .eslintrc-filen:

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

NOTERA: Jag stötte på ett problem liknande https://github.com/import-js/eslint-plugin-import/issues/1292 när jag använde det här paketet, och det kommer felaktigt försöka lägga till .js-ändelser på dessa sökvägar när det fixas automatiskt.

Relaterade artiklar