import/order doesn't work

[thany]

Let's say these are my imports:

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import ListIcons from 'FrontEndBase/components/molecules/lists/ListIcons';
import Heading from 'FrontEndBase/components/atoms/text/Heading';

This is the order I want. So, in my .eslintrc:

"import/order": "error"

And it correctly gives me no error on those imports. So far so good 😀

Next I try to make it spew out an error by mixing up my imports:

import ListIcons from 'FrontEndBase/components/molecules/lists/ListIcons';
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import Heading from 'FrontEndBase/components/atoms/text/Heading';

And still no error.
Wait. That's wrong. Imports 'react' and 'prop-types' do exist in node_modules and the others don't. So the ones that don't, should not be considered external and should not be allowed to be mixed in with external. So why are they? External should come first by default.

The imports are correctly processed, and the ones starting with FrontEndBase are definitely in our project, hence not external.

[ljharb]

The default ordering is https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/order.md#groups-array - ["builtin", "external", "parent", "sibling", "index"]

Thus, I would expect with these 4 modules that either "any order" is allowed, or, that the "FrontEndBase" ones come first.

Your OP is contradictory though, so I'm not sure what to expect:

So the ones that don't, should not be considered external and should not be allowed to be mixed in with external.

the ones starting with FrontEndBase are definitely in our project, hence not external.

If they're not external, then there's no ordering here to enforce. If they are, it's a bug. Which is it?

[thany]

They're not external, so it's fine if a block of project level imports remains unordered, but if I understand this plugin correctly it should separate them from builtin and externals.

So I would expect this plugin to separate the example imports down to two blocks: first block is react and prop-types, second block is the FrontEndBase ones. Currently it leaves them mixed like I mentioned, which doesn't seem to be the intension of this plugin.

[ljharb]

react and prop-types are not builtin modules; they're bare specifiers, just like the other two.

[thany]

Well, react and prop-types are in node_modules, and the other are elsewhere in the project. So they don't all qualify as the same type. There is definitely a distinction to be had, but the question is whether import/order can see that.

To rephrase this as a question: how can I make it possible to distinguish between the two?

[ljharb]

Per the docs, for non-builtin modules, you’d need to configure them as “internal” - where your resolver would determine that.

How are you setting them up so they’re “elsewhere in the project”?

[thany]

They are defined in our jsconfig.json. Is that what you mean?

[ljharb]

I’m not familiar with that file. Is that typescript?

[thany]

No, it's a way to tell an editor, or some tool that analyses code, how to deal with javascript files. In our case especially where to find imports.

Here's some documentation:
https://code.visualstudio.com/docs/languages/jsconfig

I'm not sure if it's specific to VScode, but to me it seems that it isn't.

[ljharb]

OK - then that file tells IDEs, but nothing else - which means it's effectively useless.

I'd suggest transforming paths with babel, so that everything picks it up - and then you can use a babel resolver for eslint-plugin-import.

[FDiskas]

I have TypeScript project and I'm using also https://www.npmjs.com/package/eslint-import-resolver-typescript

And settings like so NOT WORKS

    "import/order": [
      "error",
      {
        "newlines-between": "always",
        "groups": [["builtin", "external"], ["internal", "sibling", "parent", "index"]]
      }
    ],

I got

import { Dispatch, bindActionCreators } from 'redux';

import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { connect } from 'react-redux';
import { Text } from 'app/components';
import { variables } from 'app/styling/variables';
import ThankYou from 'assets/images/thank_you.svg';

interface ComponentProps {
  // ...
}

It should be like

import * as React from 'react';
import { Dispatch, bindActionCreators } from 'redux';
import { StyleSheet, View } from 'react-native';
import { connect } from 'react-redux';

import { Text } from 'app/components';
import { variables } from 'app/styling/variables';
import ThankYou from 'assets/images/thank_you.svg';

[FDiskas]

Ok false alarm, I should restart my IDE becouse I changed

"settings": {
    "import/parsers": {
...