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

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin