eslint-import-resolver-babel-module

What is eslint-import-resolver-babel-module?

The eslint-import-resolver-babel-module package is an ESLint plugin that allows you to resolve import paths using Babel's module resolver. This is particularly useful for projects that use Babel to transform module paths, as it ensures that ESLint can correctly resolve and lint these paths.

What are eslint-import-resolver-babel-module's main functionalities?

Custom Module Resolution

This feature allows you to configure ESLint to use Babel's module resolver for resolving import paths. This ensures that ESLint can correctly resolve paths that are transformed by Babel.

{
  "settings": {
    "import/resolver": {
      "babel-module": {}
    }
  }
}

Alias Configuration

This feature allows you to define custom aliases for module paths. This is useful for simplifying import statements and making your codebase more maintainable.

{
  "settings": {
    "import/resolver": {
      "babel-module": {
        "alias": {
          "@components": "./src/components",
          "@utils": "./src/utils"
        }
      }
    }
  }
}

Custom Extensions

This feature allows you to specify custom file extensions that should be resolved by Babel's module resolver. This is useful for projects that use multiple file types, such as JavaScript and TypeScript.

{
  "settings": {
    "import/resolver": {
      "babel-module": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}

Other packages similar to eslint-import-resolver-babel-module

eslint-import-resolver-webpack

The eslint-import-resolver-webpack package is an ESLint plugin that allows you to resolve import paths using Webpack's module resolver. This is useful for projects that use Webpack to bundle their code, as it ensures that ESLint can correctly resolve and lint these paths. Compared to eslint-import-resolver-babel-module, this package is more suitable for projects that rely heavily on Webpack for module resolution.

eslint-import-resolver-alias

The eslint-import-resolver-alias package is an ESLint plugin that allows you to resolve import paths using custom alias configurations. This is useful for projects that use custom aliases for module paths, similar to eslint-import-resolver-babel-module. However, it does not rely on Babel and is more lightweight, making it a good choice for projects that do not use Babel for module resolution.

README

eslint-import-resolver-babel-module

A babel-plugin-module-resolver resolver for eslint-plugin-import

Installation

npm install --save-dev eslint-plugin-import eslint-import-resolver-babel-module

Usage

Inside your .eslintrc file, pass this resolver to eslint-plugin-import:

"settings": {
  "import/resolver": {
    "babel-module": {}
  }
}

And see babel-plugin-module-resolver to know how to configure your aliases.

Example

{
  "extends": "airbnb",
  "rules": {
    "comma-dangle": 0
  },
  "settings": {
    "import/resolver": {
      "babel-module": {}
    }
  }
}

Directory Imports

Some babel plugins like babel-plugin-import-directory or babel-plugin-wildcard allow to import directories (i.e. each file inside a directory) as an object. In order to support this, you can activate the allowExistingDirectories option as follows:

"settings": {
  "import/resolver": {
    "babel-module": { allowExistingDirectories: true }
  }
}

Now when you import a directory like this, the ESLint plugin won't complain and recognize the existing directory:

import * as Items from './dir';

License

MIT, see LICENSE.md for details.