Question

我在create-react-app中使用custom-react-scripts-ts设置。

这是我的组件：

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

根据您的编辑器，可能有一个扩展名可以为您自动对导入语句进行排序。

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

1 个答案: