Usar ESLint para pedidos de importación de TypeScript

Este artículo discutirá cómo usar ESLint para diseñar u ordenar su sección de importaciones fácilmente. Se discutirán las reglas ordenar-importar e importar/ordenar en ESLint.

Usar ESLint para pedidos de importación de TypeScript

Un código limpio siempre es mejor; motiva futuras contribuciones y mantenimiento. Por lo tanto, mantener convenciones de código coherentes y estilos de formato son aspectos importantes.

El análisis de código estático también es beneficioso para lenguajes interpretados como JavaScript o TypeScript. Le ayudará a identificar errores por adelantado.

Los linters ayudan a identificar este tipo de problemas estilísticos y programáticos.

El ESLint es uno de los linter ampliamente utilizados. Se ha utilizado para identificar problemas de estilo de código TypeScript y solucionarlos.

En proyectos más grandes, uno de los principales problemas de estilo es administrar las importaciones. Los desarrolladores vienen y contribuyen al código base con frecuencia.

Agregan nuevas declaraciones de importación, y la sección crece. ESLint se puede utilizar para organizar la sección de importaciones de forma más limpia.

Regla ESLint sort-imports para el orden de importación de TypeScript

El archivo de configuración de ESLint se puede usar para agregar reglas personalizadas. Por lo general, se denomina archivo eslintrc, que consta de reglas con formato JSON, como se muestra a continuación.

Obtener varias importaciones facilita la vida del desarrollador si se han ordenado alfabéticamente. También facilitará la búsqueda de miembros específicos dentro de la sección importar.

La regla ESLint sort-imports con algunas configuraciones personalizadas cumplirá con esto.

Supongamos que obtuvimos las declaraciones de importación, como se muestra a continuación.

import 'module-1.js';
import * as employee from 'employee.js';
import * as company from 'company.js';
import {supervisor, agent} from 'company-context.js';
import {job, designation } from 'company-context-2.js';
import {bearer} from 'bearer.js';
import agent from 'agent.js';

import divide from 'utildivide.js';
import subscription from 'utilsub.js';
import add from 'utiladd.js';

A continuación, podemos agregar la regla sort-imports en el archivo de configuración de ESLint, como se muestra a continuación.

"rules": {
        "sort-imports": ["error", {
            "ignoreCase": true,
            "ignoreDeclarationSort": false,
            "ignoreMemberSort": false,
            "memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
            "allowSeparatedGroups": false
        }]
    },

La regla sort-imports puede generar tanto los tipos error como warning. Aparte de eso, tiene otros parámetros opcionales que se pueden configurar de acuerdo a su necesidad.

El parámetro ignoreCase se puede establecer en true si desea que ESLint ignore el caso y el orden de las importaciones. Puede ejecutar el siguiente comando en ESLint para verificar las importaciones.

npm run lint

Esto generaría errores en el script de ejemplo anterior porque no se ha ordenado correctamente. Si pasa el indicador --fix con el comando anterior, ESLint solucionará los problemas en sus importaciones.

npm run lint --fix

Por lo tanto, la versión correcta de las importaciones anteriores sería similar a la siguiente.

import 'module-1.js';
import * as company from 'company.js';
import * as employee from 'employee.js';

import {agent, supervisor} from 'company-context.js';
import {designation, job} from 'company-context-2.js';
import agent from 'agent.js';
import {bearer} from 'bearer.js';

import add from 'utiladd.js';
import divide from 'utildivide.js';
import subscription from 'utilsub.js';

Clasifica estas importaciones según el siguiente orden.

1. Sintaxis de miembro de usuario
2. Clasificación alfabética por el primer miembro o alias

Regla ESLint importar/pedir para pedidos de importación de TypeScript

La regla importar/ordenar es más poderosa que la regla ordenar-importar que discutimos anteriormente. Esto ofrece una variedad de opciones para ordenar nuestras importaciones en función de la naturaleza del módulo, como módulo incorporado, módulo externo, módulo principal, etc.

Por lo tanto, esto es más avanzado que el ordenamiento alfabético que vimos en la regla sort-imports.

Para conectar esto a nuestro ESLint, debemos instalar el complemento eslint-plugin-import. Ejecutemos el comando npm i para instalarlo en nuestro proyecto, como se muestra a continuación.

npm i eslint-plugin-import --save-dev

El --save-dev guardará esta dependencia en el archivo package.json de nuestro proyecto. Ahora, podemos usar la regla importar/ordenar en nuestro archivo de configuración de ESLint, como se muestra a continuación.

"rules": {
        "import/order": ["error",
            { "groups" :
            [
                "external",
                "builtin",
                "internal",
                "sibling",
                "parent",
                "index"
            ]
            }
        ]
    },

La sección de grupos se ha configurado para ordenar las importaciones primero por módulos externos, luego los módulos incorporados, y así sucesivamente. Por lo tanto, la siguiente es una sección de importación válida.

// "external" modules
import _ from 'lodash';
import express from 'express';
// "builtin" modules
import fs from 'fs';
import path from 'path';
// "internal" modules
import employee from 'src/employee';
// "sibling" modules
import netsalary from './payrole';
import epf from './payrole/epf';
// modules from a "parent" directory
import admin from '../admin';
import role from '../../admin/role';
// 6. "index" file
import main from './';

La sección de importación anterior es válida según las configuraciones de ESLint.

Por lo tanto, ESLint se puede usar para diseñar u ordenar fácilmente su sección de importaciones. Facilita la vida del desarrollador y actúa como una guía para todos los recién llegados a su base de código.