-
-
Notifications
You must be signed in to change notification settings - Fork 2.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(eslint-plugin): [no-import-type-side-effects] add rule to warn a…
…gainst runtime side effects with `verbatimModuleSyntax` (#6394)
- Loading branch information
1 parent
add18e7
commit b14d3be
Showing
10 changed files
with
245 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
75 changes: 75 additions & 0 deletions
75
packages/eslint-plugin/docs/rules/no-import-type-side-effects.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
--- | ||
description: 'Enforce the use of top-level import type qualifier when an import only has specifiers with inline type qualifiers.' | ||
--- | ||
|
||
> 🛑 This file is source code, not the primary documentation location! 🛑 | ||
> | ||
> See **https://typescript-eslint.io/rules/no-import-type-side-effects** for documentation. | ||
The [`--verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax) compiler option causes TypeScript to do simple and predictable transpilation on import declarations. | ||
Namely, it completely removes import declarations with a top-level `type` qualifier, and it removes any import specifiers with an inline `type` qualifier. | ||
|
||
The latter behavior does have one potentially surprising effect in that in certain cases TS can leave behind a "side effect" import at runtime: | ||
|
||
```ts | ||
import { type A, type B } from 'mod'; | ||
|
||
// is transpiled to | ||
|
||
import {} from 'mod'; | ||
// which is the same as | ||
import 'mod'; | ||
``` | ||
|
||
For the rare case of needing to import for side effects, this may be desirable - but for most cases you will not want to leave behind an unnecessary side effect import. | ||
|
||
## Examples | ||
|
||
This rule enforces that you use a top-level `type` qualifier for imports when it only imports specifiers with an inline `type` qualifier | ||
|
||
<!--tabs--> | ||
|
||
### ❌ Incorrect | ||
|
||
```ts | ||
import { type A } from 'mod'; | ||
import { type A as AA } from 'mod'; | ||
import { type A, type B } from 'mod'; | ||
import { type A as AA, type B as BB } from 'mod'; | ||
``` | ||
|
||
### ✅ Correct | ||
|
||
```ts | ||
import type { A } from 'mod'; | ||
import type { A as AA } from 'mod'; | ||
import type { A, B } from 'mod'; | ||
import type { A as AA, B as BB } from 'mod'; | ||
|
||
import T from 'mod'; | ||
import type T from 'mod'; | ||
|
||
import * as T from 'mod'; | ||
import type * as T from 'mod'; | ||
|
||
import { T } from 'mod'; | ||
import type { T } from 'mod'; | ||
import { T, U } from 'mod'; | ||
import type { T, U } from 'mod'; | ||
import { type T, U } from 'mod'; | ||
import { T, type U } from 'mod'; | ||
|
||
import type T, { U } from 'mod'; | ||
import T, { type U } from 'mod'; | ||
``` | ||
|
||
## When Not To Use It | ||
|
||
- If you want to leave behind side effect imports, then you shouldn't use this rule. | ||
- If you're not using TypeScript 5.0's `verbatimModuleSyntax` option, then you don't need this rule. | ||
|
||
## Related To | ||
|
||
- [`consistent-type-imports`](./consistent-type-imports.md) | ||
- [`import/consistent-type-specifier-style`](https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/consistent-type-specifier-style.md) | ||
- [`import/no-duplicates` with `{"prefer-inline": true}`](https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-duplicates.md#inline-type-imports) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
76 changes: 76 additions & 0 deletions
76
packages/eslint-plugin/src/rules/no-import-type-side-effects.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,76 @@ | ||
import type { TSESLint, TSESTree } from '@typescript-eslint/utils'; | ||
import { AST_NODE_TYPES } from '@typescript-eslint/utils'; | ||
|
||
import * as util from '../util'; | ||
|
||
type Options = []; | ||
type MessageIds = 'useTopLevelQualifier'; | ||
|
||
export default util.createRule<Options, MessageIds>({ | ||
name: 'no-import-type-side-effects', | ||
meta: { | ||
type: 'problem', | ||
docs: { | ||
description: | ||
'Enforce the use of top-level import type qualifier when an import only has specifiers with inline type qualifiers', | ||
recommended: false, | ||
}, | ||
fixable: 'code', | ||
messages: { | ||
useTopLevelQualifier: | ||
'TypeScript will only remove the inline type specifiers which will leave behind a side effect import at runtime. Convert this to a top-level type qualifier to properly remove the entire import.', | ||
}, | ||
schema: [], | ||
}, | ||
defaultOptions: [], | ||
create(context) { | ||
const sourceCode = context.getSourceCode(); | ||
return { | ||
'ImportDeclaration[importKind!="type"]'( | ||
node: TSESTree.ImportDeclaration, | ||
): void { | ||
const specifiers: TSESTree.ImportSpecifier[] = []; | ||
for (const specifier of node.specifiers) { | ||
if ( | ||
specifier.type !== AST_NODE_TYPES.ImportSpecifier || | ||
specifier.importKind !== 'type' | ||
) { | ||
return; | ||
} | ||
specifiers.push(specifier); | ||
} | ||
|
||
context.report({ | ||
node, | ||
messageId: 'useTopLevelQualifier', | ||
fix(fixer) { | ||
const fixes: TSESLint.RuleFix[] = []; | ||
for (const specifier of specifiers) { | ||
const qualifier = util.nullThrows( | ||
sourceCode.getFirstToken(specifier, util.isTypeKeyword), | ||
util.NullThrowsReasons.MissingToken( | ||
'type keyword', | ||
'import specifier', | ||
), | ||
); | ||
fixes.push( | ||
fixer.removeRange([ | ||
qualifier.range[0], | ||
specifier.imported.range[0], | ||
]), | ||
); | ||
} | ||
|
||
const importKeyword = util.nullThrows( | ||
sourceCode.getFirstToken(node, util.isImportKeyword), | ||
util.NullThrowsReasons.MissingToken('import keyword', 'import'), | ||
); | ||
fixes.push(fixer.insertTextAfter(importKeyword, ' type')); | ||
|
||
return fixes; | ||
}, | ||
}); | ||
}, | ||
}; | ||
}, | ||
}); |
44 changes: 44 additions & 0 deletions
44
packages/eslint-plugin/tests/rules/no-import-type-side-effects.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
import rule from '../../src/rules/no-import-type-side-effects'; | ||
import { RuleTester } from '../RuleTester'; | ||
|
||
const ruleTester = new RuleTester({ | ||
parser: '@typescript-eslint/parser', | ||
}); | ||
|
||
ruleTester.run('no-import-type-side-effects', rule, { | ||
valid: [ | ||
"import T from 'mod';", | ||
"import * as T from 'mod';", | ||
"import { T } from 'mod';", | ||
"import type { T } from 'mod';", | ||
"import type { T, U } from 'mod';", | ||
"import { type T, U } from 'mod';", | ||
"import { T, type U } from 'mod';", | ||
"import type T from 'mod';", | ||
"import type T, { U } from 'mod';", | ||
"import T, { type U } from 'mod';", | ||
"import type * as T from 'mod';", | ||
], | ||
invalid: [ | ||
{ | ||
code: "import { type A } from 'mod';", | ||
output: "import type { A } from 'mod';", | ||
errors: [{ messageId: 'useTopLevelQualifier' }], | ||
}, | ||
{ | ||
code: "import { type A as AA } from 'mod';", | ||
output: "import type { A as AA } from 'mod';", | ||
errors: [{ messageId: 'useTopLevelQualifier' }], | ||
}, | ||
{ | ||
code: "import { type A, type B } from 'mod';", | ||
output: "import type { A, B } from 'mod';", | ||
errors: [{ messageId: 'useTopLevelQualifier' }], | ||
}, | ||
{ | ||
code: "import { type A as AA, type B as BB } from 'mod';", | ||
output: "import type { A as AA, B as BB } from 'mod';", | ||
errors: [{ messageId: 'useTopLevelQualifier' }], | ||
}, | ||
], | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters