TSLint: ordered-imports configuration

Question

I'm trying to configure my TSLint rule ordered-imports to get the import order looking like this:

// React
import React from 'react';
import { View } from 'react-native';

// Libs
import * as _ from 'lodash';
import * as moment from 'moment';

// Internal libs
import Bar from '@app/bar';
import Foo from '@app/foo';

// Relative paths
import { Element } from './my-element';
import MyFunction from './my-function';

This is the rule I've tried to create but I still can't get to a point where the above works.

I don't seem to be able to match with absolute imports other than react ones, I've tried to use null as well as non-react match like ^!react but it doesn't work.

This is my rules

{
  "ordered-imports": [
      true,
      {
        "module-source-path": "full",
        "grouped-imports": true,
        "groups": [
          {
            "name": "react",
            "match": "^react",
            "order": 1
          },
          {
            "name": "node_modules",
            "match": null,
            "order": 2
          },
          {
            "name": "internal modules",
            "match": "^@app",
            "order": 3
          },
          {
            "name": "relative dir",
            "match": "^[.]",
            "order": 4
          }
        ]
      }
    ]
}

Can someone help me figuring out what I'm doing wrong?

Thanks

Disunite

Answer 1

Does this work for you?

{
  "rules": {
    "ordered-imports": [
      true,
      {
        "module-source-path": "full",
        "grouped-imports": true,
        "groups": [
          {
            "name": "react",
            "match": "^react.*",
            "order": 1
          },
          {
            "name": "internal modules",
            "match": "^@app.*",
            "order": 3
          },
          {
            "name": "relative dir",
            "match": "^[.].*",
            "order": 4
          },
          {
            "name": "node_modules",
            "match": ".*",
            "order": 2
          }
        ]
      }
    ]
  }
}

Two changes:

• Moved the 'null' matcher to the end of the list, so it's always matched only if no others are
• Added .* to the end of all the matchers. 🤷‍♂️

Marmara

Great! Took me some time to realise that you don't have to define your groups in the order that you want the imports. – Abrasive

This is perfectly working for me for my Angular application. With a small change from ^react.* to `^@angular.* – Maggoty

Answer 2

 "groups": [
      { "name": "react", "match": "^react.*", "order": 1 },
      { "name": "pacakges", "match": "^app.*", "order": 20 },
      { "name": "components", "match": "^@.*", "order": 30 },
      { "name": "parent_dir", "match": "^\\.\\.", "order": 40 },
      { "name": "current_dir", "match": "^\\.", "order": 50 },
      { "name": "extra", "match": ".*", "order": 5 }
    ]

Bethlehem