توفر Microsoft أداة VS Code الخاصة بها في المعاينة مباشرة في المتصفح وتسمح للمطورين بالاستفادة من إصدار أخف من VS Code دون الحاجة إلى تثبيته على جهاز كمبيوتر

شارك مع صديق



أتاحت Microsoft للمطورين في 20 أكتوبر نسخة معاينة من أداة Visual Studio Code (VS Code) للويب. يسمح VSCode للويب للمطورين باستخدام إصدار أخف من VSCode مباشرة في المستعرض دون الحاجة إلى تثبيته على أجهزة الكمبيوتر الخاصة بهم. من خلال الاستمرار https://vscode.dev، يمكن للمستخدمين الحصول على إصدار من VS Code يعمل في المستعرضات الخاصة بهم. يصفه المسؤولون بأنه أداة تنمية محلية لا تحتاج إلى تثبيت.

بعد نجاح إصدار سطح المكتب لمحرر التعليمات البرمجية Visual Studio Code عبر الأنظمة الأساسية ، يبدو أن فريق Microsoft قرر أخيرًا إصدار إصدار الويب من محرره. في وقت سابق من هذا العام ، أعلن فريق المشروع في صفحة vscode.dev الخاصة بهم عن إصدار معاينة Visual Studio Code للويب. يعتمد Visual Studio Code على Electron ، بالنسبة للكثيرين كان الأمر مجرد مسألة وقت قبل ظهور إصدار الويب.

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

قد يتساءل البعض عن الاهتمام بـ VS Code للويب لأن Visual Studio Code لسطح المكتب مجاني وأكثر قوة. فيما يلي بعض الإجابات:

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

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

اقترح مسؤولو Microsoft العديد من السيناريوهات التي قد يرغب فيها الأشخاص في VS Code للويب. من بينها: عرض الملفات المحلية وتحريرها لسرعة تدوين الملاحظات ومعاينتها في Markdown ؛ إنشاء تطبيقات HTML و JavaScript و CSS من جانب العميل جنبًا إلى جنب مع أدوات التنقل لتصحيح الأخطاء * ؛ تحرير التعليمات البرمجية على الأجهزة التي ليس من السهل فيها تثبيت VS Code ، مثل أجهزة Chromebook * ؛ وحتى تطويرها على أجهزة iPad.

المتصفحات التي تدعم الوصول إلى نظام الملفات APIs (والتي تعني حتى الآن Microsoft Edge و Google Chrome) مدعومة. وإذا كان المستعرض لا يدعم حتى الآن واجهات برمجة التطبيقات للوصول إلى نظام الملفات المحلي ، فسيظل المستخدمون قادرين على فتح الملفات الفردية عن طريق تحميلها وتنزيلها من خلال المتصفح.

إعلان مايكروسوفت

في عام 2019 ، عندما أصبح نطاق المستوى الأعلى .dev متاحًا ، استعدنا vscode.dev واحتفظنا به بسرعة ، مشيرين إلى موقع الويب code.visualstudio.com. مثل العديد من الأشخاص الذين يشترون نطاق .dev ، لم تكن لدينا أي فكرة عما يجب فعله به. وأشار كريس دياس إلى أننا بالتأكيد لم نتوقع أن هذا سينتهي به الأمر إلى إنجاز مهمة تحضيرية لأكثر من عقد من الزمان.

إحضار VS Code إلى المتصفح

تقدم سريعًا إلى اليوم. الآن عندما تقوم بالوصول https://vscode.dev، إصدار خفيف الوزن من VS Code يعمل بالكامل في المتصفح. افتح مجلدًا على جهاز الكمبيوتر المحلي الخاص بك وابدأ في الترميز.

لا يلزم التثبيت.

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

التطوير المحلي باستخدام أدوات السحابة

المتصفحات الحديثة التي تدعم File System Access API (Edge و Chrome اليوم) تسمح لصفحات الويب بالوصول إلى نظام الملفات المحلي (بإذن منك). تفتح هذه البوابة البسيطة للجهاز المحلي بسرعة سيناريوهات مثيرة للاهتمام لاستخدام VS Code للويب كأداة تطوير محلية بدون تثبيت ، مثل *:

  • عرض وتحرير الملفات المحلية. قم بتدوين الملاحظات بسرعة (وقم بمعاينتها!) في Markdown. حتى إذا كنت تستخدم جهازًا مقيدًا حيث لا يمكنك تثبيت رمز VS الكامل ، فلا يزال بإمكانك استخدام vscode.dev لعرض الملفات المحلية وتحريرها.
  • أنشئ تطبيقات HTML و JavaScript و CSS من جانب العميل جنبًا إلى جنب مع أدوات التنقل لتصحيح الأخطاء.
  • قم بتحرير التعليمات البرمجية الخاصة بك على أجهزة أقل قوة مثل أجهزة Chromebook ، حيث لا يمكنك (بسهولة) تثبيت VS Code.
  • قم بالتوسيع على جهاز iPad الخاص بك. يمكنك تحميل / تنزيل الملفات (وحتى تخزينها في السحابة باستخدام تطبيق الملفات) ، بالإضافة إلى فتح المستودعات عن بُعد باستخدام ملحق GitHub Repositories المدمج.

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

