تكامل Prettier وتعارضات القواعد
ادمج Prettier مع ESLint، وتجنّب القواعد المكررة، وتعامل مع التعارضات بين قواعد الأسلوب والمنطق.
تكامل Prettier وتعارضات القواعد درس مجاني في TypeScript Academy على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في TypeScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة TypeScript Academy 3 دروس في المجموع.
مقدمة
الهدف: اجمع بين Prettier (التنسيق) وESLint (المنطق والنمط) دون تعارض.
تثبيت
ثبّت Prettier وإضافات وإعدادات ESLint لدمجهما بسلاسة.
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettierإعداد Prettier
يمتلك Prettier ملف إعداد خاصًا به. استخدمه لخيارات التنسيق فقط، مثل علامات الاقتباس والفواصل المنقوطة وطول السطر.
// .prettierrc.json
{
"semi": false,
"singleQuote": true
}دمج الإعدادات
أضف plugin:prettier/recommended إلى extends في ESLint. وهو يتضمن eslint-config-prettier وeslint-plugin-prettier.
// .eslintrc.js
module.exports = {
extends: [
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
]
}مثال على التعارض
من دون إعداد مناسب، قد يختلف ESLint وPrettier حول أمور مثل الفواصل المنقوطة. يعطّل الإعداد قواعد ESLint المتعارضة.
// demo.ts
const msg = "hi"
console.log(msg)
// ESLint: missing semicolon
// Prettier: auto removes semicolons if disabled
// Solution: use eslint-config-prettierتشغيل عمليات التحقق
شغّل ESLint للتحقق من المنطق والنمط، وPrettier للتنسيق. ويمكنك أيضًا دمجهما في محرر الشيفرة لديك.
npx eslint "src/**/*.{ts,tsx}"
npx prettier --check "src/**/*.{ts,tsx}"سؤال
تحقق سريع: ماذا يفعل eslint-config-prettier؟
مراجعة
مراجعة: ثبّت Prettier وإعداداته، وأضفه إلى extends في ESLint، وعطّل القواعد المتعارضة، ثم شغّل الأداتين بانسجام.
الأسئلة الشائعة
هل درس «تكامل Prettier وتعارضات القواعد» مجاني؟
نعم — نص درس «تكامل Prettier وتعارضات القواعد» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة TypeScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة TypeScript Academy 3 دروس في المجموع.
ماذا ستتعلم في «تكامل Prettier وتعارضات القواعد»؟
ادمج Prettier مع ESLint، وتجنّب القواعد المكررة، وتعامل مع التعارضات بين قواعد الأسلوب والمنطق. تتمرن على TypeScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ TypeScript Academy؟
لا تُشترط خبرة سابقة. TypeScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.
كم من الوقت يستغرق درس «تكامل Prettier وتعارضات القواعد»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس TypeScript Academy هذا؟
نعم. كل درس في TypeScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- ESLint + @typescript-eslint
- تكامل Prettier وتعارضات القواعد
- مجموعات القواعد الشائعة في المشاريع الواقعية