دليل أسلوب Airbnb عبارة عن مجموعة من الإرشادات لكتابة تعليمات برمجية نظيفة ومتسقة. تم إصداره في عام 2012 وأصبح منذ ذلك الحين أحد أشهر أدلة الأنماط لمشاريع JavaScript.
يوفر مجموعة من الإرشادات لكتابة تعليمات برمجية متسقة يسهل الحفاظ عليها من خلال فرض مجموعة متنوعة من الأنماط قواعد حول المسافات البادئة والتعليقات وطول السطر الأقصى واصطلاحات التسمية المتغيرة والاقتباسات وتعريفات الوظائف. لإعداد دليل أسلوب Airbnb في مشروع JavaScript ، تحتاج إلى استخدام أداة فحص مثل ESLint.
قم بتثبيت ESLint
ESLint هو برنامج JavaScript مفتوح المصدر أداة الفحص يساعد المطورين على كتابة تعليمات برمجية نظيفة من خلال البحث عن المشكلات وإصلاحها. يمكنه اكتشاف المشكلات في التعليمات البرمجية الخاصة بك مثل أخطاء بناء الجملة والمعلمات غير الصالحة والمتغيرات غير المحددة. عند تشغيل ESLint بامتداد - -يصلح تحدد تلقائيًا أي مشكلات قابلة للإصلاح في الشفرة وتصلحها ، مما يوفر لك الوقت.
يمكنك استخدام ESLint لفرض أدلة النمط مثل دليل أسلوب Airbnb.
للبدء ، قم بتشغيل الأمر التالي في الجهاز لتثبيت ESLint كاعتماد على dev:
تثبيت npm - حفظ-dev eslint eslint-config-airbnb
ثم قم بتهيئة ESLint.
npx eslint --init
ستتم مطالبتك بأسئلة حول مشروعك. عند المطالبة بـ:
? كيف تريد استخدام EsLint؟
حدد هذا الخيار:
> للتحقق من بناء الجملة ، ابحث عن المشكلات وفرض نمط الكود
أجب عن الأسئلة التالية حسب مشروعك حتى تصادف الموجه التالي.
? كيف تريد تحديد نمط لمشروعك؟
ثم أجب على النحو التالي.
> استخدم دليل أسلوب شائع
حدد دليل نمط Airbnb للمطالبة التالية.
? ما هو دليل النمط الذي تريد اتباعه؟
> Airbnb:
أخيرًا ، قم بتثبيت التبعيات المطلوبة عن طريق تحديد "نعم" في الموجه التالي.
بمجرد انتهاء التثبيت ، يجب أن يكون لديك ملف .eslintsrc.json ملف في جذر المجلد الخاص بك.
تخصيص دليل أسلوب Airbnb
يسمح دليل أسلوب Airbnb بالتخصيص. يمكنك إضافة قواعد إضافية أو تجاوز القواعد الموجودة في ملف .eslintsrc.json ملف الضبط.
على سبيل المثال ، للسماح بحد أقصى 80 حرفًا لكل سطر ، يمكنك إضافة هذه القاعدة في قسم القواعد.
{
"يمتد": [
"المكون الإضافي: رد فعل / موصى به",
"airbnb"
],
"قواعد": {
"ماكس لين": ["خطأ", { "شفرة": 80 }]
}
}تشغيل ESLint في package.json
أضف نصًا بتنسيق package.json ملف لتشغيل ESLint.
"نصوص": {
"لينت": "eslint"
}
قم بتشغيل البرنامج النصي lint للتحقق من وجود أي أخطاء في الفحص عن طريق تنفيذ هذا الأمر.
npm تشغيل الوبر
يمكنك أيضًا إضافة برنامج نصي لإصلاح المشكلات في التعليمات البرمجية باستخدام ملف --يصلح علَم.
"نصوص": {
"لينت": "eslint",
"لينت: الإصلاح": "npm run lint - --fix"
},
جري npm تشغيل الوبر: الإصلاح على الجهاز ، سيصلح تلقائيًا أي مشكلات يمكن أن يصلحها linter.
قم بتمكين الفحص عند الحفظ في رمز VS
يمكن أن يصبح تشغيل برنامج نصي في كل مرة تريد فيها فحص التعليمات البرمجية مملاً. اتبع الخطوات أدناه لتمكين الفحص عند الحفظ في VS Code.
- انتقل إلى علامة التبويب "الامتدادات" على الجانب الأيسر من نافذة VS Code.
- ابحث عن ملف ملحق ESLint وتثبيته.
- بمجرد تثبيت الامتداد ، افتح إعدادات VS Code (ملف> تفضيلات> إعدادات أو بالضغط على Ctrl +،).
- في محرر الإعدادات ، ابحث عن "إجراءات التعليمات البرمجية عند الحفظ".
- انقر على "تعديل في settings.json" وأضف الإعدادات التالية إلى ملف الإعدادات. json ملف.
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": حقيقي
},
"eslint.validate": ["جافا سكريبت"],
"eslint.run": "onSave",
}
يتيح ذلك امتداد ESLint لإصلاح التعليمات البرمجية تلقائيًا عند الحفظ.
فوائد استخدام دليل الأسلوب
تتمثل الفائدة الرئيسية لاستخدام دليل أسلوب مثل دليل أسلوب Airbnb في أنه يساعدك في الحفاظ على قاعدة رمز متسقة. هذا مفيد في الفريق حيث يمكن للمطورين فهم قاعدة التعليمات البرمجية والمساهمة فيها بسهولة. يساعدك أيضًا على تطبيق أفضل الممارسات وتجنب أخطاء الترميز الشائعة.
