كيفية كتابة مكونات إضافية لـ TypeScript لـ Babel وESLint

تسمح مكونات TypeScript الإضافية لـ Babel وESLint للمطورين بتوسيع وتخصيص سلوك هذه الأدوات لتناسب احتياجات المشروع المحددة. Babel هو مُجمِّع JavaScript شائع، وESLint هو أداة فحص تستخدم على نطاق واسع لضمان جودة التعليمات البرمجية. يمكن أن يؤدي كتابة مكونات إضافية مخصصة إلى تبسيط سير عمل التطوير وفرض معايير الترميز في مشاريع TypeScript.

الخطوة 1: كتابة مكون إضافي مخصص لـ TypeScript لـ Babel

لإنشاء مكون Babel لـ TypeScript، اتبع الخطوات التالية:

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

لاستخدام البرنامج الإضافي، قم بتكوين Babel عن طريق إضافته إلى .babelrc أو babel.config.js:

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

الخطوة 2: كتابة مكون إضافي مخصص لـ TypeScript لـ ESLint

الآن، دعنا ننشئ مكونًا إضافيًا مخصصًا لـ TypeScript لـ ESLint. يمكن أن يكون هذا مفيدًا لتطبيق قواعد التدقيق اللغوي الخاصة بالمشروع.

2.1 تثبيت التبعيات المطلوبة

أولاً، قم بتثبيت ESLint والمكونات الإضافية المرتبطة بـ TypeScript:

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

2.2 إنشاء قاعدة ESLint مخصصة

في هذا المثال، سننشئ قاعدة ESLint مخصصة لفرض اتفاقية التسمية لواجهات 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 دمج القاعدة المخصصة

بمجرد كتابة القاعدة، يمكنك دمجها في تكوين 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

خاتمة

يتيح لك إنشاء مكونات إضافية مخصصة لـ TypeScript لـ Babel وESLint التحكم بشكل دقيق في عملية التجميع والتحقق من صحة قاعدة التعليمات البرمجية الخاصة بك. باتباع هذه الخطوات، يمكنك توسيع كلتا الأداتين لتناسب احتياجات مشروعك المحددة وتحسين تجربة المطور بشكل عام.

TypeScript Babel eslint مكون إضافي مخصص قواعد فحص TypeScript-eslint محلل تحويل زائر تجميع تسمية واجهة