Stricter ordering of imports

[hyoban]

Clear and concise description of the problem

In some cases, users may cause the ordering of imports to change, either through manual adjustment or the editor's Organize imports feature. The current sorting rules import/order and sort-imports are not enough to unify the sorting style, which is unstable for git diff.

I am willing to submit a pull request for this change.

Suggested solution

Bring in eslint-plugin-simple-import-sort.

Alternative

Additional context

• Difference with import/order
• Is sorting imports/exports safe?

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[thenbe]

This repo includes perfectionist, but you have to enable the rules manually. For example:

  {
    name: 'my-global-rules',
    rules: {
      'import/order': 'off', // handled by perfectionist
      'sort-imports': 'off', // handled by perfectionist
      'perfectionist/sort-imports': 'error',
      'perfectionist/sort-named-imports': 'error',
      'perfectionist/sort-exports': 'error',
    },
  }

I don't know how it compares to eslint-plugin-simple-import-sort, but it's much better than the vanilla rules (import/order and sort-imports) when it comes to consistency (for git diffs).

[hyoban]

Thanks for the reminder. This should also be an option. There is no need to introduce additional plug-ins now.

[antfu]

Would you share some examples of the result of reach rule? To me, the current state seems to work fine.

[thenbe]

the current state seems to work fine.

I don't quite remember the details, but there were scenarios where the vanilla sort rules would not handle, whereas the alternative rules from perfectionist was able to handle.

It's been a while, but I think this was my main issue with it: import-js/eslint-plugin-import#1787

[hyoban]

Close as it may not be a good idea. If you want it, you can try to use eslint-plugin-perfectionist or eslint-plugin-simple-import-sort.

Example of how to use eslint-plugin-simple-import-sort:

import antfu from '@antfu/eslint-config'
import simpleImportSort from 'eslint-plugin-simple-import-sort'

export default antfu(
  {},
  {
    plugins: {
      'simple-import-sort': simpleImportSort,
    },
    rules: {
      'import/order': 'off',
      'sort-imports': 'off',
      'simple-import-sort/imports': 'error',
      'simple-import-sort/exports': 'error',
    },
  },
)

[JohnCampionJr]

Hoping maybe this will help someone out who like me wants to use perfectionist but didn't understand why the above config didn't do much. The default perfectionist sort-imports doesn't define any groups. So my config pulls in the rules from the natural sort config.

https://gist.github.com/JohnCampionJr/a082f8967dd6341c41d923ad8502e999

[JohnCampionJr]

@antfu Would you be amenable to a PR adding an option to enable import sorting by perfectionist?

Basically make this available by option (could be set to alpha, natural or line length) per perfectionist settings

rules: {
      'import/order': 'off', // handled by perfectionist
      'sort-imports': 'off', // handled by perfectionist
      'perfectionist/sort-imports': perfectionistNatural.rules['perfectionist/sort-imports'],
      'perfectionist/sort-exports': perfectionistNatural.rules['perfectionist/sort-exports'],
      'perfectionist/sort-named-imports': perfectionistNatural.rules['perfectionist/sort-named-imports'],
      'perfectionist/sort-named-exports': perfectionistNatural.rules['perfectionist/sort-named-exports'],
    },

[mefengl]

@JohnCampionJr

My approach is to install perfectionist separately and then use its recommend rules like this:

import antfu from '@antfu/eslint-config'
import perfectionist from 'eslint-plugin-perfectionist'

export default antfu(
  // perfectionist
  {
    rules: {
      'import/order': 'off',
      ...perfectionist.configs['recommended-natural'].rules,
    },
  },
)