ما هي أهم إضافات Visual Studio Code ؟

raheel · 01-04-2019, 06:02 PM

اكتسب محرر الأكواد فيجوال ستوديو كود Visual Studio Code شعبية كبيرة منذ إطلاقه لأول مرة عام 2015 من طرف شركة مايكروسوفت، وأصبح في وقت وجيز واحدا من أفضل 3 محررات بالنسبة لمطوري الويب، خاصة منهم الذين يقضون أوقاتا طويلة في العمل على مشاريع جافاسكريبت و Node.js.
يوفر VSCode افتراضيا العديد من المزايا التي يحتاجها كل مطور واجهات الويب الأمامية، ويدعم بشكل قوي لغتي جافاسكريبت و Typescript، هذه الأخيرة من تصميم شركة مايكروسوفت نفسها.
إلى جانب ذلك، يزخر متجر Visual Studio Code بأعداد هائلة من الإمتدادات (Extenstions) التي تضيف إلى هذا المحرر مزايا أخرى متنوعة لجعل حياة المطورين أكثر سعادة ويسرا.
وبدون الإطالة في المقدمة، سنقدم لكم اليوم مجموعة من أهم وأبرز إضافات VSCode التي يستخدمها مطورو الويب لمشاريع JavaScript و Node.js.
Prettier

تمكن إضافة Prettier من تنسيق وترتيب الشفرة البرمجية وفق إعداد محددة بعناية، حيث يتم ضمان تنسيق الكود بكيفية أوتوماتيكية عند حفظ التغييرات. ونلمس كثيرا أهمية هذه الإضافة في المشاريع الجماعية التي يشتغل عليها أكثر من مطور، إذ يضمن لنا Prettier لنا تنسيقا موحدا مهما كانت عادات كل مطور على حدة في كتابة الأكواد البرمجية.
إلى جانب جافاسكريبت، يدعم Prettier العديد من اللغات وأطر العمل مثل CSS ،Typescript ،GraphQL ،Vue.js ، SCSS إلخ…
Import Cost

إضافات Visual Studio Code

تتيح لنا إضافة import Cose رؤية حجم الوحدات والمكتبات التي يتم استيرادها عن طريق خاصية import في جافاسكريبت. هذا يسمح للمطورين بالبقاء على بينة من “الثمن” الذي عليهم دفعه في مقابل عملية الإستيراد
ويساعد معرفة حجم هذه الوحدات المستوردة في اتخاذ القرارات المناسبة واستدعاء فقط الأكواد التي نحتاجها عوض استدعاء مكتبة كاملة على سبيل المثال من أجل غرض محدد يمكن استيراده لوحده من أجل تخفيف حجم الحزمة أو ملف جافاسكريبت النهائي للمشروع.
Auto Rename Tag

إضافات Visual Studio Code

تمكننا إضافة Auto Rename Tag من إعادة تسمية وسوم HTML بطريقة آلية، حيث أنه بمجرد تغيير اسم أحد الطرفين المكونين لوسم HTML (وسم الإفتتاح ووسم الإغلاق) فإن الطرف الآخر يتغير أوتوماتيكيا وبسرعة.
تدعم هذه الإضافة كذلك تركيب JSX الذي يستخدم في مشاريع React.js.
Auto Close Tag

ميزة الإغلاق التلقائي موجودة ومدمجة في محرر فيجوال ستوديو كود منذ الإصدار 1.16، ولكن هذا الدعم كان مقتصرا على ملفات HTML فقط. لذلك جاءت إضافة Auto Close Tag لإتاحة هذه الميزة كذلك في ملفات PHP، جافاسكريبت، Vue ،JSX وغيرها…
الإغلاق التلقائي للوسوم يمنحنا سرعة كبيرة في كتابة الكود وتجربة جيدة توفر علينا وقتا ثمينا لا يستهان به.
Live Server

إضافات Visual Studio Code

تساعد إضافة Live Server على إطلاق سريع لخادم محلي يقوم بتحديث المشروع على المتصفح بشكل تلقائي بعد كل عملية حفظ.
هذا الخادم لا يقتصر فقط على دعم الملفات الساكنة مثل HTML وCSS وجافاسكريبت، بل يدعم كذلك ناحية الخادم وتحديدا مشاريع Node.js حيث يقوم بإعادة تحميل المتصفح كذلك بعد كل تغيير في الكود.
ESLint

مكتبة ESLint معروفة لدى مطوري جافاسكريبت، هدفها مساعدتهم على كتابة أكواد جافاسكريبت خالية من الأخطاء، حيث تفرض على المطور بعض القواعد والإصطلاحات التي يجب عليه احترامها للحصول في النهاية على شفرة برمجية نقية وخالية من الأخطاء.
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>
إضافة ESLint الخاصة ب Visual Studio Code تقوم بدمج ESLint في المحرر مما يتيح للمطورين رؤية الأخطاء واقتراحات ESLint مباشرة عند كتابة الأكواد، دون الإضطرار للجوء لنافذة الأوامر السطرية كما جرت العادة في الإستخدام العادي لهذه المكتبة.

المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress

