Allow resolving .js module path endings to .ts equivalent

[patrickarlt]

Moving this from import-js/eslint-plugin-import#2111 (comment) after import-js/eslint-plugin-import#2111 (comment).

It looks like this was previously discussed in #80 and it was requested that an issue get filed in eslint-plugin-import. import-js/eslint-plugin-import#2111 discusses this but it was recommended that this functionality move to eslint-import-resolver-typescript.

Below is my original comment from the eslint-plugin-import issue slightly modified for clarity.

---

I'm migrating a large project written in TypeScript to output native ESM modules for Node. This requires all the import statements in TypeScript to end in .js so they get output with the .js extensions and I would like to lint that import statements of file paths end in .js.

I don't think TypeScript is going to budge on their treatment of extensions, see microsoft/TypeScript#16577 (comment), neither will Node JS back off of required extensions for ESM so it is perfectly valid TypeScript to write this if you are compiling to ESM for Node:

// foo.ts
export const foo = 'foo';

// bar.ts
import { foo } from './foo.js';

Compiles to:

// foo.js
export const foo = 'foo';

// bar.js
import { foo } from './foo.js';

Currently this config produces Missing file extension "ts" for "./foo.js" which is illogical since TypeScript doesn't actually support .ts on file paths microsoft/TypeScript#37582.

module.exports = {
  root: true,
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: "module"
  },
  plugins: ["@typescript-eslint", "import"],
  extends: ["plugin:import/recommended", "plugin:import/typescript"],
  rules: {
    "import/extensions": ["error", "ignorePackages"]
  },
  settings: {
    "import/extensions": [".js", ".jsx"],
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      typescript: {
        project: "./"
      }
    }
  }
};

[JounQin]

It's supported already #56, and I'm using it very well.

[JounQin]

Just remove "import/extensions" this setting.

This resolver resolves the .ts file correctly, but it's not allowed in your configuration.

[patrickarlt]

Thanks @JounQin! I was able to get this working but I had to REMOVE typescript from the settings.import/resolver. Am I just missing the point of what eslint-import-resolver-typescript is supposed to do? I can push up the minimal reproduction I made if you want.

Failure bar.ts should pass

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": [
    "import"
  ],
  "rules": {
    "import/extensions": ["error", "ignorePackages"]
  },
  "settings": {
    "import/parsers": {
      "@typescript-eslint/parser": [
        ".ts",
        ".tsx"
      ]
    },
    "import/resolver": {
      "typescript": {
        "project": "./tsconfig.json"
      }
    }
  }
}

Success only baz.ts fails

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": [
    "import"
  ],
  "rules": {
    "import/extensions": ["error", "ignorePackages"]
  },
  "settings": {
    "import/parsers": {
      "@typescript-eslint/parser": [
        ".ts",
        ".tsx"
      ]
    }
  }
}

[steve-taylor]

In my case, I also found it necessary to disable the import/no-unresolved rule. This is perfectly acceptable, because tsc will perform the same check, which makes import/no-unresolved redundant.

[lifeiscontent]

@JounQin this is not done, the PR that you linked doesn't support the option to force an extension like .js that points to .ts, or .tsx

[JounQin]

Forcing an extension is out of scope for this plugin, it's just a resolver.

See also import-js/eslint-plugin-import#2111 (comment)