Babel と ESLint 用の TypeScript プラグインの書き方

Babel および ESLint 用の TypeScript プラグインを使用すると、開発者は特定のプロジェクトのニーズに合わせてこれらのツールの動作を拡張およびカスタマイズできます。Babel は人気の JavaScript コンパイラであり、ESLint はコードの品質を確保するために広く使用されているリンターです。カスタム プラグインを作成すると、開発ワークフローを合理化し、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 プラグインを作成しましょう。これは、プロジェクト固有の linting ルールを適用するのに役立ちます。

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 プラグインを作成すると、コードベースのコンパイルとリンティングのプロセスをきめ細かく制御できます。これらの手順に従うことで、プロジェクトの特定のニーズに合わせて両方のツールを拡張し、全体的な開発者エクスペリエンスを向上させることができます。