مقتطفات فيجوال ستوديو كود (VS Code Snippets): الدليل الشامل للمبتدئين

تُضفي المقتطفات (Snippets) لمسة من السحر على محرر الأكواد الخاص بك. إنها أشبه بتعويذة سحرية؛ ما عليك سوى نطق عبارة قصيرة (كتابة بادئة)، ولوح بعصاك السحرية (بالضغط على Enter أو Tab)، وفجأة! يتكشف حدث رائع أمام عينيك. ✨

تدعم معظم محررات الأكواد المقتطفات بشكل افتراضي. المحرر الذي سنستخدمه لعرض المقتطفات هو Visual Studio Code (أو VS Code اختصارًا)، وهو المحرر الأكثر شعبية في الوقت الحالي. علاوة على ذلك، توجد بعض تطبيقات “موسّع النصوص” (Text Expander) التي تتيح لك استخدام المقتطفات بشكل عام (عبر جميع التطبيقات). سأتناول بإيجاز كيفية الاستفادة من هذه التطبيقات لتحقيق أقصى استفادة من المقتطفات. لنغوص الآن في عالم المقتطفات. ?

تعريف المقتطفات (Snippets)

المقتطف (Snippet) هو قالب جاهز يمكن إدراجه في المستند. يتم إدراجه إما عن طريق أمر محدد أو من خلال نص تحفيزي (Trigger Text). باستخدام المقتطفات، يمكنك إنشاء ملفات نموذجية (Boilerplate Files) وإدراج كتل نصية شائعة الاستخدام. الفكرة العامة هي توفير عناء كتابة نفس الأشياء مرارًا وتكرارًا.

لماذا يجب عليك استخدام المقتطفات؟

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

المعسكر المؤيد للمقتطفات (Yay Camp ?)

• يمكن للمقتطفات أن تعزز إنتاجيتك، وتوفر عليك ضغطات المفاتيح، وتقلل من أخطاء الإدخال.
• تترك لي المقتطفات المزيد من “المعالجة الذهنية” (Mental CPU) والمتعة لأقضيها في كتابة الكود الذي أهتم به وأرغب في التركيز عليه.
• يمكن للمقتطفات أن تساعدك على تذكر تضمين شيء مهم! دمج المقتطفات في سير عملك يشجعك ضمنيًا على استخدام الفأرة بشكل أقل.
• توفر المقتطفات المكتوبة جيدًا مسارًا منطقيًا يمكنك التنقل خلاله باستخدام Tab، والتوقف للتعديل على طول الطريق لإكمال القالب بالطريقة التي تريدها تمامًا، وعند الانتهاء، تكون جاهزًا لكتابة السطر التالي من الكود.

المعسكر المعارض للمقتطفات (Nay Camp ?)

• أمتنع عن استخدامها، غالبًا لأنني لا أحب الاعتماد على أي أداة معينة.
• لا أستخدم المقتطفات أبدًا. أفضل استثمار الوقت في تجنب التكرار بدلاً من تسهيله.
• لقد وجدت أنني في مرحلة ما نسيت كيفية كتابة الكود بدون استخدام المقتطف. بالنسبة للأشياء البسيطة التي أفهمها، لا بأس بذلك، لكنني لا أريد أن أنسى أشياء أخرى!
• معظم، إن لم يكن كل، المقتطفات التي رأيتها عبر الإنترنت، للكود الذي أبحث عنه، تحتوي على أخطاء. لم أتمكن ولو لمرة واحدة من العثور على خوارزمية عددية لا تحتوي على أخطاء في الفاصلة العائمة (Floating Point Errors). لا أستطيع أن أتخيل وجود أي مصدر لمقتطفات كود نظيفة تمامًا.

متى يجب عليك استخدام المقتطفات؟

قال دونالد كنوث، أحد أبرز علماء الحاسوب، إن “التحسين المبكر [للكود] هو أصل كل الشرور”. أعتقد أن هذا ينطبق أيضًا على المقتطفات. المقتطفات هي تحسين لعملية إنتاج الكود. إذا لم تكن ملمًا بلغة أو إطار عمل معين بشكل جيد، فمن المحتمل أن يكون تطبيق مجموعة كبيرة من المقتطفات لتلك اللغة أو إطار العمل خطوة سابقة لأوانها. إذا كنت مرتاحًا وملمًا، فجرّب بعضها!

ما هي استخداماتي للمقتطفات؟

