An ESLint plugin that auto-fixes relative imports to absolute imports. Support baseUrl and paths config in TSConfig.
A typical project starts out using relative imports, but once it has gotten bigger, the relative imports grows longer and messier. This plugin is useful when you want to migrate the relative imports to absolute imports, and keep it that way through auto-fixes.
Built on Jeff Chen's Absolute Imports plugin.
You must define baseUrl and paths (optional) in either tsconfig.json or jsconfig.json.
npm i --save-dev eslint-plugin-import-typescript- Add
eslint-plugin-import-typescriptto your eslintpluginssection - Add one of the supported rules below to your eslint
rulessection.
Example:
plugins: ['eslint-plugin-import-typescript'],
rules: [
'import-typescript/no-relative-parent-imports': ['error'],
]
| Rule | Description |
|---|---|
| no-relative-imports | Autofix relative imports to absolute import or paths import |
| no-relative-parent-imports | Autofix relative parent imports to absolute import or paths import |
The rule no-relative-parent-imports is useful when you still want to allow relative import within the same folder but disallow relative import in a parent folder. It's similar to eslint-plugin-import/no-relative-parent-imports rule, except it supports auto-fix. It is the recommended rule.
The rules supports baseUrl and paths, and will prioritize paths import if it exists. It's possible to disable one of the rewritting rules by setting the corresponding options
| Options | Description |
|---|---|
| onlyAbsoluteImport | Ignore paths config if it exists |
| onlyPathsImport | Do not autofix absolute import. Only fix import if there is a path matching paths config |
Example:
'import-typescript/no-relative-parent-imports': [
'error', { onlyAbsoluteImport: true }
],
While baseUrl and paths are understood and supported by Typescript, it doesn't rewrite the import paths when it compiles the typescript code to javascript. Belows are some related readings and library to get typescript absolute imports works:
- With transpiled code: Use tsc-alias to rewrite the import path, or tsconfig-paths to help Node understands absolute import
- With Jest: configure roots, modulePaths and moduleNameMapper. If you run into issue with globalSetup/globalTeardown script, you need to use tsconfig-paths here as well.
- With ESlint: if you use
paths, you need to use eslint-import-resolver-typescript to help eslint understands paths import.
Contributions are welcome!
MIT