موصى به, 2020

اختيار المحرر

10 ممتاز بين قوسين ملحقات تحتاج حقا

أصدرت Brackets.io الإصدار 1.2 مؤخرًا ، مع بعض الميزات الجديدة الرائعة التي يمكنك قراءتها على مدونتها. لقد قمنا بتجميع قائمة تضم 10 من أفضل الإضافات بين الأقواس وأكثرها فائدة (بدون ترتيب معين) ، بالإضافة إلى إرشادات كاملة لكل ملحق.

ملحقات بين قوسين

1. رمز للطي

على عكس الكثير من IDEs وبرامج تحرير الشفرات الأخرى لا يوجد Brackets خيار طي الكود متاح بشكل افتراضي. باستخدام Code Folding ، يمكنك بسهولة تصغير أجزاء كبيرة من شفرتك في سطر واحد. يتوفر ملحق Folding Code في Github ومن مدير الإضافة Brackets.

كيف تستعمل

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

يتم إخفاء أرقام الأسطر للخطوط المطوية ، لذلك من السهل تحديد الخطوط المطوية عند التركيز على الشفرة.

2. Lorem Pixel

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

إذا لم يكن ذلك جيدًا بما فيه الكفاية ، فستستمر صور العنصر النائب في التغير في كل مرة تعيد فيها تحميل الصفحة! غالبًا ما تؤدي الصور إلى إفساد أنظمة الألوان ، لذا يوفر لك Lorem Pixel خيار "تدرج الرمادي" لاستخدام صور العناصر النقطية فقط. يتم تشغيل هذا الامتداد عن طريق lorempixel.com وهو متاح من مدير ملحقات Brackets.

باستخدام Lorem Pixel

كيف تستعمل

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

3. autoprefixer

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

كيف تستعمل

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

يتيح لك Autoprefixer أيضًا إضافة بادئات مخصصة في إعداداته. للانتقال إلى إعدادات الإضافة: تحرير إعدادات Autoprefixer.

للحصول على تعليمات برمجية جميلة ، متسلسلة ، مسبوقة ، قم بتمكين خيار التعاقب المرئي في إعدادات الامتداد.

4. معاينة تخفيض السعر

يعتبر Markdown عبارة عن لغة ترميز نصية جميلة يسهل تحويلها إلى HTML. تتيح ميزة Markdown Preview عرض Markdown أسفل إصدار النص مباشرةً. يتيح لك هذا الخيار الاختيار بين نمطين مختلفين ، وهما: تخفيض أسعار بنكهات Github والهبوط القياسي.

هناك ثلاث سمات يمكنك اختيارها لإطار المعاينة - Light و Dark و Classic. لدى Markdown Preview أيضًا خيار مزامنة التمرير (ممكّن بشكل افتراضي). يمكن تنزيل الإضافة من Gitub أو من مدير إضافات Brackets.

كيف تستعمل

افتح ملف .md أو ملف .markdown . إذا قمت بتثبيت معاينة Markdown ، فيجب أن يظهر زر M on على اليمين. انقر فوقه ، وسترى Markdown المقدمة. لتغيير المظهر ، أو تعطيل مزامنة التمرير ، ما عليك سوى النقر على رمز الترس في الزاوية العلوية اليسرى من قسم معاينة علامة التمييز.

5. بين قوسين الرموز

من الممتع دائمًا تحريك محرر الشفرات الخاص بك برموز الملفات. Brackets Icons يضيف رموزًا ملونة ، استنادًا إلى نوع الملف ، إلى جميع الملفات المدرجة في الشريط الجانبي. يحتوي على رموز لمعظم أنواع الملفات ، ويمكنك نشر طلبات الرموز على صفحة Github.

نصيحة منحة:

تستخدم الأقواس الأيقونات أيقونات من مشروع Ionicons. يمكنك أيضًا التحقق من الامتداد File Icons (شوكة في مشروع Icons Brackets) الذي يستخدم الرموز من مشروع Font Awesome. يتلخص في تفضيل شخصي في النهاية.

كيف تستعمل

مجرد تثبيت تمديد وتحميل الأقواس (F5).

6. شريط أدوات المستندات

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

كيف تستعمل

تثبيت الامتداد وإعادة تحميل Brackets (F5).

7. الأقواس جيت

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

ملاحظة: لاستخدام Brackets Git تحتاج إلى تثبيت Git على جهاز الكمبيوتر الخاص بك. بعد تثبيت الإضافة ، قد تحتاج إلى إدخال المسار إلى ملف Git القابل للتنفيذ (إذا لم يكن في المسار الافتراضي).

كيف تستعمل

إلتزام ملف باستخدام Brackets Git

