Eslint-plugin-import: Add extensions order support for import/order

[atassis]

It would be nice to order imports based on their extension. For our case, we want to leave all css modules imported at the end of the imports list
import React from 'react'; import styles from '../styles.scss'; import CustomModule from './custom-module';
Here it is more preferable to warn us move styles after CustomModule

[fuko-fabio]

Would be perfect if we could add this feature. We have the same case with css files.

[rjhilgefort]

Would love to see this as well.

[Glinkis]

I thought this could be accomplished with the pathGroups option, like this:

"pathGroups": [
  {
    "pattern": "**/*.scss",
    "group": "index",
    "position": "after"
  }
]

But I can't seem to get this to work.

[Glinkis]

After some experimenting, this seems to do the trick:

"pathGroups": [
  {
    "pattern": "./*.scss",
    "group": "sibling",
    "position": "after"
  }
]

[zero-t4]

I thought this could be accomplished with the pathGroups option, like this:

"pathGroups": [
  {
    "pattern": "**/*.scss",
    "group": "index",
    "position": "after"
  }
]

But I can't seem to get this to work.

Im also stuck with it.
@ljharb Why this case does not work?

[constgen]

"**/*.scss" pattern will not match paths started with ./ and ../. It only matches paths like @/styles/index.css and styles/index.css. To make it work you have to use "{.,..}/**/*.css" pattern. For example my config looks like

"pathGroups": [
  {
    "pattern": "**/*.+(css|sass|less|scss|pcss|styl)",
    "patternOptions": {"dot": true, "nocomment": true},
    "group": "unknown",
    "position": "after"
  },
  {
    "pattern": "{.,..}/**/*.+(css|sass|less|scss|pcss|styl)",
    "patternOptions": {"dot": true, "nocomment": true},
    "group": "unknown",
    "position": "after"
  }
],

Used 2 patterns to cover all cases

[itayganor]

"**/*.scss" pattern will not match paths started with ./ and ../. It only matches paths like @/styles/index.css and styles/index.css. To make it work you have to use "{.,..}/**/*.css" pattern. For example my config looks like

"pathGroups": [
  {
    "pattern": "**/*.+(css|sass|less|scss|pcss|styl)",
    "patternOptions": {"dot": true, "nocomment": true},
    "group": "unknown",
    "position": "after"
  },
  {
    "pattern": "{.,..}/**/*.+(css|sass|less|scss|pcss|styl)",
    "patternOptions": {"dot": true, "nocomment": true},
    "group": "unknown",
    "position": "after"
  }
],

Used 2 patterns to cover all cases

Nice, I've been using the following pattern lately:

{.,..}/**/*.{less,css,scss}

But I have some imports that start with ../../ and this glob won't match :(
Do you have any idea how to match everything with a file extension?

This is frustrating

[ljharb]

**/*.*?

[constgen]

Unfortunately this is a known problem of Minimatch. And the solution is ugly - list all possible "up" paths (1,2,3,4,5... levels up)
https://github.com/atomspace/atomspace-eslint/blob/master/src/configs/import.config.json#L104
And keep finger crossed that the project structure will be not very deep

[MoradiDavijani]

To solve this, you can set matchBase property in patternOptions.

{
  pathGroups: [
  {
    pattern: '*.scss',
    group: 'index',
    patternOptions: { matchBase: true },
    position: 'after'
  ]
}

[itayganor]

@MoradiDavijani This is amazing. You made my day ❤️

[yuri-sakharov]

Doesn't work for me (typescript project)

"import/order": ["error", {
            "groups": ["external", ["internal", "parent", "sibling", "index"], "unknown"],
            "pathGroups": [
                {
                    "pattern": "*.scss",
                    "patternOptions": { "matchBase": true },
                    "group": "unknown",
                    "position": "after"
                }
            ],
            "pathGroupsExcludedImportTypes": [],
            "newlines-between": "always"
        }],

expected .scss in bottom but result is still same.

import './AvatarsGroup.scss';
import { Avatar } from 'components/Avatar';
import { PlusIndicator } from 'components/PlusIndicator';

Any ideas?

[ljharb]

@yuri-sakharov you may also need to set up the import/extensions settings as described in the readme.

[constgen]

@yuri-sakharov this is expected to work so. You faced a completely different issue. There are already several opened tickets for this https://github.com/benmosher/eslint-plugin-import/issues?q=is%3Aissue+is%3Aopen+side+effect+label%3A%22import%2Fexport+ordering%22+