شخصيًا، أستخدم المقتطفات كثيرًا ولكن بحكمة. أستخدم مجموعة من المقتطفات للغة Markdown ومعظم اللغات التي أعمل بها. لم أستخدم المقتطفات كثيرًا لأطر العمل (Frameworks). بدأت مؤخرًا في استخدام بعض المقتطفات لإطار عمل Vue، لكنني أستخدم فقط المقتطفات النموذجية (Boilerplate Snippets). من المحتمل أن أتبنى المزيد منها بمجرد أن يرتفع مستوى فهمي لـ Vue. لم أستخدم المقتطفات للخوارزميات.

أنواع المقتطفات

يمكن تصنيف المقتطفات بناءً على نطاق التفاعل بين المقتطف والمحرر.

المقتطفات الثابتة (Static Snippets)

يمكنك اعتبارها عملية نسخ ولصق لنص مصدر معين كأمر واحد.

المقتطفات الديناميكية (Dynamic Snippets)

يمكن تخصيص المقتطف الديناميكي لتوفير تجربة شبيهة بالمعالج (Wizard-like) لإكمال المقتطف. يمكن أن يتضمن ما يلي:

• نقاط التوقف (Tab Stops): يمكنك ترقيم نقاط التوقف التي يمكن التنقل بينها بالضغط على Tab بالترتيب.
• نقاط التوقف المتطابقة (Mirrored Tab Stops): هناك أوقات تحتاج فيها إلى توفير نفس القيمة في عدة أماكن داخل النص المدرج. يمكنك مطابقة نقطة توقف لتحقيق ذلك، وسيتم عكس أي تعديل في نقاط التوقف المرتبطة على الفور.
• العناصر النائبة (Placeholders): هي نقطة توقف بقيمة افتراضية يمكن الكتابة فوقها عند التركيز.
• الخيارات (Choices): عند نقطة توقف، يتم تقديم قائمة منسدلة من القيم لتختار منها.
• المتغيرات (Variables): قيم إدخال من البيئة مثل: النص المحدد في المحرر، تواريخ النظام، أو المحتوى من الحافظة.

إليك مثال على مقتطف Markdown يضيف قائمة مهام تحتوي على مهمتين. يستخدم نقاط التوقف (Tab Stops)، والعناصر النائبة (Placeholders)، والخيارات (Choices) لتحديد حالة المهمة.

المقتطفات الكلية (Macro Snippets)

أعلى مستويات “السحر” هو القدرة على تحويل المدخلات. تسمح لك التحويلات (Transformations) بتغيير قيمة المتغير قبل إدراجه، أو تعديل عنصر نائب (Placeholder) بعد إجراء تعديل. على سبيل المثال، قد ترغب في تحويل اسم فئة (Class Name) إلى أحرف كبيرة بمجرد إدخاله. أي شيء يمكنك التفكير في القيام به باستخدام التعبيرات النمطية (regex) ممكن عادةً. توفر بعض المحررات إمكانيات برمجة نصية أكثر تقدمًا.

المقتطفات في فيجوال ستوديو كود (Visual Studio Code)

في VS Code، تظهر المقتطفات في IntelliSense (حيث يمنحك الضغط على Ctrl+Space قائمة اقتراحات)، وهي مختلطة مع اقتراحات أخرى. يمكنك أيضًا الوصول إليها في منتقي مقتطفات مخصص باستخدام الأمر 'Insert Snippet'. يجمع هذا الأمر جميع المقتطفات الخاصة بالمستخدم، والإضافات، والمقتطفات المدمجة لتلك اللغة في قائمة واحدة.

تم دمج Emmet في VS Code ولديه بناء جملة خاص به مستوحى من محددات CSS لإدراج مقتطفات HTML و CSS. Emmet هو كيان مستقل في الواقع، لكن آلياته هي نفسها. يمكنك معرفة المزيد عن Emmet من خلال دليل Emmet in Visual Studio Code.

إعدادات المستخدم ذات الصلة

ستظهر المقتطفات كاقتراحات سريعة إذا تم تعيين الإعداد editor.quickSuggestions على true للغة التي تعمل بها. يتم تمكين الاقتراحات السريعة افتراضيًا لمعظم اللغات باستثناء Markdown.

