如何使用 tslint 的导入排序规则对导入进行排序

Posted 2023-03-13

【中文标题】如何使用 tslint 的导入排序规则对导入进行排序

【英文标题】：How to order imports with tslint's import-ordering rule

【发布时间】：2017-06-07 22:13:15

【问题描述】：

在我的项目中使用了 tslint 的“导入排序”规则

import CopyLensModal from './CopyLensModal';
import FetchStatus from '../../../../../state/generic/models/FetchStatus';
import FlexRow from '../../../../generic/components/FlexRow';
import Geofilter from '../../../../../state/geofilter/models/Geofilter';
import Input from '../../../../generic/components/Input';

import * as React from 'react';
import * as salert from 'sweetalert';

import  func  from '../../../../../types/func';
import  Iterable  from 'immutable';
import  Button  from 'react-bootstrap';

tslint 对此命令不满意并因错误而崩溃

[2, 1]：组内的导入源必须按字母顺序排列。 [4, 1]：组内的导入源必须按字母顺序排列。

This page 并没有太大帮助，我尝试以多种不同的方式放置导入，但没有运气。哪个顺序是正确的？

【问题讨论】：

ordered-imports 规则有许多可配置的选项。如果不包括您的规则配置，这个问题就无法真正回答。

"ordered-imports": [true],

没有阻止接口前缀 I 的规则那么糟糕，但它肯定是一个卑鄙的实现。

我想知道 - 这个规则有什么用处？

【参考方案1】：

我同意这令人困惑。问题是源字符串比较包括模块名称的../.. 部分，因此为了安抚规则，您需要像这样对它们进行排序：

import FetchStatus   from '../../../../../state/generic/models/FetchStatus';
import Geofilter     from '../../../../../state/geofilter/models/Geofilter';
import FlexRow       from '../../../../generic/components/FlexRow';
import Input         from '../../../../generic/components/Input';
import CopyLensModal from './CopyLensModal';

该规则有两个部分，可以配置为分别强制导入名称和来源的顺序。要仅强制执行名称的排序，您可以使用如下配置：

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

这样的导入会引发错误：

import  A, C, B  from 'some-module';

但不会强制对模块路径等进行排序。

【讨论】：

谢谢！如此混乱。我以为我暂时失去了对字母表的控制

请注意，还有一个module-source-path 可以设置为basename，而不是默认的full 选项。这将忽略 ../.. 部分。

如果您使用 VSCode 和 TS 2.8，您可以使用 Organize Imports 轻松排序和清理您的导入 :)

一直以来，我都在努力让订单正常工作，我一直在想一定有办法让它自动化。谢谢@kyw

@kyw 看起来不适用于“组内”，例如所有 node_modules 导入组和我自己的文件导入组。这个内置的任何解决方案？

【参考方案2】：

如果没有添加空的新行作为导入组之间的分隔，也会发生此错误。

import * as fs from 'fs';
import * as os from 'os';

import * as bar from './bar';
import * as foo from './foo';

还要注意错误是否是这样的：

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

这意味着在指定的文件中转到第 5 行并按 Enter 以在其中添加一个新的空行作为分隔符。

我这样做了，这解决了我的问题。有关此问题的更多参考，请查看此page

【讨论】：

收到Imports from this module are not allowed in this group. 因为新行问题。通过在组之间添加新行来修复

【参考方案3】：

在文件tslint.json添加

  "rules": 
    "ordered-imports": [false],
    "object-literal-sort-keys": [false]
  

例如，文件tslint.json 将如下所示

  "extends": [
    "tslint:recommended",
    "tslint-react",
    "tslint-config-prettier"
  ],
  "linterOptions": 
    "exclude": [
      "config/**/*.js",
      "node_modules/**/*.ts",
      "coverage/lcov-report/*.js"
    ]
  ,
  "rules": 
    "ordered-imports": [false],
    "object-literal-sort-keys": [false]
  

【讨论】：

也不要重新启动前端服务器。热重新加载时我看不到更改。

因为在app之外的目录发生了变化，需要重启才能生效。