eslint-plugin-preferred-import

An ESLint plugin for checking import path with typescript. This rule reads your paths config in tsconfig.json and checks your import path that it is correct. And even if incorrect, try to Auto Fix.

Installation

You’ll first need to install ESLint:

npm i eslint --save-dev

Next, install eslint-plugin-preferred-import:

npm i eslint-plugin-preferred-import --save-dev

Usage

If your project is based on Typescript, choice ts-import rule

Here’s a suggested ESLint configuration:

{
  parser: '@typescript-eslint/parser', // Should be used ts-eslint parser
  plugins: [..., 'preferred-import'], // Add 'preferred-import' next to old plugins
  overrides: [
    ...,
    // Add rules into overrides
    {
      files: ['src/**/*.{ts,tsx}'],
      parser: '@typescript-eslint/parser',
      parserOptions: {
        project: ['./tsconfig.json']
      },
      rules: {
        'preferred-import/ts-imports': 'error'
      }
    }
  ],
}

On the other hand, if your project is based on Javascript, choose js-imports rule

Here’s a suggested ESLint configuration:

const path = require('path')

module.exports = {
  plugins: [..., 'preferred-import'], // Add 'preferred-import' next to old plugins
  rules: {
    ...,
    // Add your rule config to the rules, resolveAlias should be same value with webpack alias
    'preferred-import/js-imports': ['error', {
      'resolveAlias': {
        'utils': path.resolve(__dirname, 'src/utils'),
        'reducer$': path.resolve(__dirname, 'src/reducer'),
      }
    }]
  }
}

Supported Rules

• ts-imports : Check for replaceable paths based on basePath, paths field in tsconfig.json. Auto-fixable

• js-imports : Check for replaceable paths based on rules config. Auto-fixable

License

BSD License