Import sources within a group must be alphabetized

Question

seems like I don't know the alphabet. Please tell me where this is not ordered:

import * as React from 'react';
import {
  Badge,
  Button,
  ButtonGroup,
  Collapse,
  Dropdown,
  DropdownItem,
  DropdownMenu,
  DropdownToggle,
  Input,
  InputGroup,
  InputGroupAddon,
  Nav,
  Navbar,
  NavbarBrand,
  NavItem,
  NavLink,
  UncontrolledAlert,
} from 'reactstrap';
import {logoutUser} from '../actions/user';
import {positionSidebar,toggleSidebar,toggleVisibilitySidebar} from '../actions/navigation';

import s from './Header.scss';

import sender1 from '../../images/1.png';
import sender2 from '../../images/2.png';
import sender3 from '../../images/3.png';

It gave me the error at line 22: "Import sources within a group must be alphabetized." (import {positionSidebar....) But They are correctly ordered!! (or maybe I have to return to school :( ).

I tried to disable this stupid alphabetical order: but I could not either:

 "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
 "ordered-imports": [true, {
   "import-sources-order": "any",
   "named-imports-order": "any",
   "grouped-imports": false,
   "module-source-path": "basename"
 }]

That doesn't work and the error repeat. I would post it on github but there are lots of posts about this and maybe it is not a bug. If you think it is bug, tell me and I will post it there.

My tslint imports:

"tslint": "^5.7.0",
"tslint-config-prettier": "^1.10.0",
"tslint-react": "^3.2.0",

Answer 1

The ordering lint error is not on the individual named imports, but rather the file paths:

import {logoutUser} from '../actions/user';
import {positionSidebar,toggleSidebar,toggleVisibilitySidebar} from '../actions/navigation';

The filepaths are also used as part of the ordering, and should be:

'../actions/navigation';
'../actions/user';

You can disable import ordering entirely using this tslint config:

"ordered-imports": false