استخدام فعّال لكود الشيفرات في VS Code

عند كتابة آخر قطعة من الشفرة في محرر الشفرة المرئي (VS Code)، هل تجد نفسك تكتب نفس الشيء مرارًا وتكرارًا؟ ربما قمت بكتابة تعريف لدالة عشر مرات اليوم أو قمت بتعريف نفس مجموعة المعاملات للمرة العشرون. هل تعلم أنه يمكنك استعادة وقتك وعقليتك باستخدام مقتطفات محرر الشفرة المرئي؟

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

على سبيل المثال، يمكنك أن ترى في الأسفل ببساطة عند كتابة wvb في محرر الشفرة المرئي، لديك خيار لتوسيع النص بشكل أكبر، كما هو موضح بواسطة النص Write-Verbose في المربع. هذا هو قوة المقتطفات!

في هذه المقالة، ستتعلم كيفية العمل مع مقتطفات محرر الشفرة المرئي، بما في ذلك استخدام المقتطفات الافتراضية والمقتطفات المضافة وحتى إنشاء المقتطفات الخاصة بك!

الشروط المسبقة

سيكون هذا مقالًا تفصيليًا لتطبيق ما تعلمته. إذا كنت تنوي متابعة تعلم كيفية العمل مع مقتطفات محرر الشفرة المرئي، فستحتاج إلى إصدار VS Code 1.17 أو أحدث. للكشف الكامل، سأستخدم VS Code 1.38.1 على نظام التشغيل Windows.

يمكنك تنزيل أحدث إصدار من VS Code لمنصتك المحددة هنا.

العثور على مقتطفات محرر الشفرة المرئي

قبل أن تبدأ في بناء قطع الشفرة الخاصة بك (التي ستقوم بها) ، من المهم أن تتعلم كيفية العثور على قطع الشفرة المدمجة المتاحة لك.

يمكنك العثور على جميع قطع الشفرة في واجهة القائمة. تتيح واجهة القائمة لك مراجعة واستخدام قطع الشفرة. للوصول إلى القائمة ، يمكنك إما الضغط على F1 أو Ctrl-Shift-P ، اكتب “قطعة شفرة” واضغط على Enter. سترى قائمة تظهر مشابهة لما تراه أدناه.

عند الضغط على Enter على إدراج قطعة شفرة ، سترى شريطًا منسدلاً يحتوي على قطع الشفرة المتاحة ، كما هو موضح أدناه. يمكنك رؤية أن هناك العديد من قطع الشفرة المتاحة افتراضيًا ورؤية المزيد عن طريق التمرير لأسفل.

شريط القطع المتاحة يتيح لك استعراض قطع الشفرة المدمجة المتاحة من خلال إضافة امتداد للغة في VS Code.

امتدادات اللغة

يمكنك استخدام VS Code للعمل مع العديد من اللغات المختلفة. لكل لغة خصوصياتها الخاصة. لدعم هذه الاختلافات ، يدعم VS Code امتدادات اللغة.

توفر امتدادات اللغة لـ VS Code ميزات التحرير الذكية للغات البرمجة المختلفة. تمنح امتدادات اللغة البرمجية دعمًا إضافيًا مثل:

• تظليل البناء السينتاكسي
• IntelliSense
• التنسيق
• فحص الأخطاء
• اكتمال قطع الشفرة

تثبيت الامتدادات من خلال قائمة امتدادات VS Code.

يمكنك مراجعة تعريف هذه الشظايا المقدمة من قبل ملحقات اللغة عن طريق فتح ملف JSON على نظام ويندوز الموجود في C:\Users<اسم_المستخدم>.vscode\extensions\ms-code.-\snippets.

الملحقات ، في حد ذاتها ، ليس لها علاقة بالشظايا ولكن ستجد أن العديد من الملحقات تأتي مع شظايا مدمجة يجب أن تكون على علم بها.

توسيع الشظايا

عند تحديد شظية من خلال واجهة القائمة ، سترى محتويات الشظية على ملف. هذه العملية لتحويل تعريفات الشظايا إلى رمز مفيد تسمى توسيع.

عند استدعاء البادئة ، يقرأ VS Code تلك البادئة المحددة ويقوم بتشغيل التعليمات التي تحددها في الشظية. يمكن أن تختلف هذه التعليمات من شظية إلى أخرى. يُطلق على هذه العملية بأكملها من استدعاء وتحويل وإدراج الشظية التوسيع.

استخدام شظايا ملحقات VS Code

تأتي بعض الشظايا بشكل افتراضي في VS Code ولكن عند تثبيت ملحق ، قد تأتي بشظايا خاصة بها أحيانًا. أمثلة على الملحقات التي تحتوي على شظايا مضمنة هي ملحق Python من Microsoft ، ملحق PowerShell من Microsoft ، و ملحق C# من Microsoft.

