مقتطفات VS Code: أقوى أداة لزيادة إنتاجية الترميز

اكتب المزيد من التعليمات البرمجية مع ضغطات أقل على المفاتيح

الجميع يريد أن يكون قادرًا على إنتاج المزيد من التعليمات البرمجية بضربات مفاتيح أقل. أصبحت وظائف Arrow في JavaScript شائعة بشكل لا يصدق مؤخرًا - ولا توفر لك سوى 6 أحرف!

(function(){console.log('a')})() // 32 charachters(()=>{console.log('a')})() // 26 charachters

ولكن هناك طريقة أفضل لحفظ الكتابة - وستوضح لك هذه المقالة الأداة اللازمة للقيام بذلك.

مقتطفات الشفرة

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

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

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

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

مقتطفات رمز VS

يحتوي VS Code على نظام أقوى حتى من TextExpander أو AutoHotKeys. يمكن تكوين مقتطفات التعليمات البرمجية المدمجة للقيام بأكثر من مجرد لصق الكود.

قبل أن نتحدث عن الميزات الرائعة ، سنتعلم كيفية إنشاء مقتطف.

في VS Code ، اضغط على ctrl + shift + P لفتح لوحة الأوامر والبحث عن قصاصة. يوفر لك تحديد "تكوين مقتطفات المستخدم" قائمة بلغات الترميز التي يمكنك إنشاء مقتطف لها. سنذهب مع JavaScript.

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

هذا المقتطف هو سطري المفضل من التعليمات البرمجية. إنه نمط لطيف للتعامل مع الوعد.

const handle = prom => prom.then(res => [null, res]).catch(err => [err, null]);

لإنشاء مقتطفنا ، نحتاج إلى إنشاء مفتاح جديد في الكائن. هذه النقاط الرئيسية لكائن مع prefix، bodyو description.

"insert handle function": { "prefix": "", "body": [], "description": ""}

البادئة هي النص الذي نريد إدخاله لتشغيل هذا المقتطف. أنت بحاجة للتأكد من أن هذا فريد. وصفه بأنه handleمن شأنه أن يؤدي المتكررة في كل مرة يمكنك استدعاء وظيفة حتى نتمكن من الذهاب مع شيء من هذا القبيل promHandle.

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

عند اكتمال كل هذا ، تحصل على شيء مثل هذا:

"insert handlefunction": { "prefix": "promHandle", "body": [ "const handle = prom => prom.then(res => [null, res]).catch(err => [err, null]);" ], "description": "inserting a 'handle' function"}

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

الآن يمكنك حفظ مئات الشخصيات عن طريق إنشاء مقتطفاتك الخاصة. ولكن هناك بعض الميزات الأكثر قوة!

علامة التبويب إدراج النقاط

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

لإضافة نقطة إدراج ، ما عليك سوى إضافة $1النقطة الأولى $2والثانية وما إلى ذلك. هذا مفيد حقًا للوظائف حيث يتوقعون كائنًا.

"sendMessage": { "prefix": "sendMessage", "body": [ "await botHelper.sendToUser({message$1, userID});" ], "description": "await sending a message using bot helper"},

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

مقتطفات خاصة باللغة

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

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

مقتطفات خاصة بالمواقع

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

فقط اختر New Snippet file for '...'عند اختيار لغتك.

إنشاء المزيد من المقتطفات

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

مولد المقتطف

Snippet Generator هو موقع يتيح لك لصق بعض التعليمات البرمجية وتحويلها بسهولة إلى تنسيق مقتطف.

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

ملحقات المقتطف

إذا كنت تستخدم إطار عمل ، مثل React أو Angular ، فهناك الكثير من المقتطفات التي ترغب في إنشائها. لحسن الحظ ، هذه مشكلة واجهها أشخاص آخرون من قبل ، لذا فقد أنشأوا مكتبات من المقتطفات الشائعة لكل إطار عمل.

snippetsينتج عن البحث في سوق امتدادات VS Code مئات النتائج التي يمكنك تثبيتها. كل شيء من React و Angular و Vue إلى ES6 JS و C # و PHP. تحتوي هذه غالبًا على مجموعة كاملة من المقتطفات لتقليل الوقت الذي تقضيه في الكتابة بشكل كبير.

عيب هذه الإضافات هو أنه سيتعين عليك معرفة البادئات (المشغلات) ، لكنك ستحفظ بسرعة تلك التي تستخدمها أكثر من غيرها.

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