(المزيد) تجربة خفيفة

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

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

لذلك ، عندما تكون في المتصفح ، عادةً ما تندرج التجارب ضمن الفئات التالية *:

  • حسن*: بالنسبة لمعظم لغات البرمجة ، يمنحك vscode.dev تلوينًا لبناء جملة التعليمات البرمجية والإكمال المستندة إلى النص وتلوين أزواج الأقواس. باستخدام شجرة بناء جملة Tree-sitter ، تستطيع Microsoft توفير خبرات إضافية مثل Outline / Go to Symbol and Symbol Search للغات الشائعة مثل C / C ++ و C # و Java و PHP و Rust و Go .
  • يحسن: يتم تشغيل تجارب TypeScript و JavaScript و Python جميعها بواسطة خدمات اللغة التي تعمل أصلاً في المتصفح. باستخدام لغات البرمجة هذه ، ستحصل على التجربة * الصحيحة * بالإضافة إلى عمليات استكمال الملفات الفريدة الغنية ، وإبراز الدلالات ، وأخطاء بناء الجملة ، وما إلى ذلك.
  • أفضل: بالنسبة للعديد من لغات * webby * ، مثل JSON و HTML و CSS و LESS ، فإن تجربة الترميز في vscode.dev هي نفسها تقريبًا على سطح المكتب (بما في ذلك معاينة Markdown!).

ملحقات

تعمل معظم امتدادات تخصيص واجهة المستخدم مثل السمات وأغطية المفاتيح والمقتطفات جميعها في vscode.dev ويمكنك حتى تمكين التجوال بين مساحات كود المتصفح وسطح المكتب و GitHub عبر مزامنة المعلمات.

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

ومع ذلك ، تم تحديث عدد متزايد من الإضافات للعمل في المتصفح ، ويصل المزيد كل يوم.

ملاحظة *: إذا كنت مؤلف ملحق وتريد أن يكون الملحق الخاص بك متاحًا في المتصفح ، فإن Microsoft تدعوك إلى الرجوع إلى دليلها لإنشاء ملحقات الويب.

على سبيل المثال ، يسمح لك امتداد Luna Paint – Image Editor بتحرير الصور النقطية مباشرةً في VS Code. يوفر الامتداد أدوات تصميم غنية (مثل أدوات الطبقة والدمج) VS Code ، ويمكنك بالطبع حفظ الصور على محرك الأقراص المحلي.

يوفر ملحق GitHub Issue Notebooks تجربة GitHub Issues Notebook. باستخدامه ، يمكنك تضمين الاستعلامات والنتائج وحتى Markdown التي تصف الغرض من الاستعلامات ، في محرر واحد.

جيثب

تعمل العديد من امتدادات VS Code مع مخزون الكود المصدري في GitHub. على سبيل المثال ، يتيح لك ملحق CodeTour إنشاء جولات إرشادية لقاعدة التعليمات البرمجية ، ويحول امتداد WikiLens كود VS ومستودعك إلى أداة قوية لتدوين الملاحظات (مع ربط ثنائي الاتجاه). لتسهيل الوصول إلى التعليمات البرمجية الخاصة بك في GitHub ، تأتي VS Code للويب مع مستودعات GitHub المضمنة و Codespaces وامتدادات طلب السحب. يمكنك إجراء تعديلات سريعة ، وعرض العلاقات العامة ، والمتابعة على نسخة محلية أو حتى أفضل ، على Codespace GitHub ، إذا كنت تريد خبرات لغوية أكثر قوة أو إذا كنت بحاجة إلى إنشاء وتشغيل واختبار التغييرات قبل الدمج.

يبدو كثيرًا مثل github.dev ، أليس كذلك؟ هل هم مختلفون؟ هل هو نفسه؟ لماذا كلاهما؟