مكان تخزين شظايا الملحقات.

تُثبّت هذه الامتدادات عادةً في نظام التشغيل ويندوز تحت المسار التالي: C:\Users<اسم_المستخدم>.vscode\extensions.

تتبع المجلدات للامتدادات تصطيفة ms-vscode.-. يحتوي كل من هذه المجلدات على مجلد snippet يحتوي على القصاصات المضمّنة في الامتداد.

مثال لقصاصة كود امتداد

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

لنفترض أنك بحاجة إلى إنشاء حلقة for في نص PowerShell محاطة بمجموعة region. يتضمّن الكود اللازم لذلك في الصورة أدناه. الكود في الصورة أدناه يتألف من 50 حرفًا ويقوم بإنشاء حلقة for داخل مجموعة region تكرر الأرقام من 1 إلى 10.

بدلاً من كتابة كل حرف في هذا المثال، يمكنك استخدام قصصصتين مثبّتتين مع امتداد PowerShell من مايكروسوفت تسمّى region و for.

شاهد الأمثلة أدناه لترى مدى سهولة استخدام القصصصتين هاتين لتوفير الكثير من الكتابة!

إنشاء مقاطع برمجية مخصصة في برنامج Visual Studio Code

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

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

من خلال اختيار لغة، سيقوم برنامج VS Code بإنشاء ملف language.json في المسار C:\Users<اسم_المستخدم>\AppData\Roaming\Code\User\snippets على نظام التشغيل ويندوز. سيكون لدى جميع مقاطع البرمجة المخصصة التي تم إنشاؤها للغات المختلفة ملف في هذا الدليل.

قد تختلف اللغات التي تراها متاحة لك عن ما تراه أعلاه. في تثبيت برنامج VS Code المذكور أعلاه، تم تثبيت العديد من امتدادات اللغات بالفعل.

ابحث عن اللغة التي ترغب في إنشاء المقطع البرمجي لها واضغط على Enter لفتح ملف JSON الخاص باللغة. سيكون هذا الملف هو المكان الذي ستخزن فيه مقاطع البرمجة المخصصة الخاصة بك، ومن هنا يمكنك إنشاء مقاطع البرمجة المخصصة الخاصة بك.

يوجد أربعة عناصر بيانات يجب تحديدها لمقطع برمجي مخصص:

1. A snippet name (line 9 below)
2. A prefix, which is what you’ll use to call your snippet (line 8 below)
3. A body, which is your snippet code that is loaded into your scripts (lines 7 to 3 below)
4. A description, which will show up in your IntelliSense (line 2 below)

إنشاء مقطع برمجي مخصص للغة Python

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

قم بإنشاء ملف JSON

أولاً ، قم بفتح محدد لغة المقتطف ، اكتب Python ، واضغط على Enter لإنشاء ملف python.json. سيتم عرض ملف python.json في مجلد Windows C:\Users<UserName>\AppData\Roaming\Code\User\snippets.

يمكنك رؤية حالته الافتراضية في الصورة أدناه.

تعيين اسم وبادئة

الآن حان الوقت لبدء تحرير ملف JSON. أولاً ، قم بتعريف الاسم والبادئة (dt). تكون بادئات المقتطف قصيرة وواضحة حيث يتم كتابة القيمة هذه لاستدعاء المقتطف. كلما كانت بادئة المقتطف أقصر ، كلما كان أقل الأحرف التي يجب كتابتها عندما ترغب في استدعائه.

يمكنك رؤية مثال على ما يبدو عليه ذلك في الصورة أدناه.

تعريف الجسم

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

• كل سطر يحتاج إلى أن يكون بين علامتي اقتباس (“”)
• كل سطر يحتاج إلى أن ينتهي بفاصلة
• يجب أن تكون جميع الأسطر بين قوسين مربعين (“[” و “]”)

يمكنك رؤية مثال على ما يبدو عليه جسم المقتطف في الصورة أدناه.

تعريف الوصف

الوصف هو رسالة تصف البادئة كما هو موضح أدناه والتي تم تعريفها أدناه للجسم.

سيتم عرض الوصف أدناه للبادئة في قائمة المقتطفات ويوفر مزيدًا من المعلومات حول ما يفعل المقتطف. كما أنه يساعد في التمييز بين المقتطف والمقتطفات المماثلة التي تم إنشاؤها.

فيما يلي مثال للقطة الشاشة للمقتطفات التي تحدد البادئات والوصف.

