Cara Menulis Plugin TypeScript untuk Babel dan ESLint

Plugin TypeScript untuk Babel dan ESLint memungkinkan pengembang untuk memperluas dan menyesuaikan perilaku alat-alat ini agar sesuai dengan kebutuhan proyek tertentu. Babel adalah kompiler JavaScript yang populer, dan ESLint adalah linter yang banyak digunakan untuk memastikan kualitas kode. Menulis plugin khusus dapat menyederhanakan alur kerja pengembangan dan menegakkan standar pengodean dalam proyek TypeScript.

Langkah 1: Menulis Plugin TypeScript Kustom untuk Babel

Untuk membuat plugin Babel untuk TypeScript, ikuti langkah-langkah berikut:

1.1 Instal Ketergantungan yang Diperlukan

Mulailah dengan menginstal Babel dan dependensi yang diperlukan untuk membangun plugin:

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

1.2 Buat Struktur Plugin

Berikutnya, buat struktur untuk plugin Babel Anda:

• src/index.ts - Titik masuk untuk plugin

1.3 Terapkan Plugin Babel

Tulis plugin dengan mengekspor fungsi yang akan digunakan Babel untuk mengubah kode. Berikut contoh plugin yang mengubah tipe 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);
      },
    },
  };
}

Plugin ini mencatat setiap alias tipe TypeScript yang ditemukan selama kompilasi.

1.4 Gunakan Plugin di Babel

Untuk menggunakan plugin, konfigurasikan Babel dengan menambahkannya ke .babelrc atau babel.config.js Anda:

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

Langkah 2: Menulis Plugin TypeScript Kustom untuk ESLint

Sekarang, mari kita buat plugin TypeScript khusus untuk ESLint. Ini dapat berguna untuk menegakkan aturan linting khusus proyek.

2.1 Instal Ketergantungan yang Diperlukan

Pertama, instal ESLint dan plugin terkait TypeScript:

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

2.2 Buat Aturan ESLint Kustom

Dalam contoh ini, kami akan membuat aturan ESLint khusus yang menerapkan konvensi penamaan untuk antarmuka TypeScript:

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 Integrasikan Aturan Kustom

Setelah aturan ditulis, Anda dapat mengintegrasikannya ke konfigurasi ESLint Anda:

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

Langkah 3: Menguji dan Men-debug Plugin

Setelah menulis plugin Babel dan ESLint, penting untuk mengujinya. Buat file TypeScript dengan pola yang relevan dan jalankan Babel atau ESLint untuk melihat apakah plugin berfungsi seperti yang diharapkan.

Untuk menguji plugin Babel, jalankan:

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

Untuk menguji plugin ESLint, jalankan:

npx eslint src --ext .ts

Kesimpulan

Membuat plugin TypeScript khusus untuk Babel dan ESLint memungkinkan kontrol yang lebih rinci atas proses kompilasi dan linting basis kode Anda. Dengan mengikuti langkah-langkah ini, Anda dapat memperluas kedua alat tersebut agar sesuai dengan kebutuhan spesifik proyek Anda dan meningkatkan pengalaman pengembang secara keseluruhan.