 |
| gitlab |
كيفية استخدام GitLab لمشاركة قواعد ESLint الخاصة مع فريقك
يحلل ESLint JavaScript بشكل ثابت لتحديد المشكلات قبل تشغيل التعليمات البرمجية. يمكنه أيضًا العثور على التناقضات الأسلوبية وإصلاحها ، مما يساعد مشروعك على التوافق مع أي أدلة نمط تتبعها.
قد يستغرق إنشاء تكوين ESLint شامل بضع ساعات. أكثر من مائة قواعد متوفرة وعليك أن تقرر أي منها فريقك سوف تستخدم. يشحن ESLint مع مجموعة "موصى بها" من قواعد الممارسات الفضلى ؛ لا يتم تشغيل العديد من القواعد المفيدة الأخرى بشكل افتراضي.
في هذا الدليل ، سنوضح كيفية كتابة تهيئة ESLint مرة واحدة ومشاركتها مع فريقك باستخدام سجل npm خاص في GitLab. ستتمكن من إعادة استخدام تكوين ESLint الخاص بك في جميع مشاريعك من خلال الرجوع إلى حزمة التسجيل الخاصة بك. سوف نتخطى الأساسيات - من المفترض أن لديك بعض الخبرة في إنشاء مجموعات ومشاريع GitLab جديدة.
ابدء
تسهل ESLint استخدام القواعد المشتركة. أي حزمة npm مؤهلة لتصبح مكونًا إضافيًا لـ ESLint. تحتاج نقطة دخول الحزمة إلى تصدير كائن تكوين ESLint.
ابدأ بإنشاء مشروع GitLab جديد للاحتفاظ بتكوين ESLint الخاص بك. استنساخ المستودع وصولاً إلى جهازك. بعد ذلك ، أضف a package.jsonلوصف حزمة npm الخاصة بك:
{
"name": "@example-group/eslint-config",
"author": "Example Author",
"description": "An example description",
"version": "1.1.0",
"main": ".eslintrc.js",
"peerDependencies": {
"eslint": ">=7"
}
}{codeBox}
لاحظ تنسيق الحزمة name. يجب أن يتطابق هذا مع اسم مساحة GitLab لمشروعك ( @group/project). و @رمز يخلق نطاق الحزمة. سنستخدم هذا لاحقًا لتوجيه npm لجلب @groupالحزم من سجل npm الخاص بنا. إذا كان لديك اسم معقد لمساحة الاسم ، فارجع إلى وثائق GitLab لتحديد اسم النطاق الصحيح لاستخدامه.
و mainيجب أن يتم تعيين الحقل إلى الملف الذي سيتضمن التكوين ESLint الخاص بك. نحن نستخدمه .eslintrc.jsلهذه المقالة. تم تحديد ESLint كتبعية للأقران. هذا يعني أن المشروعات التي تستخدم مكتبتك يجب أن تتضمن ESLint في تبعياتها الخاصة.
إنشاء تكوين ESLint الخاص بك
قم بإنشاء ملف تكوين ESLint الفعلي الخاص بك بعد ذلك. تأكد من استخدام الملف الذي حددته كما mainفي package.json.
إليك مثال أساسي:
module.exports = {
"extends": ["eslint:recommended"],
"rules": {
"comma-dangle": ["error", "never"],
"indent": ["error", "tab", {"SwitchCase": 1}],
"max-classes-per-file": ["error", 1]
}
};{codeBox}
يعتمد هذا التكوين على قواعد ESLint المضمنة recommended. يمنحك هذا نقطة بداية جيدة لوضع القواعد الخاصة بك عليها. لقد أضفنا ثلاث قواعد إضافية لحظر الفواصل المتدلية ، وقصر كل ملف على فئة واحدة محددة ، وفرض استخدام علامات التبويب بدلاً من المسافات.
المصادقة على سجل npm الخاص بك
أنت الآن جاهز لنشر الحزمة الخاصة بك إلى سجل npm الخاص بك في GitLab. ستحتاج أولاً إلى إنشاء رمز GitLab API المميز - انقر فوق رمز ملف التعريف الخاص بك في الجزء العلوي الأيمن ، ثم عنصر القائمة "التفضيلات". حدد "رموز الوصول" من الشريط الجانبي. قم بإنشاء رمز وصول جديد باستخدام النطاقات read_registryو write_registry. قم بتدوين قيمة الرمز المميز التي سيتم عرضها - لن تتمكن من استردادها في المستقبل.
https://www.cloudsavvyit.com/p/uploads/2021/03/9c1a4001.png?trim=1,1&bg-color=000&pad=1,1{codeBox}
بعد ذلك ، تحتاج إلى توصيل npm بالسجل الخاص بك:
npm config set @example-group:registry https://gitlab.example.com/api/v4/packages/npm/
npm config set -- '//gitlab.example.com/api/v4/packages/npm/:_authToken' "$API_TOKEN"{codeBox}
استبدل $API_TOKENرمز الوصول إلى واجهة برمجة التطبيقات الذي أنشأته داخل GitLab. يقوم الأمر الأول بتكوين npm لجلب أي حزمة في @example-groupالنطاق من السجل الخاص بك. يوفر الأمر الثاني npm مع رمز مصادقة التسجيل.
يتيح لك npm إضافة أي عدد من نطاقات الحزم. يحتاج كل نطاق خاص إلى رمز المصادقة الخاص به. إذا كنت تعمل في مجموعات GitLab متعددة ، فستحتاج إلى تحديد نطاق لكل مجموعة.
- النشر في سجل npm الخاص بـ GitLab
تنطبق المصادقة المكونة أعلاه على سجل GitLab npm على مستوى المثيل. يعد هذا مثاليًا لتثبيت التبعيات حيث يمكنك الوصول إلى الحزم في أي مجموعة يمكنك الوصول إليها ، دون تحديد معرفات المشروع يدويًا.
لنشر الحزم ، يجب عليك استخدام نقطة نهاية API على مستوى المشروع . يتطلب هذا مصادقة منفصلة داخل npm. يمكنك إعادة استخدام نفس الرمز المميز لواجهة برمجة التطبيقات ، إذا كان لديه write_registryأذونات لمشروعك:
npm config set -- '//gitlab.heron-web.com/api/v4/projects/<id>/packages/npm/:_authToken{codeBox}
استبدل <id>عنوان URL الخاص بالسجل بمعرف مشروع GitLab الذي تنشر عليه. يمكنك العثور على هذا في الصفحة الرئيسية للمشروع ، المعروضة بجوار اسمه.
https://www.cloudsavvyit.com/p/uploads/2021/02/91d5da6e.jpg?trim=1,1&bg-color=000&pad=1,1{codeBox}
بعد ذلك ، قم بتحديث package.jsonمع publishConfigكائن. هذا يرشدك npm publishإلى إرسال الحزمة الخاصة بك إلى السجل الخاص بك ، بدلاً من التسجيل العام في npmjs.com.
{
"publishConfig": {
"@example-group:registry": "https://gitlab.example.com/api/v4/projects/<id>/packages/npm/"
}
}{codeBox}
قم بتشغيل npm publishلنشر الحزمة الخاصة بك في سجل GitLab الخاص بك! يجب أن ترى الحزمة الخاصة بك تظهر ضمن "الحزم والسجلات" داخل واجهة GitLab.
https://www.cloudsavvyit.com/p/uploads/2021/04/71713681.png?trim=1,1&bg-color=000&pad=1,1{codeBox}
- تثبيت الحزم من السجل الخاص بك
أوامر MPM مثل npm install، npm ciو npm outdatedيجب أن تعمل دون مزيد من التكوين. ستقوم npm تلقائيًا باستشارة GitLab لتحديد أحدث إصدار من حزمك الخاصة. سيتم بعد ذلك تنزيل الملفات مباشرة من السجل الخاص بك.
لا حاجة للمصادقة لتثبيت الحزم من المشاريع العامة. إذا كان مشروعك خاصًا ، فستحتاج إلى تزويد npm برمز GitLab API المميز كما هو موضح في الأقسام السابقة. يتيح لك استخدام نقطة نهاية على مستوى المشروع تثبيت حزم هذا المشروع ؛ تتيح لك نقطة النهاية على مستوى المثيل تثبيت أي حزمة لديك حق الوصول إليها.
فيما يلي مثال package.jsonلمشروع يستهلك تكوين ESLint الخاص بك:
{
"name": "demo",
"version": "1.1.0",
"devDependencies": {
"@example-group/eslint-config": "^1.1",
"eslint": "^7.2"
},
"scripts": {
"lint": "eslint ."
},
"eslintConfig": {
"extends": [
"@example-group/eslint-config"
]
}
}
}{codeBox}
يجب إضافة حزمة ESLint الخاصة بك كعنصر تبعية للتطوير حتى لا يتم تثبيتها دون داع. أضف eslintConfigكتلة لتكوين ESLint مع الحزمة الخاصة بك. يمكنك الآن تشغيل ESLint باستخدام التكوين المخصص الخاص بك باستخدام npm run lint.
استخدام الحزم الخاصة بك في CI Builds
لا تحتاج إلى القيام بأي شيء خاص لاستخدام حزمك الخاصة في خط أنابيب CI. ستحتاج إلى تحديث البرنامج النصي CI لتسجيل الدخول إلى سجل GitLab npm. من الأفضل عادةً إنشاء رمز وصول على مستوى المشروع باستخدام نطاقات التسجيل ، بدلاً من استخدام الرمز المميز على مستوى المستخدم الخاص بك.
استخدم الأوامر الموضحة أعلاه لإعداد مصادقة npm داخل خط الأنابيب الخاص بك. يجب أن يكون npm ciالتصميم الخاص بك قادرًا على التشغيل لتنزيل تبعياتك وتشغيل ESLint.
هذا .gitlab-ci.ymlملف مثال :
stages:
- lint
lint:
stage: lint
image: node:14
script:
- npm config set @example-group:registry https://gitlab.example.com/api/v4/packages/npm/
- npm config set -- '//gitlab.example.com/api/v4/packages/npm/:_authToken' "${API_TOKEN}"
- npm ci
- npm run lint -- --cache
cache:
key: $CI_COMMIT_REF_SLUG
paths:
- .eslintcache
- node_modules/ {codeBox}
يحتوي خط الأنابيب على مرحلة واحدة تصادق على السجل الخاص وتثبت التبعيات وتستدعي أخيرًا ESLint باستخدام lintالبرنامج النصي. تم الإعداد في وقت سابق عند إنشاء package.jsonملف المشروع . للحصول على API_TOKENالقيمة في خط الأنابيب الخاص بك ، قم بإنشاء متغير بيئة في GitLab. يتيح لك هذا توفير رمز مميز بأمان دون ترميزه في ملفك.
إذا كنت تخطط لنشر حزم من CI ، فتذكر أن كل إصدار يحتاج إلى رقم إصدار فريد خاص به. ستحتاج إلى ابتكار إستراتيجية لتحديث versionالمجال package.jsonأمامك npm publish. لا يمكن الكتابة فوق علامات الحزمة الموجودة.
ملخص
يتيح لك الجمع بين نظام البرنامج المساعد ESLint وسجلات npm الخاصة في GitLab مشاركة تكوين واحد مع جميع أعضاء فريقك. يمكنك التوقف عن تكرار قواعد ESLint الخاصة بك عبر مشروعاتك ، مما يعزز الراحة وقابلية الصيانة.
يكمن الاحتكاك الوحيد في مصادقة npm لمرة واحدة عندما يحتاج فرد جديد إلى تثبيت الحزمة الخاصة بك. ضع في اعتبارك تحديث مشروعك READMEليشمل إرشادات حول تسجيل الدخول إلى السجل الخاص بك. ستستمر المصادقة حتى يتم حذف رمز GitLab API المميز الخاص بك.