إذا لم يكن لديك أي مقتطفات Python المخصصة بالفعل عند الانتهاء من إنشاء المقتطف ، يجب أن يكون لديك ملف python.json الذي يبدو مثل مقتطف الكود أدناه.

{
    "DateTime Snippet": {
        "prefix": "dt",
        "body": [
            "import datetime",
            "dt = datetime.datetime.now()",
            "print(f\"The time is {dt} and this is a message\")"
        ],
        "description": "Prints a message with current time"
    }
}

احفظ هذا الملف JSON والآن يتوفر المقتطف المخصص في أي ملف Python في VS Code.

الآن عند فتح علامة تبويب Python وكتابة بادئة dt ، يظهر المقتطف المخصص أدناه. بالضغط على Enter سيتم توسيع جسم المقتطف في علامة التبويب Python.

إنشاء مقتطف JavaScript مخصص باستخدام النص المضمن

لا تقتصر المقتطفات على الكلمات التي تحددها في جسم المقتطف. يمكن أيضًا أن تتضمن المقتطفات النص من الملف الذي تستدعيه منه.

يحتوي VS Code على متغيرات داخلية يمكنك استخدامها. هذه هي عناصر نائبة تأخذ النص المحدد حاليًا وتدرجه في المقتطف. على سبيل المثال ، بوضع المتغير $TM_SELECTED_TEXT في المقتطف ، يمكنك عرض النص المحدد. تحقق من صفحة مرجع متغيرات VS Code للحصول على فهرس كامل لجميع المتغيرات الداخلية لـ VS Code.

للتوضيح، دعنا نقوم بإنشاء مقطع برمجي يقوم ببساطة بإنشاء سطر لإخراج النص المحدد إلى وحدة التحكم تسمى log-it.

فتح محدد لغة المقطع البرمجي، اكتب JavaScript ، واضغط على Enter لإنشاء ملف javascript.json. سيكون هذا الملف مشابهًا لملف python.json الذي تم إنشاؤه في القسم السابق. ولكن هذه المرة، يحتوي على رمز JavaScript عينة بدلاً من رمز Python. يمكنك رؤية الحالة الافتراضية في الصورة أدناه.

الآن أنشئ مقطعًا برمجيًا باستخدام الـ JSON التالي:

{
	"Print selected line to console": {
		"prefix": "log-it",
		"body": [
			"console.log('$TM_SELECTED_TEXT');"
		],
		"description": "Log highlighted text output to console"
	}
}

احفظ ملف JSON هذا والآن يمكنك استخدام هذا المقطع في ملفات JavaScript الخاصة بك.

عند استدعاء هذا المقطع مع النص المحدد، سيستبدل $TM_SELECTED_TEXT بأي نص تقوم بتحديده. عند استدعاء هذا المقطع دون نص محدد، سيكون $TM_SELECTED_TEXT فارغًا. يمكنك رؤية ذلك في الصورة أدناه.

إنشاء مقطع برمجي مخصص لـ PowerShell مع محطات التبديل

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

ماذا لو كنت ترغب في كتابة القيمة في console.log() بدلاً من استخدام النص المحدد؟ وماذا لو كنت ترغب في الكتابة في أماكن مختلفة في المقطع؟

في هذا القسم، ستتعلم كيفية استخدام توقفات العلامات التبويب لتمكينك من كتابة نص في الشفرة التي يتم توسيعها بواسطة مقتطف الشفرة. توقفات العلامات التبويب هي أماكن محددة في مقتطف الشفرة يتحرك إليها المؤشر. يتم زيارة هذه الأماكن بالترتيب في كل مرة تضغط فيها على التبويب. باستخدام هذه التوقفات، يمكنك كتابة القيم في المقتطف بعد توسيعه.

توقفات العلامات التبويب، التي يتم تحديدها باستخدام المتغيرات في المقتطف $0، $1، $2، وما إلى ذلك في جسم المقتطف، تحدد للمقتطف مكان تواجد المؤشر التالي عند استدعاء المقتطف والضغط على التبويب.

توقفات العلامات التبويب تتبع الترتيب العادي (1 يتبع 2 يتبع 3 وما إلى ذلك) باستثناء واحد: توقف العلامة التبويب 0 هو المكان الذي سيكون فيه المؤشر بعد جميع توقفات العلامات التبويب الأخرى. لتوضيح ذلك، يتم توسيع المقتطف أدناه إلى رسالة Write-Output تحتوي على التاريخ الحالي ومكانًا للنص الإضافي.

هذا body مع توقفين للعلامات التبويب

• $1 في نهاية رسالة Write-Output
• $0 في السطر التالي حتى ينتهي المقتطف في سطر فارغ

