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.
First, install ESLint:
npm i eslint --save-dev
Next, install eslint-plugin-preferred-import
:
npm i eslint-plugin-preferred-import --save-dev
Here is 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'
}
}
],
}
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.
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.
-
ts-imports
: Checks for replaceable paths based onbasePath
andpaths
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.
BSD License