Skip to content

import-js/eslint-import-resolver-typescript

Folders and files

NameName
Last commit message
Last commit date

Latest commit

d1807bd · Dec 5, 2024
Dec 3, 2024
Dec 6, 2023
Jul 14, 2024
Dec 3, 2024
Dec 6, 2023
Jul 5, 2022
Dec 3, 2024
Dec 3, 2024
Sep 17, 2019
Sep 11, 2019
Aug 22, 2022
Apr 5, 2023
Jun 25, 2022
Dec 6, 2023
Aug 22, 2022
Dec 1, 2024
Jul 17, 2022
Sep 11, 2019
Aug 22, 2022
Feb 16, 2021
Jun 25, 2022
Jul 14, 2024
Dec 6, 2023
Dec 3, 2024
Sep 13, 2021
Dec 5, 2024
Dec 3, 2024
Dec 3, 2024
Dec 3, 2024

Repository files navigation

eslint-import-resolver-typescript

GitHub Actions type-coverage npm GitHub Release

Conventional Commits Renovate enabled JavaScript Style Guide Code Style: Prettier changesets

This plugin adds TypeScript support to eslint-plugin-import (Or maybe you want to try eslint-plugin-i for faster speed)

This means you can:

  • import/require files with extension .cts/.mts/.ts/.tsx/.d.cts/.d.mts/.d.ts
  • Use paths defined in tsconfig.json
  • Prefer resolving @types/* definitions over plain .js/.jsx
  • Multiple tsconfigs support just like normal
  • imports/exports fields support in package.json

TOC

Notice

After version 2.0.0, .d.ts will take higher priority then normal .js/.jsx files on resolving node_modules packages in favor of @types/* definitions or its own definition.

If you're facing some problems on rules import/default or import/named from eslint-plugin-import, do not post any issue here, because they are just working exactly as expected on our sides, take import-js/eslint-plugin-import#1525 as reference or post a new issue to eslint-plugin-import instead.

Installation

# npm
npm i -D eslint-plugin-import eslint-import-resolver-typescript

# pnpm
pnpm i -D eslint-plugin-import eslint-import-resolver-typescript

# yarn
yarn add -D eslint-plugin-import eslint-import-resolver-typescript

Important when using eslint-plugin-i and npm: Use npm i -D eslint-plugin-import@eslint-plugin-i@latest eslint-import-resolver-typescript, or you will end up with both eslint-plugin-import and eslint-plugin-i in your node_modules.

Configuration

eslint.config.js

If you are using eslint-plugin-import-x@>=4.5.0, you can use import/require to reference eslint-import-resolver-typescript directly in your ESLint flat config:

// eslint.config.js
const {
  createTypeScriptImportResolver,
} = require('eslint-import-resolver-typescript')

module.exports = [{
  settings: {
    "import/resolver-next": [
      createTypeScriptImportResolver({
        alwaysTryTypes: true, // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`

        // Choose from one of the "project" configs below or omit to use <root>/tsconfig.json by default

        // use <root>/path/to/folder/tsconfig.json
        project: "path/to/folder",

        // Multiple tsconfigs (Useful for monorepos)

        // use a glob pattern
        project: "packages/*/tsconfig.json",

        // use an array
        project: [
          "packages/module-a/tsconfig.json",
          "packages/module-b/tsconfig.json"
        ],

        // use an array of glob patterns
        project: [
          "packages/*/tsconfig.json",
          "other-packages/*/tsconfig.json"
        ]
      }),
    ];
  }
}]

But if you are using eslint-plugin-import or the older version of eslint-plugin-import-x, you can't use require/import:

// eslint.config.js
module.exports = [
  {
    settings: {
      'import/resolver': {
        typescript: {
          alwaysTryTypes: true, // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`

          // Choose from one of the "project" configs below or omit to use <root>/tsconfig.json by default

          // use <root>/path/to/folder/tsconfig.json
          project: 'path/to/folder',

          // Multiple tsconfigs (Useful for monorepos)

          // use a glob pattern
          project: 'packages/*/tsconfig.json',

          // use an array
          project: [
            'packages/module-a/tsconfig.json',
            'packages/module-b/tsconfig.json',
          ],

          // use an array of glob patterns
          project: [
            'packages/*/tsconfig.json',
            'other-packages/*/tsconfig.json',
          ],
        },
      },
    },
  },
]

.eslintrc

Add the following to your .eslintrc config:

{
  "plugins": ["import"],
  "rules": {
    // turn on errors for missing imports
    "import/no-unresolved": "error"
  },
  "settings": {
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true, // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`

        // Choose from one of the "project" configs below or omit to use <root>/tsconfig.json by default

        // use <root>/path/to/folder/tsconfig.json
        "project": "path/to/folder",

        // Multiple tsconfigs (Useful for monorepos)

        // use a glob pattern
        "project": "packages/*/tsconfig.json",

        // use an array
        "project": [
          "packages/module-a/tsconfig.json",
          "packages/module-b/tsconfig.json"
        ],

        // use an array of glob patterns
        "project": [
          "packages/*/tsconfig.json",
          "other-packages/*/tsconfig.json"
        ]
      }
    }
  }
}

Options from enhanced-resolve

conditionNames

Default:

[
  "types",
  "import",

  // APF: https://angular.io/guide/angular-package-format
  "esm2020",
  "es2020",
  "es2015",

  "require",
  "node",
  "node-addons",
  "browser",
  "default"
]

extensions

Default:

[
  // `.mts`, `.cts`, `.d.mts`, `.d.cts`, `.mjs`, `.cjs` are not included because `.cjs` and `.mjs` must be used explicitly
  ".ts",
  ".tsx",
  ".d.ts",
  ".js",
  ".jsx",
  ".json",
  ".node"
]

extensionAlias

Default:

{
  ".js": [
    ".ts",
    // `.tsx` can also be compiled as `.js`
    ".tsx",
    ".d.ts",
    ".js"
  ],
  ".jsx": [".tsx", ".d.ts", ".jsx"],
  ".cjs": [".cts", ".d.cts", ".cjs"],
  ".mjs": [".mts", ".d.mts", ".mjs"]
}

mainFields

Default:

[
  "types",
  "typings",

  // APF: https://angular.io/guide/angular-package-format
  "fesm2020",
  "fesm2015",
  "esm2020",
  "es2020",

  "module",
  "jsnext:main",

  "main"
]

Other options

You can pass through other options of enhanced-resolve directly

Default options

You can reuse defaultConditionNames, defaultExtensions, defaultExtensionAlias and defaultMainFields by require/import them directly

Contributing

  • Make sure your change is covered by a test import.
  • Make sure that yarn test passes without a failure.
  • Make sure that yarn lint passes without conflicts.
  • Make sure your code changes match our type-coverage settings: yarn type-coverage.

We have GitHub Actions which will run the above commands on your PRs.

If either fails, we won't be able to merge your PR until it's fixed.

Sponsors

1stG RxTS UnTS
1stG Open Collective backers and sponsors RxTS Open Collective backers and sponsors UnTS Open Collective backers and sponsors

Backers

1stG RxTS UnTS
1stG Open Collective backers and sponsors RxTS Open Collective backers and sponsors UnTS Open Collective backers and sponsors

Changelog

Detailed changes for each release are documented in CHANGELOG.md.

License

ISC