تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

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

في هذه الحلقة، يستعرض Addy & Matt مجموعة المكونات الإضافية الخاصة بـ Sublime Text ويناقشان كيف يساعد كل منها في سير العمل.

التحكم في الطرود

للحصول على الحِزم (أو المكوّنات الإضافية) المُشار إليها في الحلقة، عليك تثبيت Package Control (التحكم في الحزمة)، وهو أمر رائع وسهل التثبيت ويمكنك العثور على إرشادات حول كيفية تنفيذ ذلك هنا.

لقطة شاشة للتحكم في الحزمة

JSHint

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

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

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

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

لقطة شاشة للمكوّن الإضافي JSHint Sublime

وهناك مشاكل أخرى سيرصدها:

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

لتثبيت SublimeLinter-JSHint Package، عليك أيضًا تثبيت الحزمة SublimeLinter واتّباع تعليمات التثبيت في صفحة الحزمة SublimeLinter-JSHint.

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

لقطة شاشة للمكوّن الإضافي JSHint Gutter Sublime

لغة JSCS

سيسلّط JSCS الضوء على أي أماكن لا يتّبع فيها JavaScript نمط ترميز معيّن.

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

تُلقي حزمة SublimeLinter-JSCS الضوء على أيّ مشاكل مضمّنة بأسلوب مشابه لأسلوب JSHint، ما يسهّل تصحيح أي مشاكل.

لقطة شاشة JSCS

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

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

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

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

حزمة التمييز للألوان الفرعية تحتها لقطة شاشة للون

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

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

{
  "ha_style": "filled"
}

لقطة شاشة تُظهر حزمة Color Colorer Sublime Packageer

لون هامش التوثيق

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

لقطة شاشة لون هامش التوثيق

علبة الألوان

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

اضغط على ctrl + shift + c ثم ازدهار - لقد حصلت على أداة اختيار الألوان.

لقطة شاشة لحزمة Color Picker Sublime

AutoFileName

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

لقطة شاشة لـ AutoFileName

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

مررنا جميعًا بلحظة الإدراك هذه التي نسينا فيها إضافة خاصية CSS مسبَقة. باستخدام Autoprefixer، يمكنك تشغيله بسهولة على 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;
}

يمكنك أيضًا تحديد المتصفحات وإصدارات المتصفحات التي تريد دعمها في إعدادات الحزمة. راجع صفحة التحكم في الحزمة لمزيد من المعلومات.