بتذكرها زي كأنها مبارح، ليلة من ليالي الشتا في رام الله، والكهربا بتقطع وبتيجي، وأنا قاعد بشتغل على مشروع لعميل “مستعجل”، كالعادة. المشروع كان عبارة عن لوحة تحكم (Dashboard) فيها عشرات الواجهات المتشابهة: جداول، نماذج إدخال، بطاقات عرض. وكل واجهة بدها مكون React جديد، وكل مكون بده نفس البنية الأساسية: استيراد `React` و `useState` و `useEffect`، تعريف الدالة، قسم الـ `return` مع `JSX` فاضي، وأخيراً `export default`.

بعد ما عملت المكون الخامس بنفس الطريقة، حسيت أصابعي بتتمرد عليّ. كل نقرة على الكيبورد كانت صرخة صامتة: “كمان مرة؟ والله زهقنا!”. كنت بنسخ الكود من ملف قديم وألصقه في الجديد وأعدل الاسم، عملية ميكانيكية مملة بتقتل الإبداع وبتفتح مجال كبير للغلط. وقتها صفنت مع حالي ومع كاسة الشاي بالمرمية اللي بردت جنبي، وقلت: “يا زلمة مش معقول! إنت مبرمج، شغلتك تعمل أتمتة، معقول مش قادر تأتمت شغلك إنت؟”.

ومن هاي الصفنة، بلشت رحلتي الحقيقية مع عالم صغير بس عظيم، اسمه مقتطفات الشفرة (Code Snippets). عالم أنقذني من جحيم التكرار وخلاني أركز على اللي بحبه عنجد: حل المشاكل وبناء الأشياء الحلوة.

ما هو الـ Boilerplate يا أبو عمر؟ وليش لازم نكرهه؟

قبل ما نغوص في الحل، خلينا نحكي بصراحة عن المشكلة. الـ “Boilerplate Code” هو أي كود بتحتاج تكتبه مرة بعد مرة في أماكن مختلفة بدون أي تغيير في المنطق تبعه. هو الأساس اللي لازم تبني عليه، بس عملية البناء نفسها مكررة ومملة.

تخيل حالك طباخ شاطر، وكل مرة بدك تطبخ طبخة جديدة، لازم ترجع تصنع الطنجرة من الصفر! مش منطق، صح؟ الطنجرة هي الـ Boilerplate، إنت كطباخ بدك تركز على البهارات والمكونات والنكهة (يعني منطق البرنامج)، مش على صناعة الأداة اللي بتطبخ فيها كل مرة.

هذا الكود المتكرر مش بس ممل، هو كمان خطير لأنه:

• مضيعة للوقت: كل دقيقة بتقضيها في كتابة كود مكرر هي دقيقة مسروقة من وقت الإبداع وحل المشاكل الحقيقية.
• مصدر للأخطاء: مع كثرة النسخ واللصق، رح تنسى تعدل اسم متغير أو تستدعي دالة غلط، وتضل تدور على الخطأ ساعات.
• غير متناسق: ممكن اليوم تكتب المكون بطريقة، وبعد أسبوع تكتبه بطريقة تانية شوي، ومع الوقت بصير عندك كود “مشرشح” وصعب الصيانة.

بطل القصة: مقتطفات الشفرة (Code Snippets)

ببساطة شديدة، مقتطف الشفرة هو قالب كود جاهز ومحفوظ عندك في محرر الأكواد (زي VS Code, Sublime Text, وغيرهم). كل ما عليك هو كتابة “اختصار” معين (trigger)، والمحرر بيكمل عنك الباقي وبيفردلك القالب كامل.

فكر فيه كأنه “علي بابا” البرمجي الخاص فيك. بدل ما تقول “افتح يا سمسم”، بتكتب “rfc” مثلاً، وباب الكهف (ملف الكود) بينفتح وبيطلعلك كنز (مكون React كامل جاهز للتعبئة).

يلا نشتغل عملي: كيف تبني أول مقتطف خاص فيك على VS Code؟

الحكي حلو، بس الشغل أحلى. خلينا نفتح VS Code ونبني كم مقتطف مع بعض. الشرح هان على VS Code لأنه الأكثر استخداماً، بس المبدأ نفسه في كل المحررات.

الخطوة الأولى: وين نلاقي ملف المقتطفات؟

الموضوع بسيط جداً. افتح VS Code واضغط على Ctrl+Shift+P (أو Cmd+Shift+P على ماك) عشان تفتح لوحة الأوامر (Command Palette). اكتب فيها “Configure User Snippets” واضغط Enter.

رح تظهرلك قائمة، بتقدر تختار منها:

1. لغة برمجة معينة (مثلاً `javascript.json`): وهيك المقتطف بشتغل بس في ملفات الجافاسكريبت.
2. ملف عام (New Global Snippets file…): وهيك المقتطف بشتغل في كل أنواع الملفات.