تدعم المقتطفات الإكمال بالضغط على Tab. يمكنك كتابة بادئة المقتطف (النص المحفز)، والضغط على Tab لإدراج المقتطف. يمكنك تمكينه باستخدام الإعداد editor.tabCompletion. القيم المتاحة هي:

• on: تمكين الإكمال بالضغط على Tab لجميع المصادر.
• off: تعطيل الإكمال بالضغط على Tab. هذه هي القيمة الافتراضية.
• onlySnippets: الإكمال بالضغط على Tab للمقتطفات فقط.

 "editor.tabCompletion" : "onlySnippets" 

إذا كنت ترغب في التحكم في كيفية عرض اقتراحات المقتطفات، يمكنك تعديل الإعداد editor.snippetSuggestions. القيم المتاحة هي:

• top: عرض اقتراحات المقتطفات في أعلى قائمة الاقتراحات الأخرى. أنا أستخدم هذه القيمة.
• bottom: عرض اقتراحات المقتطفات أسفل الاقتراحات الأخرى.
• inline: عرض اقتراحات المقتطفات مع الاقتراحات الأخرى. هذه هي القيمة الافتراضية.
• none: عدم عرض اقتراحات المقتطفات.

 "editor.snippetSuggestions" : "top" 

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

هل توجد مقتطفات مدمجة؟

