Wrong grouping of imports?

[ghost]

Hi I have these imports:

import moment, { Moment } from 'moment'
import React, { Component } from 'react'
import { Text, View } from 'react-native'

import * as GQL from '@gql-schema'
import { Texts } from '@styles/common/Texts'
import { ToggleItem } from '@ui/Section'
import { amountWithCurrency } from '@util/amountFormatter'

import { GraphColumns } from './GraphColumns'
import { styles } from './styles'

Sort plugin reports them as wrong and it will correct them to the:

import { Texts } from '@styles/common/Texts'
import moment, { Moment } from 'moment'
import React, { Component } from 'react'
import { Text, View } from 'react-native'

import * as GQL from '@gql-schema'
import { ToggleItem } from '@ui/Section'
import { amountWithCurrency } from '@util/amountFormatter'

import { GraphColumns } from './GraphColumns'
import { styles } from './styles'

i would expect all imports starting with @ to be in same group. Could you provide explanation how this was sorted?
Thank you

[lydell]

Hi!

The plugin identifies three groups of imports in your piece of code:

• The top-most group: Imports that are (start with) valid npm package names.
• The bottom-most group: Relative imports.
• The middle group: Everything else.

The stuff in the middle group aren’t relative imports, because they don’t start with a .. They aren’t valid npm package names either:

• @ui/Section and @util/amountFormatter container uppercase letters. That’s not allowed in npm package names.
• @gql-schema contains a “non URL friendly” character: @. That’s not allowed in npm packages. And it does not contain /foo at the end, so it does not count as a scoped package either.

@styles/common/Texts, on the other hand, is importing the Texts module from the npm package @styles/common (which probably doesn’t exist, but is a valid name).

The sorting and grouping is explained in more detail here: https://github.com/lydell/eslint-plugin-simple-import-sort#sort-order

I suspect that the imports starting with @ in your case aren’t really npm packages, but refer to local code? And you’ve set up TypeScript or webpack or whatever to find your code at @gql-schema, @styles and @ui? If so, you might be interested in #18.

If you have any ideas on how to improve this besides #18, let me know! Do keep in mind though that I’m trying hard to avoid adding options to this plugin.

[ghost]

Thank you for your quick explanation. I am looking forward to when #18 will get implemented.

Also about group sorting in readme - I read it before but it was not clear to me that it will sort it like in my example above, because in my head my aliased package names are not npm packages

[lydell]

because in my head my aliased package names are not npm packages

I see! To all tools/programs, though, they are, because how would they know? That’s why I’m hoping that the tsconfig.json/jsconfig.json approach in #18 will be good – it will allow many tools/programs at once to know your setup without having to configure all of them separately.

[lydell]

v5.0.0 has just been released, and it groups '@ui/Section' and
'@util/amountFormatter' into the “packages” group (even though they contain
uppercase characters), because they do look like npm package names, just like
you say.

v5.0.0 also has a groups option that should allow you to achieve the grouping
you want. See
custom grouping.

For example:

{
  "rules": {
    "simple-import-sort/sort": [
      "error",
      {
        "groups": [
          ["^\\u0000"],
          ["^@?\\w"],
          ["^(@gql-schema|@ui|@util|@styles)(/.*|$)"],
          ["^\\."]
        ]
      }
    ]
  }
}