الإضافات النصية Sublime Text

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

في هذه الحلقة، أُضيفت "أدي" "مات" ينظر إلى مجموعة المكونات الإضافية لـ Sublime Text وناقش كيف لكل منها في سير عملهم.

التحكم في الحزمة

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

JSHint

JSHint هو برنامج لـ JavaScript يفحص لغة JavaScript. ويبرز أي أخطاء محتملة أو ممارسات سيئة في التعليمات البرمجية.

على سبيل المثال، إذا كتبت عن طريق الخطأ اسم متغير بشكل خاطئ، مثل أدناه، سيشير JSHint إلى أن fo لم يتم تحديده مطلقًا سيؤدي إلى حدوث خطأ.

var foo = { bar: 'Hello, World.' };
var msg = fo.bar;

المكوّن الإضافي JSHint إلى المشاكل من خلال عرض مربّع أصفر حول النص ووضع المؤشر في هذا الجزء من الرمز سوف يؤدي إلى حدوث خطأ الرسالة التي تظهر في الجزء السفلي الأيسر من Sublime.

في ما يلي المشاكل الأخرى التي سيرصدها:

• يشير ذلك المصطلح إلى المتغيّرات التي يتم تحديدها ولكن لم يتم استخدامها مطلقًا.
• تجنب إنشاء دوال داخل التكرارات الحلقية
• استخدام طرق المقارنة الصحيحة

لتثبيت حزمة SublimeLinter-JSHint يجب أيضًا تثبيت حزمة SublimeLinter واتّباع خطوات عملية التثبيت التعليمات على صفحة حزم SublimeLinter-JSHint.

قد يجد بعض المطوّرين أنه من المفيد تضمين JSHint Gutter المكون الإضافي أيضًا. إنه يضع نقطة صغيرة في هوامش التوثيق لأي سطر تواجه مشكلة في JSHint.

لغة البرمجة JSCS

ستُميِّز JSCS أي أماكن لا تتّبع لغة JavaScript نمط ترميز محدّد.

على سبيل المثال، يمكن استخدام JSCS لتحديد ما إذا كان ينبغي للمسافات تُستخدم بعد الكلمات الرئيسية، مثل "if"، أو تحديد ما إذا كانت الأقواس المعقوفة يجب أن تكون على نفس السطر أو سطر جديد من الطريقة.

حزمة SublimeLinter-JSCS يحدد أي مشاكل مضمنة بأسلوب مشابه لـ JSHint مما يسهل تصحيح أي مشكلات.

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

الخيار الأفضل هو أنّه باستخدام حزمة JSCS-Formatter، يمكنك إصلاح أي مشاكل في الصفحة تلقائيًا. بالضغط على ctrl + shift + p، وكتابة "JSCS Formatter: تنسيق هذا الملف" والضغط على Enter. يمكنك الاطّلاع على مزيد من المعلومات في مشاركة مدونة آدي.

قلم تمييز الألوان

تمييز الألوان سوف تضيف لونًا إلى خلفية أي تعريفات للألوان في CSS أو Sass.

يمكنك تحديد ما إذا كان سيظهر كتسطير الخلفية الكاملة عند التمرير فوقها أو دائمًا اللون على خلفية التعريف. ما عليك سوى الانتقال إلى "إعدادات الحزمة" > "تمييز الألوان" > "الإعدادات - الإعدادات التلقائية" للاطّلاع على الإعدادات الأولية وتغيير الإعدادات في "الإعدادات - المستخدم".

لتمييز الخلفية الكاملة أضف ما يلي إلى "الإعدادات - المستخدم" الملف:

{
  "ha_style": "filled"
}

لون التوثيق

لون هامش التوثيق كبديل لتمييز اللون، بدلاً من عرض اللون أعلى متغير اللون، فإنها تضع اللون في هامش التوثيق لهذا الخط.

علبة الألوان

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

اضغط على ctrl + shift + c وأطلق العنان - لقد حصلت على منتقي الألوان بنفسك.

AutoFileName

AutoFileName هو مكون إضافي صغير وبسيط يقدم قائمة بالملفات المحتملة أثناء الكتابة. هذا رائع إذا كنت تحاول كتابة اسم صورة أو إضافة ملف CSS أو JS لأنه يوفر لك الوقت والأهم من ذلك، يقلل من مخاطر الأخطاء الإملائية.

بادئة تلقائية

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

وهذا يعني أننا نتجه نحو ذلك..

.container-thingy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

..إلى ما يلي، فقط من خلال الضغط على ctrl + shift + p وكتابة "إضافة بادئة CSS تلقائيًا" والضغط على Enter.

.container-thingy {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

يمكنك أيضًا تحديد المتصفحات وإصدارات المتصفحات التي تريدها. للدعم في إعدادات الحزمة. يمكنك الاطّلاع على صفحة "التحكُّم في الحزمة" للحصول على المزيد من المعلومات

المزيد...

هناك عدد كبير من المكونات الإضافية الأخرى الموجودة Sublime Text، لذا تأكد من استكشاف التحكم في الحزمة.

لمزيد من النصائح والنصائح، عليك لعرض عرض الشرائح الرائعة الذي يوفره WesBos اختصارات لوحة المفاتيح والمكوّنات الإضافية الأخرى لتطبيق Sublime Text

وقد ألّف WesBos أيضًا كتابًا بعنوان: "Sublime Text for the Power User" (نص إضافي للمستخدم المتمرّس) قد يحوز على اهتمامك الأشخاص الرائعين أيضًا :)