Babel और ESLint के लिए TypeScript प्लगइन्स कैसे लिखें

Babel और ESLint के लिए TypeScript प्लगइन्स डेवलपर्स को इन उपकरणों के व्यवहार को विशिष्ट प्रोजेक्ट आवश्यकताओं के अनुरूप विस्तारित और अनुकूलित करने की अनुमति देते हैं। Babel एक लोकप्रिय जावास्क्रिप्ट कंपाइलर है, और ESLint कोड की गुणवत्ता सुनिश्चित करने के लिए व्यापक रूप से उपयोग किया जाने वाला लिंटर है। कस्टम प्लगइन्स लिखने से विकास वर्कफ़्लो को सुव्यवस्थित किया जा सकता है और TypeScript प्रोजेक्ट्स में कोडिंग मानकों को लागू किया जा सकता है।

चरण 1: 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 कोड को बदलने के लिए करेगा। यहाँ एक उदाहरण प्लगइन है जो 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: ESLint के लिए कस्टम टाइपस्क्रिप्ट प्लगइन लिखना

अब, आइए ESLint के लिए एक कस्टम TypeScript प्लगइन बनाएं। यह प्रोजेक्ट-विशिष्ट लिंटिंग नियमों को लागू करने के लिए उपयोगी हो सकता है।

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

निष्कर्ष

Babel और ESLint के लिए कस्टम TypeScript प्लगइन्स बनाने से आपके कोडबेस के संकलन और लिंटिंग प्रक्रिया पर बारीक नियंत्रण की अनुमति मिलती है। इन चरणों का पालन करके, आप अपने प्रोजेक्ट की विशिष्ट आवश्यकताओं के अनुरूप दोनों टूल का विस्तार कर सकते हैं और समग्र डेवलपर अनुभव को बेहतर बना सकते हैं।