تحسين واردات TypeScript: تكوين Prettier وESLint للتنسيق متعدد الأسطر

تبسيط بيانات الاستيراد في TypeScript

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

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

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

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

تكوين Prettier وESLint لعمليات الاستيراد متعددة الأسطر في TypeScript

الهدف الرئيسي من البرامج النصية أعلاه هو التكوين أجمل و ESLint لتنسيق عبارات الاستيراد الطويلة تلقائيًا عبر أسطر متعددة في مشروع TypeScript. تم إعداد تكوين Prettier لتحديد أنماط الترميز، مثل علامات الاقتباس المفردة والفواصل الزائدة، ولإدارة كيفية تغليف التعليمات البرمجية باستخدام عرض الطباعة قاعدة. عندما يتجاوز السطر العرض المحدد (في هذه الحالة، 80 أو 120 حرفًا)، سيقوم Prettier بتنسيق الكود تلقائيًا لجعله أكثر قابلية للقراءة. باستخدام أجمل البرنامج المساعد تنظيم الواردات البرنامج المساعد، ونحن نضمن أن يتم تقسيم بيانات الاستيراد وفرزها بشكل منطقي.

في تكوين ESLint، يقوم ملف استيراد/طلب حكم من eslint-plugin-import يعد البرنامج المساعد ضروريًا للتحكم في كيفية تنظيم الواردات. الهدف هنا هو فرض بنية استيراد متسقة، حيث يتم فصل الواردات من مجموعات مختلفة (مثل الوحدات المضمنة والحزم الخارجية والوحدات الداخلية) بأسطر جديدة. بالإضافة إلى ذلك، يتم ترتيب الواردات داخل نفس المجموعة أبجديًا لتحسين إمكانية القراءة. تمنع هذه القواعد عمليات الاستيراد من أن تصبح مزدحمة، خاصة عند التعامل مع أعداد كبيرة من الأعضاء المستوردين من ملفات متعددة.

جانب آخر مهم من إعداد ESLint هو الخطوط الجديدة بين الخيار الذي يضمن فصل كل مجموعة استيراد بسطر فارغ. وهذا يجعل التعليمات البرمجية أكثر تنظيمًا من الناحية المرئية، خاصة في قواعد التعليمات البرمجية الأكبر حجمًا. جنبا إلى جنب مع الترتيب الأبجدي القاعدة، تصبح كتلة الاستيراد بأكملها منظمة وأسهل في الصيانة. عندما يتم تنسيق التعليمات البرمجية عند الحفظ في Visual Studio Code، يتم تطبيق هذه الإعدادات تلقائيًا، مما يضمن تنسيق استيراد متسق عبر المشروع بأكمله دون تعديلات يدوية.

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

module.exports = {
  semi: false,
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 80,
  plugins: ['prettier-plugin-organize-imports'],
}
// Prettier configuration setup for import splitting

module.exports = {
  "extends": ["eslint:recommended", "plugin:import/errors", "plugin:import/warnings"],
  "rules": {
    "import/order": [
      "error", {
        "groups": ["builtin", "external", "internal"],
        "newlines-between": "always",
        "alphabetize": { "order": "asc", "caseInsensitive": true }
      }],
    "max-len": ["error", { "code": 80 }],
  }
}
// ESLint rule setup to organize imports into multiple lines and ensure alphabetical order

import {
  longFunctionNameOne,
  longFunctionNameTwo,
  longFunctionNameThree
} from '@example/long-module-name';

import {
  shortFunctionNameOne,
  shortFunctionNameTwo
} from '@example/short-module-name';
// Example of formatted import statements following the configured rules

const eslint = require('eslint');
const prettier = require('prettier');
const { describe, it } = require('@jest/globals');

describe('Import Formatting', () => {
  it('should split long imports into multiple lines', () => {
    const code = `import { a, b, c, d } from '@example/package';`;
    const formatted = prettier.format(code, { printWidth: 80 });
    expect(formatted).toMatch(/import { a, b }/);
  });
});
// Unit test to check if long imports are split into multiple lines using Jest

تحسين إمكانية قراءة التعليمات البرمجية باستخدام تنسيق استيراد Prettier وESLint

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

وهناك جانب حاسم آخر وهو النمط التنظيمي للواردات نفسها. باستخدام استيراد/طلب القاعدة التي توفرها ESLint، يمكنك تجميع الواردات بناءً على أصلها: المكتبات المضمنة، أو تبعيات الطرف الثالث، أو الوحدات الداخلية. يمكن تقسيم هذه المجموعات بواسطة أسطر جديدة، مما يسهل على المطورين تحديد التبعيات بسرعة. تعمل هذه الطريقة على تعزيز الواردات المنظمة، والتي، عند دمجها مع الفرز الأبجدي من خلال الترتيب الأبجدي الخيار، يعزز الوضوح والاتساق عبر قاعدة التعليمات البرمجية.

بالإضافة إلى ذلك، قد يرغب المطورون في الاستفادة من أدوات مثل أجمل البرنامج المساعد تنظيم الواردات لضمان عدم تقسيم الواردات بشكل صحيح فحسب، بل أيضًا إعادة ترتيبها بشكل منطقي. تقوم هذه الأدوات تلقائيًا بفرض بنية الاستيراد المطلوبة في كل مرة يتم فيها حفظ الملف في محرر مثل Visual Studio Code. وهذا يضمن أن المطورين لن يضطروا إلى ضبط بيانات الاستيراد يدويًا ويمكنهم التركيز على كتابة تعليمات برمجية أكثر وضوحًا وأكثر قابلية للصيانة.