tslint-组中的导入源必须按字母顺序排列

Question

I am using a create-react-app setup with custom-react-scripts-ts .

This is my component:

import * as React from "react";
import "./App.css"; // reset.css

import ErrorsContainer from "./components/Error/Container";
import Header from "./components/Header";
import { initStores } from "./stores";
import { Provider } from "mobx-react";
import typography from "./utils/typography";

// font styles
typography.injectStyles();

class App extends React.Component {
  public onErrorDismiss = () => {
    return null;
  };

  public render() {
    return (
      <Provider {...initStores()}>
        <div className="App">
          <Header foo="string" />
          <ErrorsContainer />
        </div>
      </Provider>
    );
  }
}

export default App;

This is the failed to compile error I am getting:

(7,1): Import sources within a group must be alphabetized.

This is the tslint.json file I am using:

{
  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
  "linterOptions": {
    "exclude": [
      "config/**/*.js",
      "node_modules/**/*.ts",
      "coverage/lcov-report/*.js"
    ]
  },
  "rules": {
    "interface-name": [true, "never-prefix"]
  }
}

As far as I can tell the order of the imports is OK. Why is this failing to compile?

Answer 1

See https://stackoverflow.com/a/41841149/7977208 for a more complete answer

You may try to override the rule by adding this to your tslint rules object.

"ordered-imports": [true, {
   "import-sources-order": "any",
   "named-imports-order": "case-insensitive"
}]

or alternatively, move the import on line 7

import { Provider } from "mobx-react";

to the bottom of the import group, which should appease the rule

import ErrorsContainer from "./components/Error/Container";
import Header from "./components/Header";
import { initStores } from "./stores";
import typography from "./utils/typography";
import { Provider } from "mobx-react";

Alphabetically, in this context, '.' comes before 'm'.

Depending on your editor, there's probably an extension available to automatically sort your import statements for you.