Babel ve ESLint için TypeScript Eklentileri Nasıl Yazılır

Babel ve ESLint için TypeScript eklentileri, geliştiricilerin bu araçların davranışlarını belirli proje ihtiyaçlarına uyacak şekilde genişletmelerine ve özelleştirmelerine olanak tanır. Babel popüler bir JavaScript derleyicisidir ve ESLint, kod kalitesini sağlamak için yaygın olarak kullanılan bir linter'dır. Özel eklentiler yazmak, geliştirme iş akışlarını kolaylaştırabilir ve TypeScript projelerinde kodlama standartlarını zorunlu kılabilir.

Adım 1: Babel için Özel Bir TypeScript Eklentisi Yazma

TypeScript için bir Babel eklentisi oluşturmak için şu adımları izleyin:

1.1 Gerekli Bağımlılıkları Yükle

Öncelikle Babel'i ve eklentiyi oluşturmak için gerekli bağımlılıkları yükleyerek başlayalım:

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

1.2 Eklenti Yapısını Oluşturun

Şimdi Babel eklentinizin yapısını oluşturun:

• src/index.ts - Eklenti için giriş noktası

1.3 Babel Eklentisini Uygula

Babel'in kodu dönüştürmek için kullanacağı bir fonksiyonu dışa aktararak eklentiyi yazın. İşte TypeScript türlerini dönüştüren bir eklenti örneği:

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);
      },
    },
  };
}

Bu eklenti derleme sırasında bulunan her TypeScript tür takma adını kaydeder.

1.4 Babel'deki Eklentiyi Kullanın

Eklentiyi kullanmak için Babel'i .babelrc veya babel.config.js: dosyasına ekleyerek yapılandırın.

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

Adım 2: ESLint için Özel Bir TypeScript Eklentisi Yazma

Şimdi, ESLint için özel bir TypeScript eklentisi oluşturalım. Bu, projeye özgü linting kurallarını uygulamak için yararlı olabilir.

2.1 Gerekli Bağımlılıkları Yükle

Öncelikle ESLint'i ve TypeScript ile ilgili eklentilerini yükleyelim:

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

2.2 Özel bir ESLint Kuralı Oluşturun

Bu örnekte, TypeScript arayüzleri için bir adlandırma kuralını uygulayan özel bir ESLint kuralı oluşturacağız:

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 Özel Kuralı Entegre Et

Kural yazıldıktan sonra bunu ESLint yapılandırmanıza entegre edebilirsiniz:

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

Adım 3: Eklentileri Test Etme ve Hata Ayıklama

Babel ve ESLint eklentilerinizi yazdıktan sonra, onları test etmeniz önemlidir. İlgili desenlerle bir TypeScript dosyası oluşturun ve eklentilerin beklendiği gibi çalışıp çalışmadığını görmek için Babel veya ESLint'i çalıştırın.

Babel eklentisini test etmek için şunu çalıştırın:

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

ESLint eklentisini test etmek için şunu çalıştırın:

npx eslint src --ext .ts

Çözüm

Babel ve ESLint için özel TypeScript eklentileri oluşturmak, kod tabanınızın derleme ve tarama süreci üzerinde ayrıntılı kontrol sağlar. Bu adımları izleyerek, her iki aracı da projenizin özel ihtiyaçlarına uyacak şekilde genişletebilir ve genel geliştirici deneyimini iyileştirebilirsiniz.