Moving a file to different folder, could result in changing all imports statement in that file. This will not happen is the import paths are absolute. The eslint rule helps enforcing having absolute import paths. Support eslint --fix to automatically change imports to absolute paths.
Install ESLint either locally or globally. (Note that locally, per project, is strongly preferred)
npm install eslint --save-dev
If you installed ESLint
globally, you have to install this plugin globally too. Otherwise, install it locally.
npm install @tunnel/eslint-plugin-no-relative-import-paths --save-dev
Add the plugin to the plugins section, and configure the rule options.
{
"plugins": ["no-relative-import-paths"],
"rules": {
"@tunnel/no-relative-import-paths/no-relative-import-paths": [
"warn",
{ "allowSameFolder": true }
]
}
}
...
"@tunnel/no-relative-import-paths/no-relative-import-paths": [
"warn",
{ "allowSameFolder": true, "rootDir": "src", "prefix": "" }
]
...
enabled
: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0.allowSameFolder
: optional boolean set totrue
to allow relative import paths for imported files from the same folder (default tofalse
).
When true
the rule will ignore relative import paths for imported files from the same folder
Examples of code for this rule:
// when true this will be ignored
// when false this will generate a warning
import Something from './something';
// will always generate a warning
import Something from '../modules/something';
Useful when auto-fixing and the rootDir should not be included in the absolute path.
Examples of code for this rule:
// when not configured:
import Something from '../../components/something';
// will result in
import Something from 'src/components/something';
// when configured as { "rootDir": "src" }
import Something from '../../components/something';
// will result in
import Something from 'components/something';
// ^- no 'src/' prefix is added
Useful when auto-fixing and a prefix should be included in the absolute path.
Examples of code for this rule:
// when not configured:
import Something from '../../components/something';
// will result in
import Something from 'src/components/something';
// when configured as { "prefix": "@" }
import Something from '../../components/something';
// will result in
import Something from '@/components/something';