حتى الآن ، هناك كمية كافية من أدوات التطوير مع دعم لغة جافا سكريبت والأطر القائمة عليها. مسألة اختيار أداة معينة خارج نطاق هذه المقالة ، سأحاول على الفور وصف تجربة المستخدم الخاصة بي باستخدام Visual Studio Code والأدوات المصممة لتسهيل الحياة لمطوري JS ، وخاصة أولئك الذين يستخدمون Vue.
يوجد الكثير من الإضافات في مخزن امتداد VSCode ، وسيتم سرد المكونات الأكثر ملاءمة لتطوير الويب أدناه.
HTML و CSS
غالبًا ما تكون أنماط التخطيط والكتابة مهمة رتيبة ، لذلك يمكن للإضافات التالية تسهيل وتسريع عملك:
جافا سكريبت
فيو
لا توجد العديد من الملحقات المناسبة للعمل مع Vue ، فيما يلي بعض من أكثر الإضافات فائدة:
- Vetur هي مجموعة كاملة من أكثر الوظائف الإضافية اللازمة للعمل مع vue ، مثل المقتطفات ، وتسليط الضوء على بناء الجملة.
- Vue Peek - لإضافة انتقال مناسب إلى مكونات vue.
بوابة
يحتوي VSCode على دعم للعمل مع git خارج الصندوق ، لكن لا تزال الوظائف المدمجة غير كافية دائمًا. فيما يلي الامتدادات التي ستجعل العمل مع git أسهل قليلاً:
- من المحتمل أن يكون GitLens هو أشهر امتداد للعمل مع git ، والذي يضيف العديد من الميزات لعرض معلومات git.
- Git History - يضيف القدرة على عرض تاريخ التغييرات في git بشكل مريح ، وله واجهة مريحة إلى حد ما.
- مؤشرات Git - مؤشر بسيط لنشاط git في الدرج السفلي VSCode.
بيئة العمل وعملية التنمية
من أجل العمل المنتج ، سيكون من الجيد أن يكون لديك مساعدين في شكل إضافات تسليط الضوء على الأخطاء البسيطة ، مما يشير إلى أسلوب الكتابة وغيرها من التلميحات / الإجراءات المناسبة. جرب الامتدادات التالية:
- Bracket Pair Colorizer - يضيف نصف إضاءة إلى الأقواس المحيطة بكتل الشفرة ، ويسهل إدراك الكود مع تداخل عميق ، يفصل الكود بصريًا.
- إن Beautify ، في رأيي ، هو أنسب امتداد لتصميم الشفرة التلقائي ، ويمكن الاطلاع على مزيد من التفاصيل على الرابط.
- يعد Live Server امتدادًا مفيدًا للغاية يتيح لك تشغيل الخادم المباشر بسرعة ، على سبيل المثال ، للتخطيط.
- تعتبر " تكلفة الاستيراد " امتدادًا رائعًا يعرض حجم الوحدة النمطية المستوردة ، ويسمح لك بتحديد الأجزاء المستوردة من الوحدة النمطية بمزيد من التفاصيل دون اللجوء إلى أجهزة تحليل الحزمة.
- NPM Intellisense - الإكمال التلقائي لوحدات npm.
- فتح في المتصفح هو امتداد بسيط يضيف نقطة فتح في المتصفح.
- مسار Intellisense - الإكمال التلقائي لأسماء الملفات ومواقعها.
- الإعدادات تزامن - بعد الانتهاء من تثبيت الأدوات اللازمة وإعداد البيئة ، فمن الملائم حفظ التكوين ، هذا الملحق سوف يسمح لك بمزامنة كل شيء في بوابة git.
- خطوط الفرز - طريقة سهلة لتنظيم فرز الخطوط في الكود وفقًا للشروط المحددة.
- يعتبر TODO Highlight امتدادًا بسيطًا لتسليط الضوء على الكلمات الرئيسية مثل TODO و FIXME.
- مسافات زائدة - تبرز مسافات إضافية.
- VS Live Share - واجه الكثيرون مشكلة عندما اضطروا إلى التوضيح لمطوّر بعيد عن المكان الطويل والخطأ ، وهذا الامتداد يبسط الحياة في مثل هذه المواقف ، مما يتيح لك تقديم عرض حي ، ويدعم عمل العديد من المستخدمين ، ويلقي بيئة التشغيل لجهاز العميل.
- Visual Studio IntelliCode - أتمتة المهام الروتينية للمطورين بلغات مثل Python و TypeScript / JavaScript و Java.
قد يكون أيضا للاهتمام.
- GraphQL for VSCode - نوع من intellisense لـ GraphQL ، الملحق الأكثر ملاءمة ، تحت السخام الكثير من المفيد ، أكثر على الرابط.
- لحظة تخفيض السعر - المعاينة المباشرة لترميز تخفيض السعر.
- لصق JSON as Code هو امتداد مناسب يقوم بإنشاء نموذج كتابة من بيانات JSON. يدعم TypeScript و Python و Go و Ruby و C # و Java و Swift و Rust و Kotlin و C ++ و Flow و Objective-C و JavaScript و Elm و JSON Schema.
- قوس قزح CSV - الخلفية لملفات CSV.
- Regex Previewer هو امتداد مفيد للغاية للمعاينات العادية.
- SVG Viewer - عارض SVG.
آمل أن تكون هذه القائمة مفيدة لك ، وسأكون سعيدًا بالإضافات.