كيف تنشئ حزمة إعدادات ESLint الخاصة بك لتوحيد معايير الكود

مقدمة: لماذا تحتاج إلى حزمة إعدادات ESLint مخصصة؟

يُعد ESLint أداة قوية وفعالة للغاية تساعد المطورين على فرض معايير برمجة متسقة وضمان جودة الكود في مشاريع JavaScript. غالبًا ما تكون قرارات معايير البرمجة معقدة وتستغرق وقتًا طويلاً، لذا فإن وجود أداة تقوم بفرضها تلقائيًا يوفر الكثير من النقاشات غير الضرورية. كما أن ضمان الجودة ميزة لا غنى عنها؛ فأدوات التدقيق اللغوي (linters) ممتازة في اكتشاف الأخطاء، مثل تلك المتعلقة بنطاق المتغيرات.

صُمم ESLint ليكون قابلاً للتكوين بالكامل، مما يمنحك خيار تمكين أو تعطيل كل قاعدة، أو مزج القواعد لتناسب احتياجاتك. مع وضع ذلك في الاعتبار، يمكن لمجتمع JavaScript والشركات التي تستخدمه توسيع إعدادات ESLint الأصلية. هناك العديد من الأمثلة البارزة في سجل حزم npm، مثل حزمة eslint-config-airbnb الشهيرة.

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

الشروع في العمل: إنشاء مشروع حزمة الإعدادات

للبدء، ستحتاج أولاً إلى إنشاء مجلد جديد ومشروع npm. وفقًا للاتفاقيات المتبعة، يبدأ اسم الوحدة النمطية بـ eslint-config-، على سبيل المثال eslint-config-test.

mkdir eslint-config-test
cd eslint-config-test
npm init

بعد تنفيذ الأوامر أعلاه، سيكون لديك ملف package.json يشبه المقتطف التالي:

{
  "name": "eslint-config-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

إضافة تبعيات ESLint الأساسية

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

npm install -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier

تذكر أن وثائق ESLint تشير إلى أنه إذا كانت حزمة الإعدادات القابلة للمشاركة تعتمد على إضافة برمجية (plugin)، فيجب عليك أيضًا تحديدها كـ peerDependency في ملف package.json الخاص بك لضمان تثبيتها بواسطة المشروع الذي يستخدم حزمتك.

تكوين ملف .eslintrc.js

بعد تثبيت التبعيات، سنقوم بإنشاء ملف .eslintrc.js يحتوي على إعداداتك. هذا مشابه لما تفعله بالفعل في تطبيقاتك.

module.exports = {
  extends: [
    'airbnb',
    'eslint:recommended',
    'plugin:import/errors',
    'plugin:react/recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:prettier/recommended',
    'prettier/react',
  ],
  plugins: [
    'react-hooks',
  ],
  rules: {
    // هنا يمكنك إضافة قواعدك المخصصة أو تجاوز القواعد الموجودة
  },
};

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

تخصيص القواعد: تكوين Prettier

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

{
  "tabWidth": 2
}

من المهم الإشارة إلى أن ملف .prettierrc يجب أن يكون موجودًا في الجذر الرئيسي للمشروع الذي يستخدم حزمتك، وليس بالضرورة داخل حزمة الإعدادات نفسها. حاليًا، يتم نسخه يدويًا إلى المشاريع.

تصدير الإعدادات من index.js

الخطوة التالية هي تصدير إعداداتك من ملف index.js الخاص بحزمتك. هذا هو الملف الذي سيتم استيراده عند استخدام حزمتك.

const eslintrc = require('./.eslintrc.js');
module.exports = eslintrc;

من الناحية الفنية، من الممكن إنشاء جميع الإعدادات مباشرة في ملف index.js. ولكن إذا قمت بذلك، فلن يتم تدقيق كائن الإعدادات نفسه بواسطة ESLint، مما قد يؤدي إلى فقدان بعض فوائد التدقيق الذاتي.

اختبار ونشر حزمة الإعدادات الخاصة بك

لقد انتهيت! هذا كل ما تحتاجه لبدء حزمة الإعدادات الخاصة بك. يمكنك اختبار حزمة الإعدادات محليًا عن طريق تشغيل الأمر التالي في مشروع JavaScript آخر:

npm install /Users/leonardo/path/to/eslint-config-test

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

npm publish

أمثلة وموارد إضافية

للحصول على مثال عملي كامل، يمكنك الاطلاع على مشروع GitHub الخاص بي والذي يوضح إعدادات هذا المقال: eslint-config-leozera.

مصادر مفيدة:

• Configuring ESLint: الوثائق الرسمية لـ ESLint، وهي مرجع لا غنى عنه.
• How to publish your first NPM package: دليل شامل لنشر حزم npm.
• eslint-config-wesbos: مشروع للمطور Wes Bos ساعد في إلهام هذا العمل.

الخلاصة التقنية

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