Utiliser ESLint pour la commande d'importation TypeScript

Cet article explique comment utiliser ESLint pour styliser ou ordonner facilement votre section d’importation. Les règles trier-importer et importer/ordonner dans ESLint seront abordées.

Utiliser ESLint pour la commande d’importation TypeScript

Un code propre est toujours meilleur ; il motive les contributions et la maintenance futures. Par conséquent, le maintien de conventions de code et de styles de formatage cohérents est un aspect important.

L’analyse de code statique est également bénéfique pour les langages interprétés comme JavaScript ou TypeScript. Cela vous aidera à identifier les erreurs à l’avance.

Les linters aident à identifier ces types de problèmes stylistiques et programmatiques.

L’ESLint est l’un des linters les plus utilisés. Il a été utilisé pour identifier les problèmes de style de code TypeScript et les résoudre.

Dans les grands projets, l’un des principaux problèmes de style est de gérer les importations. Les développeurs viennent fréquemment contribuer à la base de code.

Ils ajoutent de nouvelles déclarations import et la section s’agrandit. ESLint peut être utilisé pour organiser plus proprement la section des importations.

Règle ESLint sort-imports pour l’ordre d’importation TypeScript

Le fichier de configuration ESLint peut être utilisé pour ajouter des règles personnalisées. Habituellement, il s’appelle le fichier eslintrc, composé de règles au format JSON, comme indiqué ci-dessous.

Obtenir plusieurs importations facilite la vie du développeur si celles-ci ont été triées par ordre alphabétique. Cela facilitera également la recherche de membres spécifiques dans la section import.

La règle ESLint sort-imports avec certaines configurations personnalisées répondra à cela.

Supposons que nous ayons obtenu les instructions import, comme indiqué ci-dessous.

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

Ensuite, nous pouvons ajouter la règle sort-imports dans le fichier de configuration ESLint, comme indiqué ci-dessous.

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

La règle sort-imports peut lever à la fois les types erreur et avertissement. En dehors de cela, il a d’autres paramètres optionnels qui peuvent être configurés selon vos besoins.

Le paramètre ignoreCase peut être défini sur true si vous voulez qu’ESLint ignore la casse et l’ordre des importations. Vous pouvez exécuter la commande ci-dessous sur ESLint pour vérifier les importations.

npm run lint

Cela générerait des erreurs dans l’exemple de script ci-dessus car il n’a pas été commandé correctement. Si vous passez le drapeau --fix avec la commande ci-dessus, ESLint corrigera les problèmes dans vos importations.

npm run lint --fix

Par conséquent, la version correcte des importations ci-dessus ressemblerait à ce qui suit.

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

Il trie ces importations selon l’ordre suivant.

1. Syntaxe du membre utilisateur
2. Tri alphabétique par premier membre ou alias

Règle ESLint import/order pour l’ordre d’importation TypeScript

La règle import/ordre est plus puissante que la règle tri-importations dont nous avons parlé précédemment. Cela offre une variété d’options pour commander nos importations en fonction de la nature du module, comme le module intégré, le module externe, le module parent, etc.

C’est donc plus avancé que le tri alphabétique que nous avons vu dans la règle tri-importations.

Pour brancher ceci dans notre ESLint, nous devons installer le plugin eslint-plugin-import. Exécutons la commande npm i pour l’installer pour notre projet, comme indiqué ci-dessous.

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

Le --save-dev enregistrera cette dépendance dans le fichier package.json de notre projet. Maintenant, nous pouvons utiliser la règle import/order dans notre fichier de configuration ESLint, comme indiqué ci-dessous.

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

La section groupes a été configurée pour ordonner les importations d’abord par les modules externes, puis les modules intégrés, et ainsi de suite. Par conséquent, ce qui suit est une section importation valide.

// "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 section import ci-dessus est valide selon les configurations ESLint.

Par conséquent, ESLint peut être utilisé pour styliser ou ordonner facilement votre section d’importation. Il facilite la vie du développeur et agit comme une ligne directrice pour tous les nouveaux arrivants dans votre base de code.