Babel 및 ESLint를 위한 TypeScript 플러그인을 작성하는 방법

Babel 및 ESLint용 TypeScript 플러그인을 사용하면 개발자가 특정 프로젝트 요구 사항에 맞게 이러한 도구의 동작을 확장하고 사용자 정의할 수 있습니다. Babel은 인기 있는 JavaScript 컴파일러이고 ESLint는 코드 품질을 보장하는 데 널리 사용되는 linter입니다. 사용자 정의 플러그인을 작성하면 개발 워크플로를 간소화하고 TypeScript 프로젝트에서 코딩 표준을 적용할 수 있습니다.

1단계: Babel을 위한 사용자 정의 TypeScript 플러그인 작성

TypeScript용 Babel 플러그인을 만들려면 다음 단계를 따르세요.

1.1 필수 종속성 설치

플러그인을 빌드하는 데 필요한 종속성과 Babel을 설치하여 시작하세요.

npm install --save-dev @babel/core @babel/preset-typescript @babel/plugin-syntax-typescript

1.2 플러그인 구조 생성

다음으로, Babel 플러그인의 구조를 만듭니다.

• src/index.ts - 플러그인의 진입점

1.3 Babel 플러그인 구현

Babel이 코드를 변환하는 데 사용할 함수를 내보내어 플러그인을 작성합니다. TypeScript 유형을 변환하는 예제 플러그인은 다음과 같습니다.

import { types as t, NodePath } from '@babel/core';

export default function myTypeScriptPlugin() {
  return {
    visitor: {
      TSTypeAliasDeclaration(path: NodePath<t.TSTypeAliasDeclaration>) {
        // Example: log each TypeScript type alias declaration
        console.log(path.node.id.name);
      },
    },
  };
}

이 플러그인은 컴파일 중에 발견된 각 TypeScript 유형 별칭을 기록합니다.

1.4 Babel의 플러그인을 사용하세요

플러그인을 사용하려면 .babelrc 또는 babel.config.js에 추가하여 Babel을 구성하세요.

{
  "presets": ["@babel/preset-typescript"],
  "plugins": ["./path-to-your-plugin"]
}

2단계: ESLint용 사용자 정의 TypeScript 플러그인 작성

이제 ESLint를 위한 사용자 정의 TypeScript 플러그인을 만들어 보겠습니다. 이는 프로젝트별 린팅 규칙을 적용하는 데 유용할 수 있습니다.

2.1 필수 종속성 설치

먼저 ESLint와 TypeScript 관련 플러그인을 설치합니다.

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

2.2 사용자 정의 ESLint 규칙 만들기

이 예제에서는 TypeScript 인터페이스에 대한 명명 규칙을 적용하는 사용자 지정 ESLint 규칙을 만듭니다.

import { TSESTree } from "@typescript-eslint/types";
import { Rule } from "eslint";

const rule: Rule.RuleModule = {
  meta: {
    type: "suggestion",
    docs: {
      description: "Enforce interface names to start with I",
      category: "Stylistic Issues",
    },
    schema: [], // no options
  },
  create(context) {
    return {
      TSInterfaceDeclaration(node: TSESTree.TSInterfaceDeclaration) {
        if (!/^I[A-Z]/.test(node.id.name)) {
          context.report({
            node,
            message: "Interface name '{{ name }}' should start with 'I'.",
            data: { name: node.id.name },
          });
        }
      },
    };
  },
};

export default rule;

2.3 사용자 정의 규칙 통합

규칙을 작성한 후에는 ESLint 구성에 통합할 수 있습니다.

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "rules": {
    "my-custom-rule": "error"
  }
}

3단계: 플러그인 테스트 및 디버깅

Babel과 ESLint 플러그인을 작성한 후에는 테스트하는 것이 필수입니다. 관련 패턴으로 TypeScript 파일을 만들고 Babel 또는 ESLint를 실행하여 플러그인이 예상대로 작동하는지 확인합니다.

Babel 플러그인을 테스트하려면 다음을 실행하세요.

npx babel src --out-dir lib --extensions .ts

ESLint 플러그인을 테스트하려면 다음을 실행하세요.

npx eslint src --ext .ts

결론

Babel 및 ESLint용 사용자 정의 TypeScript 플러그인을 만들면 코드베이스의 컴파일 및 린팅 프로세스를 세부적으로 제어할 수 있습니다. 이러한 단계를 따르면 두 도구를 모두 프로젝트의 특정 요구 사항에 맞게 확장하고 전반적인 개발자 경험을 개선할 수 있습니다.