الحفاظ على نظافة الكود الخاص بك بأجمل

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

مسائل التنسيق

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

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

التحدث باللغة الصحيحة

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

• جافا سكريبت
• لغة البرمجة
• CSS
• ساس
• تخفيض السعر
• YAML

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

جرب أجمل باستخدام ساحة اللعب عبر الإنترنت

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

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

على سبيل المثال ، حاول إدخال JavaScript التالية:

(وظيفة ()
{
window.alert ("موافق")
}())

أجمل يجب أن يحولها إلى:

(وظيفة () {
window.alert ("موافق") ؛
})();

لاحظ ، بشكل افتراضي ، أن التغييرات التي يقوم بها Prettier تشمل:

• تحويل السلاسل ذات علامات الاقتباس المفردة إلى سلاسل ذات علامات اقتباس مزدوجة
• مضيفا الفاصلة المنقوطة
• تحويل المسافات البادئة إلى مسافتين

يوجد في أسفل اليسار زر يتيح لك عرض الخيارات. باستخدام المثال السابق ، حاول ضبط عرض علامة التبويب ، وتبديل ملف --اقتباس واحد علم تحت شائع، أو تبديل - لا شبه علم تحت جافا سكريبت.

تكوين الخيارات

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

ومع ذلك ، يدرك المؤلفون أيضًا أن بعض القرارات لها تأثير وظيفي يتجاوز مجرد مظهر الكود. تظل بعض الخيارات - بما في ذلك البعض للأغراض القديمة - قائمة ، لذا يجب على الأقل فهم ما يفعلونه ، حتى إذا كنت تستخدم Prettier في حالتها الافتراضية.

أفضل طريقة للإدارة أجمل الخيارات هو حفظها في ملف التكوين. هناك العديد من الطرق لتنظيم ذلك ، ولكن ابدأ بإنشاء ملف باسم .prettierrc.json في دليل المشروع المحلي الخاص بك. يمكن أن تحتوي على أي من الخيارات المدعومة في كائن JSON قياسي ، على سبيل المثال

{
"tabWidth": 8
}

ستتم قراءة ملف التكوين نفسه بواسطة Prettier سواء كنت تقوم بتشغيله عبر سطر الأوامر أو محرر نصوص مدعوم.

باستخدام الغزل أو npm ، يجب أن يكون التثبيت مباشرًا. للغزل:

$ الغزل العالمي أضف أجمل

وللحالة npm:

تثبيت $ npm - أجمل عالميًا

بمجرد تثبيت Prettier عالميًا ، يجب أن تكون قادرًا على كتابة:

أجمل دولار

بشكل افتراضي ، ستظهر لك شاشة تحتوي على نص تعليمات لتأكيد تثبيت الأداة وتشغيلها بشكل صحيح.

تنظيف ملف

لإعادة تنسيق ملف ، استخدم أمرًا مشابهًا لما يلي:

أجمل $ - اكتب filename.js

سيؤدي هذا إلى استبدال الملف الأصلي ، والذي غالبًا ما يكون الطريقة الأكثر ملاءمة. بدلاً من ذلك ، قد ترغب فقط في العمل بشكل أجمل في كل ملف في المشروع:

أجمل $ - اكتب.

سيتم تشغيل برنامج Prettier عبر جميع الملفات الموجودة ضمن الدليل الحالي ، لتنسيق كل الملفات التي يتعرف عليها.

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

prettier test.js $> test2.js

فحص ملف

للحصول على تقرير أجمل عن نظافة التعليمات البرمجية الخاصة بك دون إجراء أي تغييرات فعليًا ، استخدم --التحقق من علم إما باسم ملف واحد أو العديد:

أجمل دولار.

ستحصل على سطر إخراج لكل ملف لا يتطابق مع التنسيق المتوقع ، وفقًا لتهيئة Prettier:

جاري التحقق من التنسيق ...
[تحذير] .prettierrc
[تحذير] .prettierrc.json
[تحذير] تم العثور على مشكلات نمط التعليمات البرمجية في الملف (الملفات) أعلاه. هل نسيت تشغيل أجمل؟

خيارات سطر الأوامر

تتوفر خيارات Prettier القياسية كخيارات سطر أوامر ، إذا كنت بحاجة إليها. فيما يلي مثال على كيفية عمل ملف --اقتباس واحد يؤثر العلم على الإخراج:

أجمل $ tmp.js
مثال على الوظيفة () {
console.log ("hello، world")؛
}
$ أجمل - اقتباس أحادي tmp.js
مثال على الوظيفة () {
console.log ('hello، world')؛
}

الحصول على مساعدة

توفر أداة Command Line مساعدة إعلامية حول أي خيار عبر ملف --مساعدة علم:

أجمل - مساعدة الفاصلة الزائدة
--دراجة فاصلة 
اطبع الفواصل اللاحقة حيثما أمكن عندما تكون متعددة الأسطر.
الخيارات الصالحة:
es5 الفواصل اللاحقة عندما تكون صالحة في ES5 (كائنات ، مصفوفات ، إلخ.)
بلا فواصل لاحقة.
كل الفواصل اللاحقة حيثما أمكن ذلك (بما في ذلك وسيطات الوظيفة).
الافتراضي: es5

باستخدام محرر نصوص

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

نص سامي

شبيبة هو مكون إضافي لـ Sublime Text يجعل Prettier متاحًا في المحرر. على الرغم من وجود عدة طرق مختلفة لتثبيت JsPrettier ، فإننا نوصي باستخدام طريقة التحكم في الحزمة. ستحتاج إلى تثبيت Prettier بالفعل ، ثم افتح لوحة أوامر Sublime Text وحدد "Package Control: Install Package":

ثم ابحث عن "jsprettier" وانقر لتثبيته:

بمجرد تثبيت JsPrettier ، يمكنك النقر بزر الماوس الأيمن فوق أي ملف مفتوح لتنسيقه. يمكنك أيضًا تعيين قيمة auto_format_on_save إلى صحيح في إعدادات JsPrettier والتي ستؤدي إلى قيام JsPrettier تلقائيًا بتنظيف أي ملفات متوافقة عند حفظها في نص Sublime.

ذرة

التثبيت لـ Atom مشابه جدًا لـ Sublime Text: ما عليك سوى استخدام مدير الحزم المدمج في المحرر للتثبيت أجمل ذرة:

بمجرد التثبيت ، يصبح الاستخدام مألوفًا: يتيح لك الاختصار أو عنصر القائمة تنسيق ملف عند الطلب ، بينما يتيح لك إعداد Atom تشغيل Prettier تلقائيًا كلما تم حفظ ملف.

همة

Vim هو محرر قوي للغاية يعتمد على سطر الأوامر وغير مناسب للمبتدئين. يعد الحصول على أجمل للعمل مع vim أمرًا معقدًا بشكل مناسب ، لكنه لا يزال بضع خطوات فقط:

mkdir -p ~ / .vim / pack / plugins / start
استنساخ بوابة https://github.com/prettier/vim-prettier \
~ / .vim / pack / plugins / start / vim-prettier

من المحتمل أن يكون Git هو أسهل طريقة لتنزيل الملفات الضرورية ، ولكن أي وسيلة للحصول على vim-prettier في دليل البدء هذا يجب أن تقوم بهذه المهمة.

بمجرد التثبيت ، سيتم تشغيل Prettier تلقائيًا عند حفظ الملف في vi. يمكن أيضًا تشغيله يدويًا في أي وقت عبر ملف أجمل يأمر:

والذي يجب أن ينتج عنه ملف نظيف:

دمج أجمل في مشروعك

يمكن أن يساعد استخدام مُنسق التعليمات البرمجية مثل Prettier في الحفاظ على قاعدة بيانات يسهل قراءتها. يمكن أن يساعد أيضًا في تجنب النقاشات حول أي نمط معين يجب استخدامه عند الترميز - ما عليك سوى الاستعانة بمصادر خارجية لتلك القرارات لـ Prettier!

أخيرًا ، يمكن إعداد git hook لضمان تنظيف الكود دائمًا عندما يكون ملتزمًا بمستودع مشروعك. يمكن للمطورين الفرديين أن يكونوا أحرارًا في تنسيق التعليمات البرمجية الخاصة بهم كما يحلو لهم ، ولكن النسخة المركزية ستكون دائمًا نظيفة ومتسقة.

نانو مقابل. Vim: أفضل برامج تحرير النصوص الطرفية ، مقارنة

هل تبحث عن محرر نصوص طرفي لنظام التشغيل Linux؟ الاختيار الرئيسي بين Vim و nano! هنا كيف يقارنون.

عن المؤلف