أسئلة جيدة! github.dev هو رمز VS مخصص لمثيل الويب المدمج بعمق مع GitHub. الاتصال تلقائي ، تنسيق عنوان URL يتبع النمط / منظمة / الريبو من github.com ، لذا يمكنك فقط تغيير .com إلى .dev لتعديل الريبو ، وهو مخصص لـ GitHub مع السمات الفاتحة والداكنة.

بالإضافة إلى المستودعات على GitHub ، يدعم VS Code للويب Azure Repos (جزء من Azure DevOps). للعمل مع كليهما ، يدعم VS Code للويب طريقين ، vscode.dev/github و vscode.dev/azurerepos. ومع ذلك ، لا تحتاج إلى تذكر ذلك ، فقط قم ببدء عنوان URL الذي لديك بـ “vscode.dev”.

على سبيل المثال ، استبدل https://github.com/microsoft/vscode عبر https://vscode.dev/github.com/Microsoft/vscode.

بالنسبة إلى Azure Repos ، افعل الشيء نفسه. يحل محل https://dev.azure.com/ عبر https://vscode.dev/dev.azure.com /.

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

الحديث عن URL

تمامًا كما هو الحال على سطح المكتب ، يمكنك تخصيص VS Code للويب من خلال نظام بيئي غني من الإضافات التي تدعم جميع الخلفيات واللغات والخدمات تقريبًا. على عكس سطح المكتب ، تلاحظ Microsoft أنه من الأسهل عليها تقديم تجارب مخصصة مع ملحقات مثبتة مسبقًا من خلال عناوين URL فريدة لـ vscode.dev (مثل vscode.dev/github و vscode.dev/azurerepos كما هو مذكور أعلاه).

على سبيل المثال ، حاول التصفح https://vscode.dev/theme/sdras.night-owl.

هنا يمكنك تجربة سمة Night Owl الملونة الشهيرة من @ sarah_edo “مباشرة” ، دون الحاجة إلى متابعة عملية التنزيل والتثبيت ، فقط لمعرفة ما إذا كنت ترغب في ذلك. لا يلزم التثبيت! إذا كنت مؤلف موضوع ، يمكنك حتى إنشاء شارة في ملف README.md الخاص بك للسماح للمستخدمين باختبار المظهر الخاص بك مباشرةً من Marketplace (يمكنك معرفة المزيد في VS Code الخاص بدليل مستخدم الويب).

لا تتردد في استخدام عنوان URL هذا لمشاركة موضوعاتك المفضلة مع أصدقائك. أنا شخصياً من أشد المعجبين بموضوع Cobalt2 الخاص بـwesbos ، تحقق من ذلك https://vscode.dev/theme/wesbos.theme-cobalt2. لاحظ أن عنوان URL للسمة يعمل فقط مع السمات التعريفية بالكامل (بدون رمز).

كما ترى ، تعد عناوين URL الخاصة بـ vscode.dev طريقة فعالة بالنسبة لنا لابتكار تجارب إضاءة جديدة. مثال آخر هو أن جلسات الضيف Live Share ستكون متاحة أيضًا في المتصفح عبر عنوان URL https://vscode.dev/liveshare. سيتم تمرير معرف الجلسة إلى الامتداد لجعل العضوية تجربة سلسة.

مصدر: مايكروسوفت

و أنتم ؟

ما رأيك في VS Code للويب؟
بصفتك مستخدمًا لـ VS Code ، هل ستجربه؟
إذا كان الأمر كذلك ، هل يمكنك إبداء الرأي؟
إذا لم يكن كذلك ، فهل يمكنك توضيح السبب؟

انظر كذلك

تم إصدار Visual Studio Code 1.59. يأتي هذا الإصدار مع تحسين في عرض الامتدادات بالإضافة إلى تتبع العمليات الفرعية وتحذيرات إيقاف التشغيل.
تم إصدار Visual Studio Code 1.58 مع تغييرات في ملاحظات العملاء ودعم الرياضيات في نظرة عامة على Markdown
يأتي Visual Studio Code 1.57 مع Workspace Trust ، وهي ميزة أمان للسماح بتنفيذ التعليمات البرمجية تلقائيًا أو تقييدها
تم إصدار Visual Studio Code أبريل 2021 (1.56) مع Electron 12 ، وهذا الإصدار يجلب الدعم لـ Wayland و KaTeX في Notepads
ينتقل فريق هندسة GitHub إلى Codespaces ، مما يقلل وقت الاستنساخ من 20 دقيقة و 90 ثانية



Source link

اترك ردّاً