eslint-plugin-sort-imports-es6-autofix icon indicating copy to clipboard operation
eslint-plugin-sort-imports-es6-autofix copied to clipboard

Add support for `allowSeparatedGroups` option

Open kylerjensen opened this issue 3 years ago • 1 comments

It appears that this plugin doesn't respect or allow the use of the allowSeparatedGroups option. I expect the plugin to collapse import groups and remove unnecessary newlines by default, and only retain them when I set this option to true.

kylerjensen avatar Oct 01 '20 08:10 kylerjensen

I really would like to see this too! It would outperform eslint's sort-imports rule. Currently, I actually prioritise group separation over alphabetisation. I love the autofix you offer, but on the other hands, not fixing separated groups creates conflicts between the the plugin and import/order

This is one real scenario:

import App from './App'; // [2 warning/errors]: There should be at least one empty line between import groups => eslint (import/order) + `./App` import should occur after import of `react-dom`" => eslint (import/order)
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Autofixing, turns it into:

import React from 'react';
import ReactDOM from 'react-dom'; // [1 warning/error]: There should be at least one empty line between import groups => eslint (import/order)
import App from './App'; // [2 warnings/errors]: Imports should be sorted alphabetically => both eslint(sort-imports) and eslint(sort-imports-es6-autofix/sort-imports-es6).
import './index.css';

Before installing your plugin I would get those missing empty lines between groups automatically fixed. That seems to have been lost with the plugin.

My relevant eslint rules are:

{
  "sort-imports": [
    "warn",
    {
      "ignoreCase": true,
      "ignoreDeclarationSort": false,
      "ignoreMemberSort": false,
      "memberSyntaxSortOrder": [
        "all",
        "multiple",
        "single",
        "none"
      ],
      "allowSeparatedGroups": true
    }
  ],
  "sort-imports-es6-autofix/sort-imports-es6": [
    "warn",
    {
      "ignoreCase": false,
      "ignoreMemberSort": false,
      "memberSyntaxSortOrder": [
        "all",
        "multiple",
        "single",
        "none"
      ]
    }
  ],
  "import/order": [
    "warn",
    {
      "groups": [
        "builtin",
        "external",
        [
          "parent",
          "sibling"
        ],
        "index"
      ],
      "newlines-between": "always",
      "alphabetize": {
        "order": "ignore",
        "caseInsensitive": true
      }
    }
  ]
}

Without your plugin, any of the above cases would result in this:

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';
import './index.css';

But I wouldn't have autofix for this (I expect 'single' before 'none')

import './index.css';
import App from './App'; // Expected 'single' syntax before 'none' syntax.eslint (sort-imports)

Desired behaviour:

Given this:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

Turn it into this (with autofix):

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';
import './index.css';

Is it something I'm overseeing here or it's just because you don't support allowSeparatedGroups?

Thank you!

GBrachetta avatar Apr 25 '21 19:04 GBrachetta