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”之前。

根據您的編輯器的不同，可能會有一個擴展名可以為您自動對導入語句進行排序。