خلينا نختار javascript.json عشان أمثلتنا.

الخطوة الثانية: تشريح بنية المقتطف

لما تفتح الملف، رح تلاقي ملف JSON فاضي مع شوية شرح. بنية أي مقتطف بتكون كالتالي:

{
  "اسم المقتطف هنا": {
    "prefix": "الاختصار اللي رح تكتبه",
    "body": [
      "سطر الكود الأول",
      "سطر الكود الثاني",
      "وهكذا..."
    ],
    "description": "وصف بسيط بيظهرلك لما تكتب الاختصار"
  }
}

مثال 1: مقتطف `console.log` للمبتدئين (الحق على حالك)

أكثر اشي بنكتبه كـ JavaScript developers هو `console.log()`. خلينا نعمله مقتطف سريع.

في ملف `javascript.json`، ضيف الكود التالي:

{
  "Print to console": {
    "prefix": "clg",
    "body": [
      "console.log('$1');",
      "$2"
    ],
    "description": "Log output to console"
  }
}

شرح سريع:

• prefix: "clg": هذا هو الاختصار.
• body: هذا هو الكود اللي رح ينطبع.
• $1: هذه اسمها “Tab Stop”. بعد ما المقتطف يظهر، المؤشر رح يوقف تلقائياً عند `$1` عشان تكتب اللي بدك اياه.
• $2: بعد ما تخلص كتابة عند `$1` وتضغط `Tab`، المؤشر رح يقفز لـ `$2`، يعني سطر جديد تحت الكود.

الآن، احفظ الملف، روح على أي ملف جافاسكريبت، اكتب `clg` واضغط `Enter`. السحر صار!

مثال 2: مقتطف مكون React (هون الشغل الصح)

هذا هو المقتطف اللي كان رح ينقذني في هذيك الليلة. بدنا نعمل مقتطف لمكون React Function Component.

افتح ملف `javascriptreact.json` (مخصص لملفات JSX) بنفس الطريقة اللي فوق، وضيف الكود التالي:

{
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "import React, { useState, useEffect } from 'react';",
      "",
      "function ${1:${TM_FILENAME_BASE}}() {",
      "  const [state, setState] = useState(null);",
      "",
      "  useEffect(() => {",
      "    // Your effect here",
      "  }, []);",
      "",
      "  return (",
      "    
",
      "      
${1:${TM_FILENAME_BASE}} Component
",
      "    
",
      "  );",
      "}",
      "",
      "export default ${1:${TM_FILENAME_BASE}};"
    ],
    "description": "Creates a React Functional Component with Hooks"
  }
}

هذا المقتطف فيه شغل محترفين، خلينا نفصصه:

• prefix: "rfc": اختصارنا المعتمد.
• ${1:${TM_FILENAME_BASE}}: هان السحر الحقيقي. TM_FILENAME_BASE هو متغير داخلي في VS Code بجيب اسم الملف بدون الامتداد. يعني لو اسم الملف `UserProfile.jsx`، هذا المتغير رح يكون قيمته `UserProfile`. وإحنا حطيناه كقيمة افتراضية للمؤشر `$1`. يعني المقتطف رح يكتب اسم المكون تلقائياً بناءً على اسم الملف!
• باقي الكود هو بنية المكون اللي بنعرفها، جاهزة ومستورد فيها الـ Hooks الأساسية.

جرب الآن اعمل ملف جديد اسمه `MyComponent.jsx`، واكتب فيه `rfc` واضغط `Enter`. شوف كيف بنالك المكون كامل بالاسم الصح وبكل التفاصيل. اشي مرتب!

نصائح من الخبير: ارتقِ بمقتطفاتك لمستوى الوحوش!

المقتطفات مش بس لكتابة كود ثابت. بتقدر تخليها تفاعلية وذكية أكثر.

استخدام المتغيرات (Variables)

زي ما شفنا $TM_FILENAME_BASE، في متغيرات كثيرة مفيدة مثل:

• $CLIPBOARD: يلصق محتوى الحافظة (Clipboard) الحالي.
• $CURRENT_YEAR: يكتب السنة الحالية (ممتاز لحقوق النشر).
• $TM_SELECTED_TEXT: يحيط النص اللي إنت محدده بالمقتطف.

خيارات متعددة (Choices)

بتقدر تعمل قائمة خيارات داخل المقتطف. مثلاً، لو بدك تختار بين `

"body": [
  "",
  "  $0",
  ""
]

عرض المقال كاملاً

سجل دخولك لعمل نقاش تفاعلي

تسجيل الدخول

أبو عمر يكتب...

كافة المحادثات خاصة ولا يتم عرضها على الموقع نهائياً

تم إغلاق هذه المحادثة بعد نشر رأيك. شكراً لمشاركتك!

شكرا لك اسعدني نقاشك وتم نشر ملخص نقاشنا بناء على طلبك!