استخدام Brackets Git مستقيم للأمام. اجعل مجلد Gitub repo المحلي مجلد المشروع في Brackets. ثم افتح ملفًا وقم بإجراء بعض التغييرات واحفظه. ثم يمكنك المضي قدما والنقر على أيقونة Git على اليمين وهذا سيفتح جزء Git Brackets في الأسفل. وسوف تدرج أي تعديلات قمت بها على ملفاتك.

تحقق من الملفات التي تريد ارتكابها ، ثم انقر فوق الزر "ارتكاب". هذا سيفتح قائمة منبثقة التغييرات التي تم إجراؤها. أدخل رسالة الالتزام الخاصة بك وانقر على موافق. وقد ارتكبت بنجاح ملف إلى Git مباشرة من بين قوسين!

بعد الالتزام فقط اضغط على زر الضغط (كما يظهر عدد مرات الالتزام غير المتزامنة ، كما ترون في ملف GIF أعلاه).

تكوين الإعدادات

افتح جزء Git Brackets وانقر فوق الزر "إعدادات" (الثاني من اليمين). لا تتردد في تكوين Brackets Git على أي حال كنت ترغب في ذلك.

لعرض ملف والتاريخ التزام

ما عليك سوى النقر فوق الأزرار المعنية لعرض محفوظات الملف وسجل الالتزام بشكل جميل. هل ذكرنا أنه يمكنك تغيير الصورة الرمزية إما إلى صورة رمزية سوداء وبيضاء أو صورة ملونة أو صورة Gravatar الخاصة بك؟

تاريخ الالتزام

8. الوبر كل الأشياء

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

كيف تستعمل

لاستخدام Lint ALL Things ، ما عليك سوى الانتقال إلى علامة التبويب عرض والنقر فوق Lint بأكملها Project .

9. بين قوسين تودو

Brackets Todo هو ملحق صغير أنيق يعرض جميع تعليقات TODO في تنسيق قائمة أنيق. افتراضيا ، فإنه يدعم 5 علامات - TODO ، ملاحظة ، FIXME ، التغييرات و FUTURE. يمكنك أيضًا وضع علامة "تم" على التعليقات. في خيارات العرض ، يمكنك تصفية التعليقات حسب العلامات. تتيح لك Brackets Todo تعريف الألوان المخصصة للعلامات بالإضافة إلى علاماتك الخاصة أيضًا ، إذا كنت تريد أبدًا أن تكون مبدعًا مع تعليقاتك.

إذا كنت تعمل على مشروع كبير ، وتحتاج إلى متابعة التعليقات من ملفات متعددة ، فيمكنك تغيير نطاق بحث Brackets Todo. هل تريد استبعاد بعض الملفات والمجلدات مثل مجلدات الموردين؟ لا داعى للقلق. ما عليك سوى إضافة المسار في قائمة الاستبعاد. يمكنك تخصيص الإعدادات لكل مشروع عن طريق إضافة ملف .todo في دليل مشروع الجذر.

يمكنك الذهاب من خلال جميع خيارات الإعدادات في وثائق جيثب.

كيف تستعمل

لاستخدام Brackets Todo ، ما عليك سوى إضافة تعليق إلى الشفرة باستخدام علامة داخلية. يجب أن يكون اسم العلامة مكتوبًا بأحرف كبيرة ، متبوعًا بنقطتين (:). لعرض كل Todo's ، فقط انقر فوق الرمز Todo في جزء التمديد اليد اليمنى.

تكوين:

  • للسماح بتعليقات تودو على HTML: فقط افتح الإعدادات - انقر على أيقونة Todo ← الإعدادات (رمز الترس) - وانقر لفتح ملف todo. إلى هذا الملف ، أضف هذا الرمز:
     {"regex": {"prefix": "(؟ :) :)}} 

    كيف تبدو قائمة إعدادات Todo
  • لتغيير نطاق البحث: أضف هذه الشفرة إلى ملف todo:
     {"البحث": {"النطاق": "مشروعي"}} 
  • لاستبعاد أي امتداد للملفات / المجلدات / الملفات من نطاق البحث: أضف هذه الشفرة إلى ملف todo:
     {"البحث": {"النطاق": "مشروعي" ، 

    "excludeFolders": ["yourfolder"]

     "excludeFiles": ["yourfile"] "excludeFiles": [".yourextension"]}} 

10. تجميل

تجميل يجعل الرمز الخاص بك تبدو جيدة. يقوم بإصلاح المسافات والمسافات البادئة والخطوط.

كيف تستعمل

من السهل جدا استخدام Beautify. كل ما عليك فعله هو اختيار رمز> انقر بزر الماوس الأيمن > Beautify .

بدلاً من ذلك ، يمكنك التوجه إلى علامة التبويب تحرير والنقر فوق " تجميل ".

Top