الصفحة الرئيسية » تصميم المواقع » كيفية تخصيص رمز مرئي ستوديو

    كيفية تخصيص رمز مرئي ستوديو

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

    في هذا المنشور ، في البداية سنلقي نظرة على كيفية تغيير شكل مساحة العمل في Visual Studio Code, ثم سأريكم كيفية تخصيص الإعدادات الافتراضية بمساعدة اثنين JSON-ملفات التكوين المنسقة.

    كيفية تعيين سمة اللون على رمز VS

    رمز مرئي ستوديو يسمح لك تعيين سمة لون مخصص لمحرر الخاص بك.

    لوضع سمة مسبقة الاستخدام ، انقر فوق ملف> تفضيلات> سمة اللون القائمة في شريط القائمة العلوي. عندما تضرب “أدخل”, تنبثق لوحة الأوامر ، وتعرض قائمة منسدلة من السمات التي يمكنك الاختيار من بينها.

    يمكنك تحقيق نفس التأثير إذا ضغطت F1 لفتح لوحة القيادة ، واكتب التفضيلات: موضوع اللون القيادة في مجال الإدخال.

    كما يمكنك تمرير الخيارات في القائمة المنسدلة, يتغير مظهر مساحة العمل في الوقت الفعلي, حتى تتمكن من معرفة أي موضوع يناسب احتياجاتك بسرعة.

    أنا chooe و “تباين عالي” موضوع اللون ، كما عيني ليست هي الأفضل. إليك ما تبدو عليه وجهة نظري.

    كيفية تثبيت سمة من سوق رمز VS

    إذا كنت لا تحب أيًا من سمات الألوان التي يقدمها VS Code افتراضيًا ، يمكنك تنزيل العديد من الآخرين من VS Code Marketplace.

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

    عند النقر فوق هذا الخيار ، ينبثق مثيل جديد من لوحة القيادة. اكتب ال "تحويلة تحويلة موضوع" القيادة في حقل الإدخال الجديد ، وسوف الحصول على قائمة بجميع المواضيع التي تتوفر من VS Code Marketplace.

    اخترت موضوع يسمى “موضوع مجموعة المواد”, وتثبيته من خلال النقر عليه. للحصول على السمة الجديدة في قائمة Color Theme ، في نفس المكان الذي توجد فيه السمات الافتراضية الأخرى ، تحتاج إلى أعد تشغيل VS Code. بعد إعادة التشغيل ، يظهر السمة الجديدة في قائمة السمات ، ويمكنك تعيينها من لوحة الأوامر.

    مع السمة المادية الجديدة ، يبدو محرر بلدي الآن كما يلي:

    يمكنك العودة إلى السمة السابقة (مثلما فعلت ، لأنني ما زلت أفضّل هذا السمة) أو يمكنك أن تتجول أكثر مع السمة الأخرى لترى ما هو الأنسب لك.

    إذا كنت تريد ، يمكنك أيضا إنشاء موضوع مخصص الخاص بك, ونشره على VS Code Marketplace باستخدام أداة مدير ملحق vsce.

    تغيير إعدادات المستخدم ومساحة العمل

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

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

    في البداية ، لنرى الفرق بين ملفي التهيئة. رمز VS له نطاقان (عالمي و محلي) للإعدادات ، وبالتالي الملفين المنفصلين:

    1. العالمية settings.json, تكون فيها قواعد التكوين صالحة لكل مساحة عمل
    2. المتعلقة بمساحة العمل .vscode / settings.json, هذا مرتبط فقط بمساحة عمل فردية

    ال عالمي settings.json يمكن العثور على الملف في المجلد حيث يخزن نظام التشغيل كل ملفات التكوين الأخرى المتعلقة بالتطبيق ، على التوالي:

    • على ويندوز: ٪ APPDATA٪ \ القانون \ العضو \ settings.json
    • على نظام Linux: $ HOME / .config / الرمز / المستخدم / settings.json
    • على Mac: الصفحة الرئيسية / المكتبة / دعم التطبيق / الرمز / المستخدم / settings.json

    ال مساحة العمل ذات الصلة. settings.json يتم تخزين الملف في مجلد المشروع الحالي. بشكل افتراضي ، لا يوجد هذا الملف ، ولكن بمجرد إضافة إعداد مساحة عمل مخصص ، يقوم VS Code بإنشاء .vscode / settings.json ملف في آن واحد ، ويضع تكوينات مخصصة لمساحة العمل في ذلك.

    حتى متى تستخدم settings.json ملفات?

    إذا كنت ترغب في استخدام VS Code لقواعد التكوين المخصصة في الكل مشاريعك ، وضعها في العالمية settings.json ملف.

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

    تتجاوز إعدادات مساحة العمل الإعدادات العامة, لذا كن حذرا.

    تسمى الإعدادات العامة “إعدادات المستخدم” في رمز VS. فتحها إما عن طريق النقر على ملف> تفضيلات> إعدادات المستخدم القائمة ، أو عن طريق البدء في كتابة التعبير “إعدادات المستخدم” في لوحة القيادة (فتحه مع F1).

    يفتح VS Code جزأين بجانب بعضهما البعض: يحتوي الجزء الأيسر على جميع الخيارات الممكنة للتكوين ، ويعرض الجزء الأيمن الجزء العمومي settings.json ملف. تحتاج إلى وضع قواعد التكوين المخصصة الخاصة بك في هذا الملف.

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

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

    بعد نسخ لصق ، بلدي العالمية settings.json الملف يشبه هذا:

     // ضع إعداداتك في هذا الملف لاستبدال الإعدادات الافتراضية "editor.fontFamily": "Courier New"، "editor.tabSize": 2، "explorer.workingFiles.maxVisible": 5، "css.lint.duplicateProperties" : "تحذير" 

    بعد حفظ التعديل settings.json الملف ، تتغير مظاهر المحرر الخاص بي مرة واحدة (في لقطة الشاشة أدناه ، يكون تغيير عائلة الخط مرئيًا فقط):

    يمكنك تغيير إعدادات مساحة العمل بشكل مشابه. الآن تحتاج إلى الضغط على ملف> تفضيلات> إعدادات مساحة العمل في شريط القائمة العلوي للوصول إلى مساحة العمل ذات الصلة .vscode / settings.json ملف.

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