mskelton / eslint-plugin-sort

Auto-fixable sort rules for ESLint.
https://www.npmjs.com/package/eslint-plugin-sort
ISC License
24 stars 1 forks source link

`sort/import` default is not good. #25

Closed artidataio closed 2 years ago

artidataio commented 2 years ago

First of all, this package is so underrated. The sorting works. I like it.

Perhaps, the sort/import rule default was a bummer. It has butchered my imports in the worst possible way. I wanted to turn it off, but as I look at the docs, there is the group option. That one, I really like it as well. Maybe the group option should be the default?

Is it possible to add react group? Where I can put react at the top?

mskelton commented 2 years ago

Thanks for the kind words 🙂

Perhaps, the sort/import rule default was a bummer.

The main reason I didn't add a default is I don't know the various sorting preferences of different people and want to leave it up to them rather than enforcing something specific.

Is it possible to add react group? Where I can put react at the top?

Do you mean always having react as the first import? If so, you could add a sort group with a regex expression to target react and set it's order to 1.

{ "regex": "^react$", "order": 1 }
artidataio commented 2 years ago

Can you double check on this:

"sort/imports": [
    "warn",
    {
      "groups": [
        {
          "type": "side-effect",
          "order": 3
        },
        {
          "regex": "\\.(png|jpg|svg)$",
          "order": 5
        },
        {
          "type": "dependency",
          "order": 2
        },
        {
          "type": "other",
          "order": 4
        },
        { "regex": "^react$", 
          "order": 1 
        }
      ]
    }
  ]

As It doesn't put react to the top.

mskelton commented 2 years ago

Group order is extremely important and the reason why your example isn't working. When the plugin determines which sort group an import falls in, it will match sort groups top to bottom in the array and use the first matching sort group. In your example, a react import will be captured by the dependency sort group, so it will never get to the regex sort group your defined.

If you configure your sort groups like this it will work.

"sort/imports": [
    "warn",
    {
      "groups": [
        {
          "type": "side-effect",
          "order": 3
        },
        {
          "regex": "\\.(png|jpg|svg)$",
          "order": 5
        },
        { "regex": "^react$", 
          "order": 1 
        },
        {
          "type": "dependency",
          "order": 2
        },
        {
          "type": "other",
          "order": 4
        }
      ]
    }
  ]

https://github.com/mskelton/eslint-plugin-sort/blob/main/docs/rules/imports.md#group-order

artidataio commented 2 years ago

The groups' order is important. Noted. the code works too. I'm closing this.