نعم! لكنها غير موثقة في مستندات VS Code. وداخل VS Code، لا توجد نقطة مركزية لتصفحها. لذلك، قد لا تعرف ما هي. فكيف يمكنك معرفة اللغات التي تحتوي على مقتطفات مدمجة؟ باختصار، شعرت بالإحباط من هذا السيناريو، لذلك كتبت إضافة تسمى Snippets Ranger لتوفير واجهة مستخدم جميلة لاستكشاف المقتطفات بسهولة. فكر فيها كـ “خريطة اللصوص” (Marauder's Map) للمقتطفات!

ولكنني أرغب في العثور على المقتطفات بنفسي؟

يمكنك ذلك، لكنه يتطلب بعض الجهد الإضافي. كما ذكرت سابقًا، سيعرض لك الأمر 'Insert Snippet' جميع المقتطفات للغة المستند النشط. تذكر أن هذه القائمة هي تجميع لجميع مقتطفات المستخدم، والإضافات، والمقتطفات المدمجة. لذلك، إذا كنت تريد معرفة ما إذا كانت لغة معينة تحتوي على مقتطفات مدمجة، فستحتاج إلى فتح ملف لتلك اللغة، وتشغيل الأمر لرؤية تلك القائمة. إذا كانت لديك إضافة مقتطفات مثبتة لتلك اللغة تجعل من الصعب تحديد أيها ينتمي لأي فئة، فيمكنك تعطيلها لضمان عرض المقتطفات المدمجة فقط. ?
إذا كنت ترغب في تتبع ملف المصدر بنفسك، فإن المقتطفات المدمجة توجد داخل دليل كل إضافة لغة فردية. يوجد الملف في المسار «app root»\resources\app\extensions\«language»\snippets\«language».code-snippets على نظام التشغيل Windows. الموقع مشابه لأنظمة Mac و Linux.

إضافات المقتطفات (Snippets Extensions)

يحتوي Visual Studio Marketplace على فئة مخصصة للمقتطفات حيث يمكنك العثور على مقتطفات لأي شيء تقريبًا. تتضمن العديد من إضافات حزم لغات البرمجة مقتطفات أيضًا (مثل Python، C#، Go، Java، و C/C++ وغيرها).

كيف أقوم بكتابة مقتطفاتي الخاصة؟

تُكتب ملفات المقتطفات بصيغة JSON. يمكنك أيضًا إضافة تعليقات بأسلوب C إذا رغبت في ذلك (وهو تقنيًا تنسيق "JSONC" الخاص بشركة مايكروسوفت). يمكنك إنشاء مقتطفات لنطاقات مختلفة: عام (global)، مساحة عمل (workspace)، ولغة معينة (particular language).
لإنشاء ملف المقتطفات، قم بتشغيل الأمر 'Preferences: Configure User Snippets'، والذي سيفتح مربع حوار اختيار سريع كما هو موضح أدناه. سيؤدي اختيارك إلى فتح ملف للتحرير.

إذا كنت تفضل كتابة مقتطف في واجهة رسومية (GUI)، يمكنك استخدام تطبيق الويب snippet generator.

دعنا نلقي نظرة على مثال للتعرف على بناء الجملة.

مثال

إليك مقتطف Markdown يأتي مع VS Code.

{ "Insert heading level 1" : { "prefix" : "heading1" , "body" : [ "# ${1:${TM_SELECTED_TEXT}}$0" ], "description" : "Insert heading level 1" } }

يقوم هذا المقتطف بإدراج عنوان من المستوى الأول يلتف حول التحديد الحالي في Markdown (إن وجد).
يحتوي المقتطف على الخصائص التالية:

• "Insert heading level 1" هو اسم المقتطف. هذه هي القيمة التي تظهر في قائمة اقتراحات IntelliSense إذا لم يتم توفير description.
• خاصية prefix تحدد العبارة المحفزة (Trigger Phrase) للمقتطف. يمكن أن تكون سلسلة نصية (string) أو مصفوفة من السلاسل النصية (إذا كنت تريد عبارات تحفيز متعددة). يتم إجراء مطابقة جزئية (Substring Matching) على البادئات، لذا في هذه الحالة، ستؤدي كتابة "h1" إلى مطابقة مثالنا.
• خاصية body هي المحتوى الذي يتم إدراجه في المحرر. وهي عبارة عن مصفوفة من السلاسل النصية، تمثل سطرًا واحدًا أو أكثر من المحتوى. يتم ضم المحتوى معًا قبل الإدراج.
• خاصية description يمكن أن توفر المزيد من المعلومات حول المقتطف. وهي اختيارية.
• خاصية scope تسمح لك باستهداف لغات معينة، ويمكنك توفير قائمة مفصولة بفواصل في السلسلة النصية. وهي اختيارية. بالطبع، تكون زائدة عن الحاجة لملف مقتطف خاص بلغة معينة.

يحتوي جسم هذا المقتطف على نقطتي توقف (tab stops) ويستخدم المتغير ${TM_SELECTED_TEXT}. دعنا نتعمق في بناء الجملة لفهم هذا بشكل كامل.

بناء جملة المقتطفات (Snippet Syntax)

بناء جملة المقتطفات في VS Code هو نفسه بناء جملة مقتطفات TextMate. ومع ذلك، فإنه لا يدعم ‘كود الشل المدمج’ (interpolated shell code) واستخدام تحويل \u.
يدعم body المقتطف الميزات التالية:

1. نقاط التوقف (Tab Stops)

تُحدد نقاط التوقف (Tab Stops) بعلامة الدولار ورقم ترتيبي، مثل $1. ستكون $1 هي الموقع الأول، و $2 هي الموقع الثاني، وهكذا. $0 هو الموضع النهائي للمؤشر، والذي ينهي وضع المقتطف.
على سبيل المثال، لنفترض أننا نريد إنشاء مقتطف HTML div ونريد أن تكون نقطة التوقف الأولى بين وسمي الفتح والإغلاق. نريد أيضًا السماح للمستخدم بالانتقال خارج الوسوم لإنهاء المقتطف. عندها يمكننا إنشاء مقتطف مثل هذا:

{ "Insert div" : { prefix: "div" , body: [ "<div>" , "$1" , "</div>" , "$0" ] } }

2. نقاط التوقف المتطابقة (Mirrored Tab Stops)

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

{ "For Loop" : { "prefix" : "for" , "body" : [ "for (let ${1:index} = 0; ${1:index} < ${2:array}.length; ${1:index}++) {" , "\tconst ${3:element} = ${2:array}[${1:index}];" , "\t$0" , "}" ] } }

3. العناصر النائبة (Placeholders)

العناصر النائبة (Placeholders) هي نقاط توقف بقيم افتراضية. يتم تغليفها بأقواس معقوفة، على سبيل المثال ${1:default}. يتم تحديد نص العنصر النائب عند التركيز بحيث يمكن تحريره بسهولة. يمكن أن تكون العناصر النائبة متداخلة، مثل هذا: ${1:first ${2:second}}.

4. الخيارات (Choices)

تقدم الخيارات (Choices) للمستخدم قائمة من القيم عند نقطة توقف. تُكتب كقائمة قيم مفصولة بفواصل ومحاطة برموز الأنبوب (Pipe-characters)، على سبيل المثال ${1|yes,no|}. هذا هو الكود الخاص بمثال Markdown الذي عُرض سابقًا لإدراج قائمة مهام. الخيارات هي 'x' أو مسافة فارغة.

{ "Insert task list" : { "prefix" : "task" , "body" : [ "- [${1| ,x|}] ${2:text}" , "${0}" ] } }

5. المتغيرات (Variables)

توجد مجموعة جيدة من المتغيرات التي يمكنك استخدامها. ما عليك سوى إضافة علامة الدولار قبل الاسم لاستخدامها، على سبيل المثال $TM_SELECTED_TEXT. على سبيل المثال، سيقوم هذا المقتطف بإنشاء تعليق كتلة (Block Comment) لأي لغة بتاريخ اليوم:

{ "Insert block comment with date" : { prefix: "date comment" , body: [ "${BLOCK_COMMENT_START}" , "${CURRENT_YEAR}/${CURRENT_MONTH}/${CURRENT_DATE} ${1}" , "${BLOCK_COMMENT_END}" ] } }

يمكنك تحديد قيمة افتراضية للمتغير إذا أردت، مثل ${TM_SELECTED_TEXT:default}. إذا لم يتم تعيين قيمة لمتغير، يتم إدراج القيمة الافتراضية أو سلسلة نصية فارغة. إذا ارتكبت خطأً وضمّنت اسم متغير غير معرف، يتم تحويل اسم المتغير إلى عنصر نائب (Placeholder).
يمكن استخدام متغيرات مساحة العمل (workspace variables) التالية:

• TM_SELECTED_TEXT: النص المحدد حاليًا أو سلسلة نصية فارغة.
• TM_CURRENT_LINE: محتويات السطر الحالي.
• TM_CURRENT_WORD: محتويات الكلمة تحت المؤشر أو سلسلة نصية فارغة.
• TM_LINE_INDEX: رقم السطر المستند إلى فهرس صفر (Zero-index based).
• TM_LINE_NUMBER: رقم السطر المستند إلى فهرس واحد (One-index based).
• TM_FILENAME: اسم ملف المستند الحالي.
• TM_FILENAME_BASE: اسم ملف المستند الحالي بدون امتداداته.
• TM_DIRECTORY: دليل المستند الحالي.
• TM_FILEPATH: المسار الكامل لملف المستند الحالي.
• CLIPBOARD: محتويات الحافظة الخاصة بك.
• WORKSPACE_NAME: اسم مساحة العمل أو المجلد المفتوح.

يمكن استخدام المتغيرات المتعلقة بالوقت (time-related variables) التالية:

• CURRENT_YEAR: السنة الحالية.
• CURRENT_YEAR_SHORT: آخر رقمين من السنة الحالية.
• CURRENT_MONTH: الشهر كرقمين (مثال ’07’).
• CURRENT_MONTH_NAME: الاسم الكامل للشهر (مثال ‘July’).
• CURRENT_MONTH_NAME_SHORT: الاسم المختصر للشهر (مثال ‘Jul’).
• CURRENT_DATE: يوم الشهر.
• CURRENT_DAY_NAME: اسم اليوم (مثال ‘Monday’).
• CURRENT_DAY_NAME_SHORT: الاسم المختصر لليوم (مثال ‘Mon’).
• CURRENT_HOUR: الساعة الحالية بتنسيق 24 ساعة.
• CURRENT_MINUTE: الدقيقة الحالية.
• CURRENT_SECOND: الثانية الحالية.
• CURRENT_SECONDS_UNIX: عدد الثواني منذ حقبة يونكس (Unix epoch).

يمكن استخدام متغيرات التعليقات (comment variables) التالية. وهي تحترم بناء جملة لغة المستند:

• BLOCK_COMMENT_START: على سبيل المثال، <!-- في HTML.
• BLOCK_COMMENT_END: على سبيل المثال، --> في HTML.
• LINE_COMMENT: على سبيل المثال، // في JavaScript.

6. التحويلات (Transformations)

يمكن تطبيق التحويلات (Transformations) على متغير أو عنصر نائب (Placeholder). إذا كنت على دراية بالتعبيرات النمطية (regex)، فإن معظم هذا يجب أن يكون مألوفًا لك. تنسيق التحويل هو: ${«variable or placeholder»/«regex»/«replacement string»/«flags»}. وهو مشابه لدالة String.prototype.replace() في JavaScript. تقوم “المعاملات” بما يلي:

• «regex»: هذا هو تعبير نمطي تتم مطابقته مع قيمة المتغير أو العنصر النائب. يتم دعم بناء جملة تعبيرات JavaScript regex.
• «replacement string»: هذه هي السلسلة النصية التي تريد استبدال النص الأصلي بها. يمكنها الإشارة إلى مجموعات الالتقاط (Capture Groups) من «regex»، وإجراء تنسيق الحالة (باستخدام الدوال الخاصة: /upcase، /downcase، و /capitalize)، وإجراء إدراجات شرطية. راجع TextMate Replacement String Syntax لمزيد من المعلومات المتعمقة.
• «flags»: العلامات التي يتم تمريرها إلى التعبير النمطي. يمكن استخدام علامات JavaScript regex:
  • g: بحث عام (Global search).
  • i: بحث غير حساس لحالة الأحرف (Case-insensitive search).
  • m: بحث متعدد الأسطر (Multi-line search).
  • s: يسمح لـ . بمطابقة أحرف السطر الجديد (Newline characters).
  • u: يونيكود. تعامل النمط كسلسلة من نقاط كود يونيكود (Unicode code points).
  • y: إجراء بحث “لاصق” (Sticky search) يطابق بدءًا من الموضع الحالي في السلسلة الهدف.

للإشارة إلى مجموعة التقاط (Capture Group)، استخدم $n حيث n هو رقم مجموعة الالتقاط. استخدام $0 يعني المطابقة بأكملها. قد يكون هذا مربكًا بعض الشيء نظرًا لأن نقاط التوقف (Tab Stops) لها نفس بناء الجملة. فقط تذكر أنه إذا كانت محتواة داخل خطوط مائلة للأمام (Forward Slashes)، فإنها تشير إلى مجموعة التقاط.
أسهل طريقة لفهم بناء الجملة بالكامل هي مراجعة بعض الأمثلة.

كما ترى من المثال الثاني أعلاه، يجب أن يتم الهروب من تسلسلات الأحرف الوصفية (metacharacter sequences)، على سبيل المثال أدخل \w لحرف كلمة (Word Character).

تحويلات العناصر النائبة (Placeholder Transformations)

لا تسمح تحويلات العناصر النائبة (Placeholder Transforms) بقيمة افتراضية أو خيارات! ربما يكون من الأنسب تسميتها تحويلات نقاط التوقف. المثال أدناه سيقوم بتحويل نص نقطة التوقف الأولى إلى أحرف كبيرة.

{ "Uppercase first tab stop" : { "prefix" : "up" , "body" : [ "${1/.*/${0:/upcase}/}" , "$0" ] } }

يمكنك الحصول على عنصر نائب (Placeholder) وإجراء تحويل على نسخة متطابقة (Mirrored Instance). لن يتم إجراء التحويل على العنصر النائب الأولي. ? هل ستستخدم هذا السلوك في مكان ما؟ أجده مربكًا في البداية، لذلك قد يكون له نفس التأثير على الآخرين.

{ "Uppercase second tab stop instance only" : { "prefix" : "up" , "body" : [ "${1:title}" , "${1/(.*)/${1:/upcase}/}" , "$0" ] } }

كيف أقوم بتعيين اختصارات لوحة المفاتيح للمقتطفات؟

عن طريق إضافة اختصاراتك إلى ملف keybindings.json. يمكنك فتح الملف بتشغيل الأمر 'Preferences: Open Keyboard Shortcuts File (JSON)'.
على سبيل المثال، لإضافة اختصار لمقتطف Markdown المدمج "Insert heading level 1":

{ "key" : "ctrl+m ctrl+1" , "command" : "editor.action.insertSnippet" , "when" : "editorTextFocus && editorLangId == markdown" , "args" : { "langId" : "markdown" , "name" : "Insert heading level 1" } }

يمكنك تعريف اختصار عن طريق تحديد مجموعة المفاتيح التي تريد استخدامها، ومعرف الأمر (command ID)، وشرط when اختياري للسياق الذي يتم فيه تمكين اختصار لوحة المفاتيح.
من خلال الكائن args، يمكنك استهداف مقتطف موجود باستخدام الخاصيتين langId و name. الوسيط langId هو معرف اللغة (Language ID) للغة التي كُتبت المقتطفات من أجلها. و name هو اسم المقتطف كما هو محدد في ملف المقتطف.
يمكنك تعريف مقتطف مضمن (Inline Snippet) إذا أردت باستخدام خاصية snippet.

[ { "key" : "ctrl+k 1" , "command" : "editor.action.insertSnippet" , "when" : "editorTextFocus" , "args" : { "snippet" : "${BLOCK_COMMENT_START}${CURRENT_YEAR}/${CURRENT_MONTH}/${CURRENT_DATE} ${1} ${BLOCK_COMMENT_END}" } } ]

يمكنك استخدام واجهة المستخدم لاختصارات لوحة المفاتيح (Keyboard Shortcuts UI) أيضًا، لكنها لا تملك القدرة على إضافة اختصار جديد. عيب آخر في واجهة المستخدم هو أنها لا تعرض الكائن args، مما يجعل العثور على اختصاراتك المخصصة وتعديلها أكثر صعوبة. ?

مسألة أسلوب

شيء وجدته مزعجًا في البداية مع المقتطفات هو ميل الناس لإنشاء مقتطفات ببادئات مختصرة. هل يجب عليّ تعلم قائمة طويلة من الاختصارات الغامضة لاستخدام مقتطفات شخص آخر؟ ماذا أعني بالبادئات المختصرة؟ يسرد الجدول أدناه بعض المقتطفات من إضافة JavaScript (ES6) code snippets VS Code. يمكنك أن ترى في عمود “المحفز” (Trigger)، أن البادئات المدرجة هي اختصارات، على سبيل المثال fre لتمثيل حلقة "for each".

هذا غير ضروري بطريقتين. أولاً، يتم إنتاج الاقتراحات السريعة التي يقدمها VS Code من بحث جزئي غامض (Fuzzy Substring Search). إذا كتبت "fe" وكانت بادئة المقتطف "foreach"، فستتم المطابقة وسيتم تقديمها كاقتراح سريع. كما ترى أدناه، هذه هي المطابقة الثانية.

المطابقة الأولى هي fre، وهو مقتطف من الإضافة. أي اقتراح أكثر وصفًا؟ ? إذا استخدمت الأمر "Insert Snippet" للمقتطفات، فلن يحدث فرقًا كبيرًا. يعوض حقل الوصف (description field) هذا النقص. أنا لا أستخدم المقتطفات بهذه الطريقة، لذلك أفضل بادئة أكثر وصفًا.

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

بالنظر إلى المثال أعلاه، يمكنك أن ترى أن كتابة "fr" والضغط على Tab يُدرج مقتطف fre. وكتابة "fore" والضغط على Tab يُدرج مقتطف foreach. لذا، لا تحتاج إلى كتابة البادئة بأكملها إذا كنت لا ترغب في ذلك حقًا! ? إذا كان لديك العديد من بادئات المقتطفات المتشابهة في التسمية للغة معينة، فسيكون ذلك غير عملي على ما أعتقد. من الأكثر عملية تعلم البادئات بشكل صحيح، وكتابتها بالكامل قبل الضغط على Tab.
هناك بعض المفاضلات اعتمادًا على تفضيلاتك لاستخدام المقتطفات. شخصيًا، أحب استخدام الاقتراحات السريعة لأنني أحب التغذية الراجعة المرئية. لقد قمت بتعيين المقتطفات لتكون في أعلى الاقتراحات، وبهذه الطريقة يمكنني كتابة إصدارات مختصرة من البادئات دون الحاجة إلى حفظها. لدى بعض مؤلفي المقتطفات أنماط صارمة للتغلب على هذا، لكن هذا شيء لا يمكنني التعمق فيه بسهولة. إذا كنت تستخدم الكثير من المقتطفات للغة معينة، فقد ترغب في اختيار مقتطفات مكتوبة بأسلوب مشابه. إذا كنت تستخدم مقتطفات لأطر عمل ومكتبات مختلفة في لغة ما، فيمكن أن تتراكم وتتداخل. لم أحتاج إلى القيام بذلك، لكن قد تحتاج إليه في النهاية.

المقتطفات العامة (Global Snippets)

خارج محرر الكود الخاص بك، يمكنك الاستفادة من المقتطفات أيضًا. توفر توفر المقتطفات في كل تطبيق المزيد من الإمكانيات. حالات الاستخدام الشائعة هي: الردود الجاهزة للرسائل، التصحيح التلقائي للأخطاء الإملائية الشائعة، إضافة معلومات الاتصال أو التوقيعات إلى المستندات، إدراج التواريخ، تنسيق النص المحدد والنص الملصق، إدراج عبارات البحث لمحرك البحث أو التطبيق الخاص بك، مقتطفات HTML المتاحة داخل عميل البريد الإلكتروني الخاص بك، إضافة قوالب مختلفة إلى المستندات.
يتم الترويج لمعظم تطبيقات المقتطفات على أنها “موسعات نصوص” (Text Expanders)، ولكن عددًا لا بأس به من تطبيقات المهام والإنتاجية تتضمن أيضًا ميزات شبيهة بالمقتطفات.
تعتبر المقتطفات العامة (Global Snippets) أكثر محدودية قليلاً من مقتطفات محرر الأكواد، حيث لا يمكنك استخدام نقاط التوقف (Tab Stops) والعناصر النائبة (Placeholders). في معظم التطبيقات، يمكنك استخدام بعض المتغيرات الديناميكية مثل التواريخ.

مراجعة التطبيقات

Autohotkey (Windows)

AutoHotkey هي لغة برمجة نصية مجانية ومفتوحة المصدر لنظام Windows لأداء جميع أنواع المهام. لديها بناء جملة فريد خاص بها. يمكنك تثبيت إضافة AutoHotKey لإضافة دعم اللغة إلى VS Code لتجربة تحرير أفضل.
لتحديد البادئات لتحفيز إدراج مقتطف، تستخدم التنسيق التالي: ::<<prefix>>::<<text to insert>>. سيقوم السكريبت التالي بإدراج عنوان بريد روب الإلكتروني عندما تكتب "robmail" وتضغط على Space أو Tab أو Enter.

::robmail::rob@someservername.com

سيقوم السكريبت التالي بإدراج النص "This is the snippet text" عندما تضغط على Ctrl+D.

^d:: Send This is the snippet text

يمكنك قراءة الوثائق لمعرفة المزيد.

PhraseExpress (Windows, Mac, iOS)

PhraseExpress هو “برنامج موسع نصوص يدير قوالب النصوص المستخدمة بشكل متكرر لإدراجها في أي برنامج”. إنه تطبيق مجاني جزئيًا (freemium) ويعتمد على واجهة رسومية (GUI-based app). يستهدف جمهورًا أوسع من AutoHotKey. إنه مصقول وسهل الاستخدام للغاية. يمكنك ضبطه للتشغيل عند بدء التشغيل وسيكون نشطًا في الخلفية. يمكن تنظيم مقتطفاتك في مجلدات مخصصة ومزامنتها باستخدام الخدمات السحابية.

Espanso (Windows, Mac, Linux)

هذا موسع نصوص مفتوح المصدر ومتعدد المنصات مكتوب بلغة Rust. يستخدم منهج تكوين يعتمد على الملفات. تُكتب ملفات التكوين بلغة YAML. يحتوي ملف default.yml على التكوين الرئيسي. سيقوم التكوين أدناه بإدراج عنوان بريد روب الإلكتروني عندما تكتب "robmail".

 matches: - trigger: ":robmail" replace: "rob@someservername.com" 

يمكنك تحديد موضع المؤشر الأولي، ومع ذلك لا يمكنك تعريف نقاط توقف (Tab Stops). يمكنك إضافة إضافات لزيادة قدرة Espanso. توجد إضافات لتشغيل سكريبتات خارجية، وتضمين التواريخ، وتوليد نصوص عشوائية، وتضمين بيانات الحافظة. وهذا كل شيء تقريبًا! آمل أن تكون قد تعلمت شيئًا عن المقتطفات اليوم، وأن تتمكن من استخدامها لتصبح أكثر إنتاجية.

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

تُعد المقتطفات (Snippets) أداة قوية لا غنى عنها في ترسانة أي مطور يسعى لتعزيز إنتاجيته وتقليل الأخطاء المتكررة. من خلال فهم أنواعها المختلفة، بدءًا من الثابتة وصولاً إلى الديناميكية التي تدعم المتغيرات والتحويلات، يمكن للمطورين تخصيص تجربة البرمجة الخاصة بهم بشكل كبير. سواء كنت تستخدم مقتطفات VS Code المدمجة، أو تنشئ مقتطفاتك الخاصة، أو تستفيد من تطبيقات موسعات النصوص العالمية، فإن الاستثمار في تعلم هذه الأداة سيؤتي ثماره في توفير الوقت والجهد، مما يتيح لك التركيز على الجوانب الأكثر إبداعًا وتعقيدًا في مشاريعك البرمجية.