01-04-2019, 06:02 PM	#1
raheel تاريخ التسجيل: Feb 2019 العمر: 38 المشاركات: 1,149 التقييم: 10	raheel تاريخ التسجيل: Feb 2019 العمر: 38 المشاركات: 1,149 التقييم: 10 ما هي أهم إضافات Visual Studio Code ؟ ما هي أهم إضافات Visual Studio Code ؟ اكتسب محرر الأكواد فيجوال ستوديو كود Visual Studio Code شعبية كبيرة منذ إطلاقه لأول مرة عام 2015 من طرف شركة مايكروسوفت، وأصبح في وقت وجيز واحدا من أفضل 3 محررات بالنسبة لمطوري الويب، خاصة منهم الذين يقضون أوقاتا طويلة في العمل على مشاريع جافاسكريبت و Node.js. يوفر VSCode افتراضيا العديد من المزايا التي يحتاجها كل مطور واجهات الويب الأمامية، ويدعم بشكل قوي لغتي جافاسكريبت و Typescript، هذه الأخيرة من تصميم شركة مايكروسوفت نفسها. إلى جانب ذلك، يزخر متجر Visual Studio Code بأعداد هائلة من الإمتدادات (Extenstions) التي تضيف إلى هذا المحرر مزايا أخرى متنوعة لجعل حياة المطورين أكثر سعادة ويسرا. وبدون الإطالة في المقدمة، سنقدم لكم اليوم مجموعة من أهم وأبرز إضافات VSCode التي يستخدمها مطورو الويب لمشاريع JavaScript و Node.js. Prettier تمكن إضافة Prettier من تنسيق وترتيب الشفرة البرمجية وفق إعداد محددة بعناية، حيث يتم ضمان تنسيق الكود بكيفية أوتوماتيكية عند حفظ التغييرات. ونلمس كثيرا أهمية هذه الإضافة في المشاريع الجماعية التي يشتغل عليها أكثر من مطور، إذ يضمن لنا Prettier لنا تنسيقا موحدا مهما كانت عادات كل مطور على حدة في كتابة الأكواد البرمجية. إلى جانب جافاسكريبت، يدعم Prettier العديد من اللغات وأطر العمل مثل CSS ،Typescript ،GraphQL ،Vue.js ، SCSS إلخ… Import Cost تتيح لنا إضافة import Cose رؤية حجم الوحدات والمكتبات التي يتم استيرادها عن طريق خاصية import في جافاسكريبت. هذا يسمح للمطورين بالبقاء على بينة من “الثمن” الذي عليهم دفعه في مقابل عملية الإستيراد ويساعد معرفة حجم هذه الوحدات المستوردة في اتخاذ القرارات المناسبة واستدعاء فقط الأكواد التي نحتاجها عوض استدعاء مكتبة كاملة على سبيل المثال من أجل غرض محدد يمكن استيراده لوحده من أجل تخفيف حجم الحزمة أو ملف جافاسكريبت النهائي للمشروع. Auto Rename Tag تمكننا إضافة Auto Rename Tag من إعادة تسمية وسوم HTML بطريقة آلية، حيث أنه بمجرد تغيير اسم أحد الطرفين المكونين لوسم HTML (وسم الإفتتاح ووسم الإغلاق) فإن الطرف الآخر يتغير أوتوماتيكيا وبسرعة. تدعم هذه الإضافة كذلك تركيب JSX الذي يستخدم في مشاريع React.js. Auto Close Tag ميزة الإغلاق التلقائي موجودة ومدمجة في محرر فيجوال ستوديو كود منذ الإصدار 1.16، ولكن هذا الدعم كان مقتصرا على ملفات HTML فقط. لذلك جاءت إضافة Auto Close Tag لإتاحة هذه الميزة كذلك في ملفات PHP، جافاسكريبت، Vue ،JSX وغيرها… الإغلاق التلقائي للوسوم يمنحنا سرعة كبيرة في كتابة الكود وتجربة جيدة توفر علينا وقتا ثمينا لا يستهان به. Live Server تساعد إضافة Live Server على إطلاق سريع لخادم محلي يقوم بتحديث المشروع على المتصفح بشكل تلقائي بعد كل عملية حفظ. هذا الخادم لا يقتصر فقط على دعم الملفات الساكنة مثل HTML وCSS وجافاسكريبت، بل يدعم كذلك ناحية الخادم وتحديدا مشاريع Node.js حيث يقوم بإعادة تحميل المتصفح كذلك بعد كل تغيير في الكود. ESLint مكتبة ESLint معروفة لدى مطوري جافاسكريبت، هدفها مساعدتهم على كتابة أكواد جافاسكريبت خالية من الأخطاء، حيث تفرض على المطور بعض القواعد والإصطلاحات التي يجب عليه احترامها للحصول في النهاية على شفرة برمجية نقية وخالية من الأخطاء. <span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span> إضافة ESLint الخاصة ب Visual Studio Code تقوم بدمج ESLint في المحرر مما يتيح للمطورين رؤية الأخطاء واقتراحات ESLint مباشرة عند كتابة الأكواد، دون الإضطرار للجوء لنافذة الأوامر السطرية كما جرت العادة في الإستخدام العادي لهذه المكتبة. المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress
	اقتباس

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

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
VB.Net - كيفية إنشاء تقارير Crystal باستخدام Visual Studio 2015 الجزء 1/2	القيصر	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	1	15-07-2019 01:41 PM
VB.Net - كيفية إنشاء تقارير Crystal باستخدام Visual Studio 2015 الجزء 2/2	القيصر	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	1	15-07-2019 01:36 PM
09. دورة دوت نيت كور - إنشاء أول مشروع باستعمال برنامج Visual Studio Code	القيصر	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	13-05-2019 10:03 PM
كود نص متحرك في Visual Studio	القيصر	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	03-05-2019 03:38 PM
ما هي أفضل إضافات ووردبريس المجانية ؟؟	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	27-03-2019 06:22 PM

اسم العضو		حفظ البيانات؟
كلمة المرور

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)