ljosberinn / eslint-config-galex

hopefully the last eslint config you'll ever need - customizable & modern best practices for JS, TS, Node, React, Remix, Next, Jest, testing-library & storybook
https://www.npmjs.com/package/eslint-config-galex
MIT License
174 stars 9 forks source link

v5 #780

Open ljosberinn opened 4 months ago

ljosberinn commented 4 months ago

What needs to be done is:

Originally posted by @ljosberinn in https://github.com/ljosberinn/eslint-config-galex/discussions/779#discussioncomment-9381384

axelboc commented 4 months ago

Thought I'd share some learnings that may be helpful when you upgrade TypeScript and @typescript-eslint/eslint-plugin (no rush πŸ˜‰).

TypeScript has deprecated importsNotUsedAsValues since v5. I initially thought the replacement for this was verbatimModuleSyntax but turns out it's a bit more complex because importsNotUsedAsValues was never meant to be used to enforce the import type ... code style in the first place ... and neither is verbatimModuleSyntax.

The recommendation from this article seems to be to remove importsNotUsedAsValues and verbatimModuleSyntax altogether from tsconfig.json and to use ESLint rules instead.

Moreover, with inline type qualifiers, the best practice for dealing with type imports seems to have changed a bit, in particular when it comes to duplicate imports. Here is what I think we should aim for:

  1. Enforce the use of type qualifiers for type-only imports:

    // Correct
    import { type Foo } from './utils'
    const foo: Foo = 1;
    
    // Incorrect
    import { Foo } from './utils'
    const foo: Foo = 1;
  2. Enforce the use of inline type qualifiers for type-only imports (note that statements that contain only inline type imports are correctly removed by tsc when verbatimModuleSyntax is disabled):

    // Correct
    import { type Foo } from './utils'
    
    // Incorrect
    import type { Foo } from './utils'
  3. Never allow duplicate imports, even when types are involved, thanks again to inline type qualifiers:

    // Correct
    import { Bar, type Foo } from './utils'
    
    // Incorrect
    import { Bar } from './utils'
    import type { Foo } from './utils'
    
    // Incorrect
    import { Bar } from './utils'
    import { type Foo } from './utils'

From what I gather, this would be achieved with the following rules:

I think rule import/consistent-type-specifier-style, which is enabled by Galex with { 'prefer-inline': true }, should then be disabled, as I think it does the same thing as { fixStyle: 'inline-type-imports' } in @typescript-eslint/consistent-type-imports.