eslint-import-resolver-alias

What is eslint-import-resolver-alias?

The eslint-import-resolver-alias package is an ESLint plugin that allows you to resolve import paths using custom alias mappings. This is particularly useful in projects where you have complex directory structures and want to simplify import statements.

What are eslint-import-resolver-alias's main functionalities?

Custom Alias Resolution

This feature allows you to define custom alias mappings for your project. In the example, `@components` is mapped to `./src/components` and `@utils` is mapped to `./src/utils`. This makes it easier to import modules without having to use relative paths.

{"settings":{"import/resolver":{"alias":{"map":[["@components","./src/components"],["@utils","./src/utils"]],"extensions":[".js",".jsx",".ts",".tsx"]}}}}

Support for Multiple Extensions

You can specify multiple file extensions that the resolver should consider. In this example, the resolver will look for files with `.js`, `.jsx`, `.ts`, and `.tsx` extensions when resolving the `@components` alias.

{"settings":{"import/resolver":{"alias":{"map":[["@components","./src/components"]],"extensions":[".js",".jsx",".ts",".tsx"]}}}}

Other packages similar to eslint-import-resolver-alias

eslint-import-resolver-webpack

The eslint-import-resolver-webpack package allows you to use your Webpack configuration to resolve import paths. This is useful if you are already using Webpack and want to maintain consistency between your Webpack and ESLint configurations. Unlike eslint-import-resolver-alias, which focuses on custom alias mappings, eslint-import-resolver-webpack leverages the entire Webpack configuration.

eslint-import-resolver-node

The eslint-import-resolver-node package resolves import paths using Node.js' resolution algorithm. This is useful for projects that follow Node.js conventions and do not require custom alias mappings. It is simpler compared to eslint-import-resolver-alias and is ideal for straightforward Node.js projects.

README

eslint-import-resolver-alias

This is a simple Node.js module import resolution plugin for eslint-plugin-import, which supports native Node.js module resolution, module alias/mapping and custom file extensions.

Installation

Prerequisites: Node.js >=4.x and corresponding version of npm.

npm install eslint-plugin-import eslint-import-resolver-alias --save-dev

Usage

Pass this resolver and its parameters to eslint-plugin-import using your eslint config file, .eslintrc or .eslintrc.js.

// .eslintrc.js
module.exports = {
  settings: {
    'import/resolver': {
      alias: {
        map: [
          ['babel-polyfill', 'babel-polyfill/dist/polyfill.min.js'],
          ['helper', './utils/helper'],
          ['material-ui/DatePicker', '../custom/DatePicker'],
          ['material-ui', 'material-ui-ie10']
        ],
        extensions: ['.ts', '.js', '.jsx', '.json']
      }
    }
  }
};

Note:

• The alias config object contains two properties, map and extensions, both of which are array types
• The item of map array is also array type which contains 2 string
  • The first string represents the alias of module name or path
  • The second string represents the actual module name or path
• The map item ['helper', './utils/helper'] means that the modules which match helper or helper/* will be resolved to ./utils/helper or ./utils/helper/* which are located relative to the process current working directory (almost the project root directory). If you just want to resolve helper to ./utils/helper, use ['^helper$', './utils/helper'] instead. See issue #3
• The order of 'material-ui/DatePicker' and 'material-ui' cannot be reversed, otherwise the alias rule 'material-ui/DatePicker' does not work
• The default value of extensions property is ['.js', '.json', '.node'] if it is assigned to an empty array or not specified

If the extensions property is not specified, the config object can be simplified to the map array.

// .eslintrc.js
module.exports = {
  settings: {
    'import/resolver': {
      alias: [
        ['babel-polyfill', 'babel-polyfill/dist/polyfill.min.js'],
        ['helper', './utils/helper'],
        ['material-ui/DatePicker', '../custom/DatePicker'],
        ['material-ui', 'material-ui-ie10']
      ]
    }
  }
};

When the config is not a valid object (such as true), the resolver falls back to native Node.js module resolution.

// .eslintrc.js
module.exports = {
  settings: {
    'import/resolver': {
      alias: true
    }
  }
};