Verwenden Sie ESLint für die TypeScript-Importreihenfolge

In diesem Artikel wird erläutert, wie Sie mit ESLint Ihren Importbereich einfach gestalten oder anordnen können. Die sort-imports- und import/order-Regeln in ESLint werden besprochen.

Verwenden Sie ESLint für die TypeScript-Importreihenfolge

Ein sauberer Code ist immer besser; es motiviert zukünftige Beiträge und Wartung. Daher sind die Beibehaltung konsistenter Codekonventionen und Formatierungsstile wichtige Aspekte.

Die statische Codeanalyse ist auch für interpretierte Sprachen wie JavaScript oder TypeScript von Vorteil. Es hilft Ihnen, Fehler im Voraus zu erkennen.

Linters helfen dabei, diese Art von stilistischen und programmatischen Problemen zu identifizieren.

Der ESLint ist einer der weit verbreiteten Linter. Es wurde verwendet, um Probleme mit dem Stylen von TypeScript-Code zu identifizieren und zu beheben.

Bei größeren Projekten besteht eines der Hauptprobleme beim Styling darin, Importe zu verwalten. Entwickler kommen häufig und tragen zur Codebasis bei.

Sie fügen neue import-Anweisungen hinzu, und der Abschnitt wächst. ESLint kann verwendet werden, um den Importbereich sauberer zu organisieren.

ESLint sort-imports-Regel für TypeScript-Importreihenfolge

Die ESLint-Konfigurationsdatei kann verwendet werden, um benutzerdefinierte Regeln hinzuzufügen. Normalerweise wird sie als eslintrc-Datei bezeichnet, die aus Regeln im JSON-Format besteht, wie im Folgenden gezeigt.

Mehrere Importe zu bekommen macht das Leben des Entwicklers einfach, wenn diese alphabetisch sortiert wurden. Es erleichtert auch das Auffinden bestimmter Mitglieder im Abschnitt import.

Die ESLint-Regel sort-imports mit einigen benutzerdefinierten Konfigurationen wird dies erfüllen.

Nehmen wir an, wir hätten die import-Anweisungen, wie im Folgenden gezeigt.

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

Als nächstes können wir die Regel sort-imports in die ESLint-Konfigurationsdatei einfügen, wie im Folgenden gezeigt.

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

Die Regel sort-imports kann sowohl die Typen error als auch warning auslösen. Abgesehen davon verfügt es über weitere optionale Parameter, die je nach Bedarf konfiguriert werden können.

Der Parameter ignoreCase kann auf true gesetzt werden, wenn ESLint Groß- und Kleinschreibung und Reihenfolge von Importen ignorieren soll. Sie können den folgenden Befehl zu ESLint ausführen, um nach den Importen zu suchen.

npm run lint

Dies würde im obigen Beispielskript zu Fehlern führen, da es nicht richtig bestellt wurde. Wenn Sie das Flag --fix mit dem obigen Befehl übergeben, wird ESLint die Probleme in Ihren Importen beheben.

npm run lint --fix

Daher würde die korrekte Version der obigen Importe wie folgt aussehen.

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

Es sortiert diese Importe nach folgender Reihenfolge.

1. Benutzer-Member-Syntax
2. Alphabetische Sortierung nach dem ersten Mitglied oder Alias

ESLint import/order-Regel für TypeScript-Importreihenfolge

Die import/order-Regel ist leistungsfähiger als die zuvor besprochene sort-imports-Regel. Dies bietet eine Vielzahl von Optionen zum Bestellen unserer Importe basierend auf der Art des Moduls, z. B. integriertes Modul, externes Modul, übergeordnetes Modul usw.

Daher ist dies fortgeschrittener als die alphabetische Sortierung, die wir in der sort-imports-Regel gesehen haben.

Um dies in unser ESLint einzubinden, sollten wir das Plugin eslint-plugin-import installieren. Lassen Sie uns den Befehl npm i ausführen, um es für unser Projekt zu installieren, wie im Folgenden gezeigt.

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

Das --save-dev speichert diese Abhängigkeit in der Datei package.json unseres Projekts. Nun können wir die import/order-Regel in unserer ESLint-Konfigurationsdatei verwenden, wie im Folgenden gezeigt.

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

Der Abschnitt Gruppen wurde so konfiguriert, dass die Importe zuerst nach externen Modulen, dann nach den integrierten Modulen usw. geordnet werden. Daher ist das Folgende ein gültiger import-Abschnitt.

// "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 './';

Der obige import-Abschnitt gilt entsprechend den ESLint-Konfigurationen.

Daher kann ESLint verwendet werden, um Ihren Importabschnitt einfach zu gestalten oder zu ordnen. Es erleichtert dem Entwickler das Leben und dient als Richtlinie für alle Neulinge in Ihrer Codebasis.