TypeScript 가져오기 순서에 ESLint 사용

이 기사에서는 ESLint를 사용하여 가져오기 섹션을 쉽게 스타일 지정하거나 주문하는 방법에 대해 설명합니다. ESLint의 sort-imports 및 import/order 규칙에 대해 설명합니다.

TypeScript 가져오기 순서에 ESLint 사용

깨끗한 코드는 항상 더 좋습니다. 그것은 미래의 기여와 유지에 동기를 부여합니다. 따라서 일관된 코드 규칙과 서식 스타일을 유지하는 것이 중요한 측면입니다.

정적 코드 분석은 JavaScript 또는 TypeScript와 같은 해석 언어에도 유용합니다. 오류를 미리 식별하는 데 도움이 됩니다.

Linters는 이러한 유형의 문체 및 프로그램 문제를 식별하는 데 도움이 됩니다.

ESLint는 널리 사용되는 린터 중 하나입니다. TypeScript 코드 스타일 지정 문제를 식별하고 수정하는 데 사용되었습니다.

대규모 프로젝트에서 주요 스타일링 문제 중 하나는 가져오기를 관리하는 것입니다. 개발자들이 자주 와서 코드베이스에 기여합니다.

그들은 새로운 import 문을 추가하고 섹션이 커집니다. ESLint를 사용하여 가져오기 섹션을 보다 깔끔하게 구성할 수 있습니다.

TypeScript 가져오기 순서를 위한 ESLint sort-imports 규칙

ESLint 구성 파일을 사용하여 사용자 지정 규칙을 추가할 수 있습니다. 일반적으로 다음과 같이 JSON 형식의 규칙으로 구성된 eslintrc 파일이라고 합니다.

여러 가져오기를 가져오면 알파벳순으로 정렬된 경우 개발자의 작업이 쉬워집니다. 또한 가져오기 섹션에서 특정 구성원을 쉽게 찾을 수 있습니다.

일부 사용자 지정 구성이 포함된 sort-imports ESLint 규칙이 이를 수행합니다.

다음과 같이 import 문이 있다고 가정해 보겠습니다.

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

다음으로 다음과 같이 sort-imports 규칙을 ESLint 구성 파일에 추가할 수 있습니다.

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

sort-import 규칙은 error 및 warning 유형을 모두 일으킬 수 있습니다. 그 외에도 필요에 따라 구성할 수 있는 다른 선택적 매개변수가 있습니다.

ESLint가 대소문자와 가져오기 순서를 무시하도록 하려면 ignoreCase 매개변수를 true로 설정할 수 있습니다. 아래 명령을 ESLint에 실행하여 가져오기를 확인할 수 있습니다.

npm run lint

이렇게 하면 위의 예제 스크립트가 제대로 정렬되지 않았기 때문에 오류가 발생합니다. 위 명령과 함께 --fix 플래그를 전달하면 ESLint가 가져오기 문제를 수정합니다.

npm run lint --fix

따라서 위 가져오기의 올바른 버전은 다음과 같습니다.

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

다음 순서에 따라 이러한 가져오기를 정렬합니다.

1. 사용자 멤버 구문
2. 첫 번째 멤버 또는 별칭을 기준으로 가나다순 정렬

TypeScript 가져오기 순서 지정을 위한 ESLint 가져오기/주문 규칙

import/order 규칙은 이전에 논의한 sort-imports 규칙보다 더 강력합니다. 이것은 내장 모듈, 외부 모듈, 상위 모듈 등과 같은 모듈의 특성에 따라 가져오기를 주문할 수 있는 다양한 옵션을 제공합니다.

따라서 이것은 sort-imports 규칙에서 본 알파벳순 정렬보다 더 발전된 것입니다.

이것을 ESLint에 연결하려면 eslint-plugin-import 플러그인을 설치해야 합니다. 다음과 같이 npm i 명령을 실행하여 프로젝트에 설치해 보겠습니다.

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

--save-dev는 이 종속성을 프로젝트의 package.json 파일에 저장합니다. 이제 다음과 같이 ESLint 구성 파일에서 import/order 규칙을 사용할 수 있습니다.

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

groups 섹션은 먼저 외부 모듈, 내장 모듈 등으로 가져오기를 주문하도록 구성되었습니다. 따라서 다음은 유효한 가져오기 섹션입니다.

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

위의 가져오기 섹션은 ESLint 구성에 따라 유효합니다.

따라서 ESLint를 사용하여 가져오기 섹션의 스타일을 지정하거나 쉽게 주문할 수 있습니다. 개발자의 삶을 쉽게 만들고 코드베이스를 처음 접하는 모든 사람들을 위한 지침 역할을 합니다.