1. eslint-import-resolver-custom-alias
Plugin for eslint-plugin-import to use custom alias.
eslint-import-resolver-custom-alias
Package: eslint-import-resolver-custom-alias
Created by: laysent
Last modified: Sun, 14 May 2023 02:36:19 GMT
Version: 1.3.2
License: MIT
Downloads: 681,731
Repository: https://github.com/laysent/eslint-import-resolver-custom-alias

Install

npm install eslint-import-resolver-custom-alias
yarn add eslint-import-resolver-custom-alias

Build Status

This plugin will help you configure eslint-plugin-import
to allow customized alias and extensions.

Installation

To install this plugin, run:

 npm install --dev eslint-import-resolver-custom-alias

or

 yarn add --dev eslint-import-resolver-custom-alias

Configuration

 {
  "settings": {
    "import/resolver": {
      "eslint-import-resolver-custom-alias": {
        "alias": {
          "src": "./src"
        },
        "extensions": [".js", ".jsx"],
        "packages": [
          "packages/*"
        ]
      }
    }
  }
}

Here, alias is a key-value pair, where key represents the alias, and value represents
it's actual path. Relative path is allowed for value. When used, it's relative to project
root, where command line is running. (i.e. root path will be process.cwd())

extensions is an array of possible suffix. If not provided, default value will be [".js"].

packages is an optional configuration. When using lerna to manage packages and use eslint at
root folder, packages lets the resolver know where each package folder exist. This way, when
resolving alias, relative path will be resolved based on current package, instead of root folder.

Consider the file as an example:

 import * as utils from '@/utils';

Suppose the above file locates at ./packages/subfolder/src/components/button.jsx and command is
running at root folder (i.e. ./). If the resolver is configured the following way:

 {
  "settings": {
    "import/resolver": {
      "eslint-import-resolver-custom-alias": {
        "alias": {
          "@": "./src"
        },
        "extensions": [".js", ".jsx"],
      }
    }
  }
}

Resolver will tries to find file at ./src/utils folder. However, with packages configured:

 {
  "settings": {
    "import/resolver": {
      "eslint-import-resolver-custom-alias": {
        "alias": {
          "@": "./src"
        },
        "extensions": [".js", ".jsx"],
        "packages": [
          "packages/*"
        ]
      }
    }
  }
}

Resolver will try to find it at ./packages/subfolder/src/utils folder instead.

One special alias is empty string "". If configured, the resolver will try to
add prefix in front of the path before resolving. For example, with following configuration

 {
  "settings": {
    "import/resolver": {
      "eslint-import-resolver-custom-alias": {
        "alias": {
          "": "./src"
        },
        "extensions": [".js", ".jsx"],
        "packages": [
          "packages/*"
        ]
      }
    }
  }
}

The resolver will try to find the following import at path ./packages/subfolder/src/utils/helper.

 import * as helper from 'utils/helper';

Dependencies

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code