{
    "DateTime Snippet PS": {
        "prefix": "dtPS",
        "body" : [
            "Write-Output -Message "The time is $((Get-Date).ToLocalTime()) and $1"","$0"
        ]
        "description": "PSCustomObject with 3 lines"
    }
}

احفظ هذا المقتطف واستدعه عن طريق كتابة البادئة dtPS في ملف PowerShell.

عند توسيع المقتطف، ينتقل المؤشر إلى موضع توقف العلامة التبويب 1. من هنا، أضف القيمة أو الشفرة التي ترغب فيها واضغط على التبويب للانتقال بالمؤشر إلى توقف العلامة التبويب التالي. ستستمر هذه العملية حتى تمر بجميع توقفات العلامات التبويب التي حددتها.

يمكنك رؤية ذلك في الصورة أدناه.

إضافة قيم افتراضية إلى توقفات العلامات التبويب

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

كانت لدينا توقف العلامة التبويب في المثال أعلاه ، ولكن عندما يتم توسيع مقتطف الشيفرة ، لم يكن هناك نص في مكانه. قفز المؤشر إلى موقع توقف العلامة التبويب ثم تعين المستخدم على السيطرة.

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

لنلقي نظرة على كيفية إضافة قيم افتراضية إلى مقاطع الشفرة المخصصة. ستفعل ذلك عن طريق تحرير ملف JSON لمقتطف الشفرة PowerShell أعلاه.

للبدء ، افتح محدد لغة مقتطف الشفرة ، واختر PowerShell ، وقم بتغيير توقفات العلامات التبويب من $1 إلى ${1:هذه هي رسالتي الافتراضية}. تصبح القيمة بعد النقطتين العلويتين هي القيمة الافتراضية. يتم توسيع هذه القيمة مع مقتطف الشفرة.

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

يمكنك رؤية التغيير في المحتوى أدناه.

{
	"DateTime Snippet PS" {
		"prefix": "dtPS",
		"body" : [
			"Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and $1{1:this is my default message}\"",
			"$0"
		],
		"description": "PSCustomObject with 3 lines"
	}
}

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

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

إضافة خيارات إلى محطات التبويب

لا تقتصر محطات التبويب على وجود قيمة افتراضية أو بدون قيمة على الإطلاق. يمكن تعريفها في تعريف مقتطف VS Code لإعطاء المستخدم خيارات عند توسيع المقتطف أيضًا.

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

ستعرض محطات التبويب خيارًا عند استخدام الصيغة التالية في جسم المقتطف:

${N|Choice1,Choice2,Choice3[,Choice]|}

تم تعديل محطة التبويب المعروضة أعلاه لتعطي خيار:

• Write-Output
• Write-Warning
• Write-Error

تم ذلك عن طريق وضع حرفي الخط العمودي (|) بعد محطة التبويب. يتم وضع الخيارات داخل حرفي الخط العمودي، مفصولة بفواصل. يمكنك رؤية ذلك في كود الكتلة أدناه.

${1|
    Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", // <-- الخيار 1 
    Write-Warning -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", // <-- الخيار 2
    Write-Error -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\" // <-- الخيار 3
|}

يمكنك رؤية مقتطف المثال أدناه.

{
    "DateTime Snippet PS" {
        "prefix": "dtPS",
        "body" : [
            "Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", Write-Warning -Message \"The time is $(Get-Date).ToLocalTime()) and this is my default message\", Write-Error -Message \"The time is $(Get-Date).ToLocalTime()) and this is my default message\"|}",
            "$0"
        ],
        "description": "PSCustomObject with 3 lines"
    }
}

عند توسيع المقتطف المخصص الآن، ستظهر خيارات الاختيار في نافذة الذكاء، كما يظهر في لقطة الشاشة أدناه.

من هنا ، يمكنك تحديد الخيار الذي تريده ومشاهدته يتوسع في هذا الاختيار. في لقطة الشاشة المثالية التالية ، يتم استبدال السطر الكامل من الكود بخيار للاختيار من بين ثلاثة أوامر كتابة مختلفة ، ويظهر أنه يمكن استدعاء كل واحد وتشغيله بدون مشكلة.

الملخص

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

لا يجب أن يكون مهمة مرهقة لكتابة كل حرف من كل كتلة برمجية. مع القصاصات ، لا يتعين عليك تذكر البناء الصحيح بالضبط للعبارة for ، foreach ، أو switch في كل مرة. القصاصات هي المثال الأمثل لهذا النوع.

I’ve shown Python, JavaScript, and PowerShell snippets in this post. VS Code snippets are available for many, many more languages. Your limits are only what you use and what you can think of!

قراءة المزيد

• مقدمة في وظائف PowerShell