Adobe Brackets هي بيئة تطوير متكاملة مفتوحة المصدر وبسيطة وقوية لـ HTML و CSS و JavaScript. وهو يدعم إضافة المكونات الإضافية لتوفير ملحقات وظيفية إضافية. المكونات الإضافية المتوفرة حاليًا ، مثل إضافة الكشف عن الأخطاء ، بادئة CSS الخاصة بالمتصفح ، توضيحات JSDOC ، إلخ. يقدم المحرر التالي باختصار استخدام وإعدادات الأقواس:
1. إعدادات المشروع
1. فتح الأقواس ، الواجهة بأكملها بسيطة للغاية ، ويوفر شريط القائمة العلوي فقط ملف محرر المخرج. على اليسار توجد شجرة ملفات هيكل تنظيم المشروع. استخدم CTRL/CMD+Shift+H للاتصال وإغلاق شجرة الملف. الجانب الأيمن هو منطقة التحرير ، والجزء العلوي هو شريط الأدوات ، والجزء الأوسط هو منطقة المستند ، والجزء السفلي هو المنطقة المطالبة.
2. افتح المشروع. استخدم أمر File> Open Folder لفتح مجلد المشروع. يتم تحديث اسم مشروع شجرة الملف على اليسار إلى اسم مجلد المشروع ، ويتم تحديث شجرة الملف إلى شجرة الملفات للمشروع الحالي.
انقر فوق الزر الأيسر على اسم المشروع لإطفاء قائمة تحرير المشروع. ستعرض قائمة التحرير المشروع التاريخي وأمر تحرير المشروع.
Open Folder Command: افتح مشروعًا جديدًا.
أمر إعدادات المشروع: يعين عنوان الويب للمشروع الحالي ، والذي سيتم استخدامه أثناء تصحيح الأخطاء والمعاينة.
متطلبات الإعداد: يجب أن يكون عنوان ويب يبدأ بـ http: //.
كما هو موضح في الشكل أعلاه ، عند تعيينه على http://127.0.0.1/demo/slide ، سيتم فتح الصفحة المقابلة من خلال عنوان الويب عند معاينة المتصفح.
إذا لم يتم تعيينه ، فسيتم فتح الصفحة من خلال عنوان خطاب محرك الأقراص للملف.
2. تحرير الملف
انقر فوق index.html في شجرة الملف ، وافتح مستند index.html في المنطقة الرئيسية.
1. ستقوم براكين بالتحقق مما إذا كان المستند يتوافق مع مواصفات HTML. كما هو موضح في الشكل أدناه ، هناك كتلة نمط على 20 خطًا يجب وضعه في عقدة الرأس.
2. ضع المؤشر على اسم تسمية سمة فئة أو معرف ، اضغط على CTRL/CMD + E (تحرير) أو تحرير الخروج. ستقوم الأقواس بالبحث في جميع ملفات CSS تحت المشروع ، ثم تفتح محررًا مضمنًا لتضمينه في ملف HTML ، مما يتيح لك تعديل رمز CSS بسرعة.
عندما تحتوي علامة الفئة/المعرف الحالية على تعريفات نمط متعددة ، توفر نافذة التحرير زر تبديل لتبديل نمط العرض ، أو يمكنك استخدام مفاتيح ALT + UP/DOWN للتبديل.
تجدر الإشارة إلى أن الأقواس ستكتشف مستند HTML الحالي وجميع ملفات CSS تحت المشروع للعثور على أنماط الفئة/المعرف ، حتى لو لم تتم الإشارة إلى بعض ملفات CSS في مستند HTML الحالي.
3. يدعم الأقواس أيضًا معاينة/تحرير تعريفات كائن JS السريعة. ضع المؤشر على اسم وظيفة JS ، اضغط على Ctrl/CMD + E (تحرير) أو تحرير الخروج.
4. تحتوي الأقواس على منتقي ألوان مدمج ، مما يوفر أشكال ترميز الألوان من RGBA و HEX و HSLA. ضع المؤشر على رمز اللون ، اضغط على CTRL/CMD + E (تحرير). تحتاج إلى استخدام مفتاح ESC للخروج من نافذة جامع الألوان.
3. معاينة فورية
يوفر Brackets معاينة فورية لصفحات الويب. عند استخدام هذه الوظيفة ، تستدعي Brackets متصفح Chrome لفتح الصفحة الحالية. بعد تعديل HTML و CSS و JavaScript وحفظه ، سوف يستجيب المحتوى المعدل للصفحة في المتصفح فورًا دون تحديث الصفحة يدويًا. هذا هو واحد من أكبر قوسين. تنعم بمبرمجين شاشة ، يمكنك عرض قوسين وكروم على شاشة الانقسام ، والتعديل الفوري للمعاينات الفورية دون تبديل المحرر/المتصفح والصفحات المنعشة.
بعض القيود المفروضة على ميزة المعاينة المباشرة الحالية:
إنه يعمل فقط مع متصفح Chrome كمتصفح مستهدف ، يجب عليك تثبيت Chrome.
يعتمد على تصحيح الأخطاء عن بُعد في Chrome ، والذي يتم تمكينه بواسطة علامة سطر الأوامر. على جهاز Mac ، إذا كنت تستخدم Chrome بالفعل ، فستقوم بتشغيل المعاينة الفورية ، فستطلب منك الأقواس ما إذا كنت ترغب في إعادة تشغيل Chrome لتمكين تصحيح الأخطاء عن بُعد.
يمكن معاينة ملف HTML واحد فقط في نفس الوقت - إذا قمت بتبديل ملف HTML آخر ، فستغلق قوسين المعاينة الأصلية.
4. بعض مفاتيح الاختصار
CTRL/CMD+Shift+H يمكن الاتصال بإغلاق شجرة الملفات
CTRL/CMD + E المعاينة السريعة/تحرير نمط CSS/JavaScript
CTRL/CMD + +/- التكبير داخل وخارج حجم الخط في منطقة التحرير
CTRL/CMD + 0 أعد تعيين حجم الخط في منطقة التحرير
CTRL/CMD + Alt + P قم بتشغيل وظيفة المعاينة الفورية
CTRL / CMD + / Line تعليقات
CTRL / CMD + ALT + / Block تعليقات
ملاحظة: عند التعليق على رمز CSS ورمز HTML ، يمكنك فقط استخدام مفاتيح اختصار التعليقات.