eslint-plugin-sort-imports-es6-autofix
eslint-plugin-sort-imports-es6-autofix copied to clipboard
Add support for `allowSeparatedGroups` option
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
.
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!