كيفية إنشاء Linters وFormaters مخصصة لـ TypeScript

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

الخطوة 1: إعداد بيئة التطوير الخاصة بك

قبل إنشاء أدوات التنسيق والتحقق المخصصة، تأكد من توفر بيئة تطوير مناسبة. ستحتاج إلى تثبيت Node.js وnpm أو Yarn على جهازك.

# Install Node.js and npm from https://nodejs.org# Initialize a new project
npm init -y

الخطوة 2: إنشاء قاعدة ESLint مخصصة

لإنشاء قاعدة ESLint مخصصة، ابدأ بتثبيت ESLint وإعداد تكوين أساسي.

# Install ESLint
npm install eslint --save-dev

# Initialize ESLint configuration
npx eslint --init

الآن، قم بإنشاء قاعدة مخصصة عن طريق تعريفها في ملف منفصل. فيما يلي مثال لقاعدة مخصصة تفرض أسلوب ترميز معين:

import { Rule } from 'eslint';

const rule: Rule.RuleModule = {
  create(context) {
    return {
      Identifier(node) {
        if (node.name === 'foo') {
          context.report({
            node,
            message: 'Avoid using the identifier "foo".',
          });
        }
      },
    };
  },
};

export default rule;

قم بتسجيل القاعدة المخصصة في ملف تكوين ESLint الخاص بك.

module.exports = {
  rules: {
    'no-foo': require('./path/to/custom-rule').default,
  },
};

الخطوة 3: إنشاء مُنسّق Prettier مُخصص

لإنشاء مُنسيق Prettier مخصص، ابدأ بتثبيت Prettier والأدوات المرتبطة به.

# Install Prettier
npm install prettier --save-dev

قم بإنشاء مُنسِّق مخصص من خلال توسيع وظائف Prettier. فيما يلي مثال أساسي:

import { FormatterOptions } from 'prettier';

const customFormatter = (text: string, options: FormatterOptions) => {
  // Implement custom formatting logic here
  return text; // Return formatted text
};

export default customFormatter;

قم بدمج المُنسيق المخصص الخاص بك مع Prettier باستخدام واجهة برمجة التطبيقات Prettier:

import { format } from 'prettier';
import customFormatter from './path/to/custom-formatter';

const formattedCode = format('const x = 1;', {
  parser: 'typescript',
  plugins: [customFormatter],
});
console.log(formattedCode);

الخطوة 4: اختبار أدواتك المخصصة

يعد الاختبار أمرًا بالغ الأهمية لضمان عمل أدوات التنسيق والتحقق المخصصة لديك كما هو متوقع. اكتب حالات الاختبار باستخدام أدوات مثل Jest أو Mocha.

# Install Jest
npm install jest --save-dev

# Create a test file for your custom rule
import rule from './path/to/custom-rule';
import { RuleTester } from 'eslint';

const ruleTester = new RuleTester();

ruleTester.run('no-foo', rule, {
  valid: [
    // Valid test cases
  ],
  invalid: [
    // Invalid test cases
  ],
});

خاتمة

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

TypeScript التدقيق التنسيق eslint أجمل قواعد تكوين كود تطوير مكونات إضافية اختبار jest مخصص أدوات