أجمل في المشاريع الكبيرة: قضاء 20 دقيقة على الإعداد ، ونسيان التنسيق إلى الأبد

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



قبل عام ، واجه أحد الفرق في Skyeng مثل هذه holivars في كل مراجعة تقريبًا. ولكن بعد ذلك الشخص الأكثر ألمًا ، قال: "الآن نحن نعيش على Prettier ، هل توافق؟" على مدى الأشهر المقبلة ، لم يثر الرجال مطلقًا مسألة التنسيق ، والآن أصبح هذا الشيء في مستودع الواجهة أحادي الواجهة بالكامل - ويستخدمه كل فريق. الذي يدعو هناك.

كما كان من قبل

في ذلك الوقت ، كان هناك بالفعل العشرات من المطورين في Skyeng ، ويمكن أن يأتي ما بين 10-20 شخصًا جديدًا كل شهر. كل شخص عمل (ويعمل) في فرق صغيرة - في الحقيقة ، يعتبر كل منها "وحدة قتالية" مستقلة لها مهامها وتفاهماتها.

دعونا نتخيل واحدة - بالتأكيد جميع الصدف عشوائية - الأمر:

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

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

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

كيف فعلت

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

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

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

إلى:

public listenDndForFocusEvents(channel: string): Observable<boolean> { return this.drag .pipe( filter( event => event.channel === channel ), filter( event => event instanceof DndDragStartEvent || event instanceof DndDragEndEvent ), map( event => event instanceof DndDragStartEvent ) ) } 

بعد:

  public listenDndForFocusEvents(channel: string): Observable<boolean> { return this.drag.pipe( filter(event => event.channel === channel), filter(event => event instanceof DndDragStartEvent || event instanceof DndDragEndEvent), map(event => event instanceof DndDragStartEvent), ); } 

حتى إذا كانت مكتوبة في سطر واحد ، فسوف تتم إعادة صياغتها كما ينبغي:

  public listenDndForFocusEvents(channel: string): Observable<boolean> { return this.drag.pipe(filter(event => event.channel === channel), filter(event => event instanceof DndDragStartEvent || event instanceof DndDragEndEvent), map(event => event instanceof DndDragStartEvent),); } 

جزء آخر من التعليمات البرمجية ، بالفعل بدون فواصل منقوطة. إلى:

 const lessonCount$ = this.studentLessonsCounterService .getCounter().pipe(map(featureInfo => featureInfo.lessonCount)) const isItTimeForNotification$ = lessonCount$.pipe(map(lessonCount => lessonCount % REAL_TALK_NOTIFICATION_LESSON_INTERVAL === 0)) 

بعد:

 const lessonCount$ = this.studentLessonsCounterService .getCounter() .pipe(map(featureInfo => featureInfo.lessonCount)); const isItTimeForNotification$ = lessonCount$.pipe( map(lessonCount => lessonCount % REAL_TALK_NOTIFICATION_LESSON_INTERVAL === 0), ); 

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