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

Question

我正在使用带有custom-react-scripts-ts 的create-react-app 设置。

这是我的组件：

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;

这是我得到的编译失败错误：

(7,1)：组内的导入源必须按字母顺序排列。

这是我正在使用的tslint.json 文件：

{
  "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"]
  }
}

据我所知，导入的顺序还可以。为什么编译失败？

Answer 1

查看https://stackoverflow.com/a/41841149/7977208以获得更完整的答案

您可以尝试通过将其添加到您的 tslint 规则对象来覆盖该规则。

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

或者，将导入移到第 7 行

import { Provider } from "mobx-react";

到导入组的底部，这应该符合规则

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

按字母顺序，在这种情况下，'.'出现在“m”之前。

根据您的编辑器，可能有一个扩展可用于自动为您的导入语句排序。