https://github.com/dword-design/eslint-plugin-import-alias

An ESLint plugin that enforces the use of import aliases. Also supports autofixing.
https://github.com/dword-design/eslint-plugin-import-alias

alias aliases autofix babel babel-plugin-module-resolver enforce eslint fix import lint module module-resolver nuxt nuxtjs plugin prefer replace require rule

Last synced: 4 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/dword-design/eslint-plugin-import-alias
• Owner: dword-design
• License: other
• Created: 2020-06-15T09:39:56.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-10-21T03:07:20.000Z (16 days ago)
• Last Synced: 2024-10-21T06:17:32.578Z (16 days ago)
• Topics: alias, aliases, autofix, babel, babel-plugin-module-resolver, enforce, eslint, fix, import, lint, module, module-resolver, nuxt, nuxtjs, plugin, prefer, replace, require, rule
• Language: JavaScript
• Homepage:
• Size: 2.69 MB
• Stars: 61
• Watchers: 2
• Forks: 11
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md

Awesome Lists containing this project

README

        

# @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.

```js

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

import bar from '../other/bar'

```

changes to

```js

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

```bash

# 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:

```json

{

  "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](https://www.npmjs.com/package/babel-plugin-module-resolver) for your aliases. Your babel config would look something like this:

```json

{

  "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:

```json

"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:

```json

"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](https://github.com/dword-design/eslint-plugin-import-alias/issues) or a [pull request](https://github.com/dword-design/eslint-plugin-import-alias/pulls)! ⚙️

## 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:



  

    

   If you want to send me a one time donation. The coffee is pretty good 😊.


  

    

   Also for one time donations if you like PayPal.


  

    

   Here you can support me regularly, which is great so I can steadily work on projects.



Thanks a lot for your support! ❤️

## License

[MIT License](https://opensource.org/license/mit/) © [Sebastian Landwehr](https://sebastianlandwehr.com)