you - Cómo ordenar importaciones con la regla de orden de importación de tslint

metodo konmari you tube

Question

En mi proyecto se usa la regla "orden de importación" de 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 no está contento con este pedido y se bloquea con un error

[2, 1]: Las fuentes de importación dentro de un grupo deben estar alfabetizadas.
[4, 1]: Las fuentes de importación dentro de un grupo deben estar alfabetizadas.

Esta página no ayudó mucho, he intentado colocar las importaciones de muchas maneras diferentes pero sin suerte. ¿Qué orden será la correcta?

Answer 1

En el archivo tslint.json agregar

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

Por ejemplo, el archivo tslint.json se verá así

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

Answer 2

Este error también ocurre si no se agrega una nueva línea vacía como separación entre grupos de importaciones.

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

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

También note si el error dice así:

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

Esto significa que en el archivo especificado vaya a la línea # 5 y presione Entrar para agregar una nueva línea vacía como separador.

Hice eso y esto resolvió mi problema. Para más referencia sobre este tema revise esta page

Answer 3

Estoy de acuerdo en que es confuso. El problema es que las comparaciones de la cadena de origen incluyen las partes ../.. de los nombres de los módulos, por lo que para apaciguar la regla, debe ordenarlas de la siguiente manera:

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

La regla tiene dos partes y se puede configurar para hacer cumplir los pedidos de los nombres y fuentes de importación por separado. Para hacer cumplir solo el orden de los nombres, puede usar una configuración como esta:

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

Eso generaría un error para importaciones como esta:

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

pero no obligaría a ordenar las rutas de los módulos, etc.