Awesome

@dword-design/eslint-plugin-import-alias

An ESLint plugin that enforces the use of import aliases. Also supports autofixing.

Aliases are a great thing to make imports more readable and you do not have to change import paths that often when a file path is changed.

import foo from '../../model/sub/foo'
import bar from '../other/bar'

changes to

import foo from '@/model/sub/foo'
import bar from '@/sub/other/bar'

Now what if you are in a bigger team or you have a lot of projects to update. Or you just want to make sure that everything is consistent. This is where a linter comes into the play. This rule allows you to detect inconsistent imports and even autofix them. This works by matching alias paths agains the imports and replacing the import paths with the first matching aliased path.

Install

# npm
$ npm install @dword-design/eslint-plugin-import-alias

# Yarn
$ yarn add @dword-design/eslint-plugin-import-alias

Usage

Add the plugin to your ESLint config:

{
  "extends": [
    "plugin:@dword-design/import-alias/recommended"
  ],
}

Alright, now you have to tell the plugin which aliases to use. In the simplest case, you are already using babel-plugin-module-resolver for your aliases. Your babel config would look something like this:

{
  "plugins": {
    ["module-resolver", {
      "alias": {
        "@": ".",
      },
    }]
  }
}

In this case lucky you, you don't have to do anything else. The plugin should work out of the box.

If you have a special project setup that does not have a babel config in the project path, you can still use the plugin by passing the aliases directly to the rule. In this case you define the rule additionally in the rules section:

"rules": {
  "@dword-design/import-alias/prefer-alias": [
    "error",
    {
      "alias": {
        "@": "./src",
        "@components": "./src/components"
      }
    }
  ]
}

By default, the plugin will convert parent paths to aliases (like ../model/foo), but will keep subpath imports relative. You can change that to also convert subpaths to aliased imports by passing the aliasForSubpaths option to the rule like so:

"rules": {
  "@dword-design/import-alias/prefer-alias": ["error", { "aliasForSubpaths": true }]
}

Contribute

Are you missing something or want to contribute? Feel free to file an issue or a pull request! ⚙️

Support

Hey, I am Sebastian Landwehr, a freelance web developer, and I love developing web apps and open source packages. If you want to support me so that I can keep packages up to date and build more helpful tools, you can donate here:

Thanks a lot for your support! ❤️

License

MIT License © Sebastian Landwehr