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",

Ergener

What's the error exactly? – Woodborer

the rule for ordered imports in tslint is called ordered-imports, not object-literal-sort-keys – Chelsiechelsy

@Chelsiechelsy Ok thanks. I will try too "ordered-imports" in fact I read something about that but I didn't test it. – Ergener

@Nunicorn The error is in line 22: Groups must be order alphabeticaly – Ergener

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

Chelsiechelsy

But which has more importance: imports or paths? I thought: "logoutUser starts with "l", positionSidebar starts with "p". So first logoutUser, then positionSidebar" I also read about the paths but I can't understand what I should check first and it has no logic for me u.u – Ergener

i believe that the named imports in the braces are only ordered against other named imports in the same set - so logoutUser is not ordered against positionSidebar. You can also disable these settings, here are the related docs: palantir.github.io/tslint/rules/ordered-imports – Chelsiechelsy

Hello, I did what u said and I also put: "module-source-path": "basename" (false is not a valid value) but the error continues. – Ergener

Please someone tell me how to disable import order. I've been stuck for days. It is imposible to understand what is the correct order. Seriously nothing works... – Ergener

If you know that the paths are ordered correctly and you're still seeing the error, one way to get around it is by renaming the culprit file and changing it back to the original. That got rid of the error for me. – Uncertain

Answer 2

If someone is so silly as me, I searched in google for alphabetical order and copy paste my imports into the tool. I link you the one I used but maybe in the time the page is down. Just search "order alphabeticaly" or something like that and there will be pages that do that for sure.

Be aware. As @hackerrdave said: Sometimes the problem is with paths and not imports (I noticed paths command when you import something with brackets {} or *) so maybe you will have to order the paths and not the imports.

https://alphabetizer.flap.tv/

Ergener