eslint-plugin-preferred-import

eslint-plugin-preferred-import

This ESLint plugin replaces imports written with relative paths with alias paths from the tsconfig.json file, ensuring that the correct paths are used. Therefore, this plugin does not fix incorrect paths, but rather modifies the paths to use the appropriate aliases.

Installation

First, 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, use the ts-import rule

ESLint 9+ (Flat Config)

Here is a suggested ESLint configuration for ESLint 9+:

// eslint.config.mjs
import eslint from '@eslint/js'
import tseslint from 'typescript-eslint'
import preferredImport from 'eslint-plugin-preferred-import'

export default tseslint.config(
  eslint.configs.recommended,
  tseslint.configs.recommendedTypeChecked,
  {
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      parserOptions: {
        projectService: true, // Automatically finds the nearest tsconfig for each file
      },
    },
    plugins: { 'preferred-import': preferredImport },
    rules: {
      'preferred-import/ts-imports': 'error',
    },
  },
  { ignores: ['**/node_modules/**','**/dist/**','**/.next/**','**/.turbo/**'] },
)

ESLint 8 and below

Here is a suggested ESLint configuration for ESLint 8 and below:

{
  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'
      }
    }
  ],
}

The ts-imports rule checks for replaceable paths based on the basePath and paths fields in the tsconfig.json file, and it is auto-fixable.

If your project is based on JavaScript, use the js-imports rule

Here is 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'),
      }
    }]
  }
}

The js-imports rule checks for replaceable paths based on the configuration provided in the rules object, and it is auto-fixable.

Supported Rules

• ts-imports : Checks for replaceable paths based on basePath and paths field in tsconfig.json, and is auto-fixable.

• js-imports : Checks for replaceable paths based on configuration provided in the rules object, and is auto-fixable.

License

BSD License