لا تقم فقط بفحص الكود الخاص بك - قم بإصلاحه باستخدام Prettier

يجعل Linting حياتنا أسهل لأنه يخبرنا بالخطأ في الكود الخاص بنا. ولكن كيف يمكننا تجنب القيام بالعمل الفعلي الذي يدخل في إصلاحه؟

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

ماذا تقصد اصلحه؟

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

مع أخذ ذلك إلى المستوى التالي ، ستسمح لك بعض linters في الواقع بتمرير وسيطة إلى الأمر الذي يقوم بتشغيل linter الذي يسمح له بإصلاحه تلقائيًا. هذا يعني أنك لست مضطرًا إلى المرور يدويًا وإجراء كل تلك المسافات البيضاء الصغيرة والفاصلة المنقوطة (إضافتها!؟) تعدل بنفسك!

إذن ما الذي يمكنني فعله أكثر لإصلاح الأشياء؟

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

ما هو أجمل؟

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

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

الابتداء مع Prettier

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

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

إذن ما الذي نبدأ به؟ نحن بالفعل:

  • قمت بتثبيت ESLint
  • لقد أضفت Babel كمحلل لدينا
  • أضفت مكونًا إضافيًا يتضمن تكوينات React

بعد ذلك ، لنبدأ بتثبيت بعض الحزم:

yarn add prettier prettier-eslint prettier-eslint-cli -D

ملاحظة: الأمر أعلاه مشابه لاستخدام npm. إذا كان مشروعك لا يستخدم yarn، فقم بالتبديل npmحسب الاقتضاء.

أعلاه ، نقوم بتثبيت:

  • أجمل: حزمة أساسية ومحرك أجمل
  • prettier-lint: لتمرير نتيجة أجمل إلى ESLint لإصلاحها باستخدام تكوين ESLint الخاص بك
  • prettier-eslint-cli: تساعد Prettier و ESLint على العمل معًا في ملفات مختلفة عبر مشروعك

ونقوم بتثبيتها على أنها تبعية ، لأننا لا نحتاج إليها خارج التطوير

تكوين المنسق الجديد الخاص بك

الآن بعد أن تم تثبيت حزمنا ، يمكننا الإعداد yarnلتشغيل هذا الأمر لنا.

في السابق ، قمنا بإعداد برنامج lintنصي ليبدو هكذا في package.json:

"scripts": { ... "lint": "eslint . --ext .js" ... }

سوف نترك ذلك كما هو ، لكننا سنفعل شيئًا مشابهًا formatوننشئ نصًا جديدًا بجواره يسمى المنسق أجمل:

"scripts": { ... "format": "prettier-eslint --eslint-config-path ./.eslintrc.js --write '**/*.js'", "lint": "eslint . --ext .js" ... }

إذن ما الذي يحدث هناك؟ كان:

  • إضافة برنامج نصي جديد يسمى format، يمكننا تشغيله باسمyarn format
  • نحن نستخدم prettier-eslint-cliالحزمة الخاصة بنا لتشغيل التنسيق لنا
  • نحن نمرر في تكوين ESLint الموجود بجوار package.jsonجذر المشروع (قم بتغيير هذا إذا كان في موقع مختلف)
  • وأخيرًا ، نطلب من الأجمل كتابة جميع الملفات المطابقة **/*.js، أو أي ملفات JS تجدها بشكل متكرر من خلال مشروعنا

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

قم بتشغيل المنسق الخاص بك!

الآن بعد أن تم إعدادنا جميعًا ، فلنقم بتشغيله! قم بتشغيل ما يلي:

yarn format 

وعلى الفور نرى أنه يعمل:

مرحبًا ، الكود الخاص بي يبدو مختلفًا!

كما ذكرت سابقًا ، تخبرنا Prettier بشكل مباشر ، أنه منسق عنيد. إنه يأتي مع قواعده الخاصة ، نوعًا ما مثل تكوين ESLint الخاص به ، لذلك سوف يمر ويقوم بهذه التغييرات أيضًا.

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

إذا أين يتركنا هذا؟

إذا كنت قد اتبعت حتى الآن ، فلدينا الآن أمرين:

  • lint: الذي سيتحقق من رمزك ويخبرك بما هو خطأ
  • format: سيحاول تلقائيًا إصلاح المشكلات نيابة عنك

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

ماذا بعد؟

الآن بعد أن أصبح بإمكاننا تنسيق الكود الخاص بنا تلقائيًا ، يجب أن نكون قادرين على إصلاح الكود تلقائيًا!

في المرة القادمة سنتخذ هذه خطوة إلى الأمام gitوننشئ خطافًا يسمح بتشغيل ذلك قبل الالتزام. هذا يعني أنك لن تقلق أبدًا بشأن نسيان تشغيل هذا مرة أخرى!

تابعني لمزيد من Javascript و UX وأشياء أخرى مثيرة للاهتمام!

  • ؟ تابعني على تويتر
  • ؟ ️ اشترك في My Youtube
  • ✉️ اشترك في رسالتي الإخبارية

نُشر في الأصل على //www.colbyfayock.com/2019/11/dont-just-lint-your-code-fix-it-with-prettier/