إعداد Prettier وESLint
أضف Prettier للتنسيق التلقائي وESLint لاكتشاف الأخطاء، واضبط الأداتين وادمجهما في سير عمل ينسّق عند الحفظ.
إعداد Prettier وESLint درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
لماذا نؤتمت تنسيق التعليمات البرمجية؟
تهدر النقاشات حول التنسيق اليدوي للتعليمات البرمجية وقت الفريق. يقوم Prettier بتنسيق التعليمات البرمجية تلقائيًا وفق نمط موحّد. ويكتشف ESLint الأخطاء ويفرض أفضل الممارسات. ومعًا، يلغي الأداتان فئات كاملة من الملاحظات في مراجعات التعليمات البرمجية.
تثبيت Prettier
ثبّتوا Prettier باعتبارها تبعية للتطوير، وأنشئوا ملف إعدادات، وأضيفوا نصًا برمجيًا للتنسيق إلى package.json. لا تحتاج Prettier إلى إعدادات كي تعمل، فالإعدادات الافتراضية مناسبة، لكن يمكنكم تخصيصها.
npm install --save-dev prettier
# .prettierrc (optional config)
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 80
}دمج Prettier مع VSCode
ثبّتوا إضافة Prettier - Code Formatter. ثم عيّنوها كمنسّق افتراضي وفعّلوا formatOnSave في الإعدادات. بعد ذلك، ستعمل Prettier في كل مرة تحفظون فيها ملفًا.
// .vscode/settings.json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}تثبيت ESLint
ثبّتوا ESLint وابدؤوا إعدادها باستخدام npm init @eslint/config. يساعدكم هذا المعالج في اختيار بيئتكم، browser/node، ونظام الوحدات ودعم TypeScript. وينشئ ملف eslint.config.js.
npm install --save-dev eslint
npx eslint --init
# Or for a flat config:
npm install --save-dev @eslint/js
# creates eslint.config.jsمثال على إعداد ESLint
إعداد flat بسيط لـ ESLint لمشروع JavaScript يعمل في المتصفح. يمكن أن تكون القواعد 'error' أو 'warn' أو 'off'. وسّعوا الإعدادات المشتركة مثل @eslint/js الموصى بها للحصول على أساس قوي.
// eslint.config.js
import js from '@eslint/js';
export default [
js.configs.recommended,
{
rules: {
'no-console': 'warn',
'no-unused-vars': 'error',
'eqeqeq': 'error'
}
}
];ESLint مع TypeScript
في مشاريع TypeScript، أضيفوا typescript-eslint لاكتشاف المشكلات الخاصة بـ TypeScript، مثل الاستخدام غير الآمن لـ any، وغياب أنواع الإرجاع، وسوء استخدام Promises.
npm install --save-dev typescript-eslint
// eslint.config.js
import tseslint from 'typescript-eslint';
export default tseslint.config(
...tseslint.configs.recommended
);استخدام Prettier وESLint معًا
تحتوي ESLint على بعض قواعد التنسيق التي تتعارض مع Prettier. استخدموا eslint-config-prettier لتعطيل هذه القواعد، ودعوا Prettier تتولى التنسيق بالكامل بينما تركز ESLint على جودة التعليمات البرمجية.
npm install --save-dev eslint-config-prettier
// eslint.config.js — add prettier last:
import prettierConfig from 'eslint-config-prettier';
export default [
js.configs.recommended,
prettierConfig // disables ESLint formatting rules
];.eslintignore و .prettierignore
حدّدوا للأدوات الملفات التي ينبغي تخطيها. يستخدم ملف .eslintignore صيغة gitignore. وعادةً ما تريدون تجاهل node_modules وdist والملفات المُنشأة تلقائيًا.
# .eslintignore
node_modules
dist
.next
coverageنصوص npm البرمجية للفحص
أضيفوا نصوص lint وformat إلى package.json حتى يتمكن CI وأعضاء الفريق من تشغيلها بطريقة موحّدة.
{
"scripts": {
"lint": "eslint src --ext .js,.ts,.tsx",
"lint:fix": "eslint src --fix",
"format": "prettier --write src",
"format:check": "prettier --check src"
}
}lint-staged وhusky لخطافات ما قبل commit
استخدموا husky مع lint-staged لفحص الملفات المرحّلة وتنسيقها تلقائيًا قبل كل commit في git. ويمنع ذلك وصول التعليمات البرمجية غير المنسّقة أو المعطّلة إلى المستودع.
npm install --save-dev husky lint-staged
npx husky init
# package.json:
"lint-staged": {
"*.{js,ts,tsx}": ["eslint --fix", "prettier --write"],
"*.{css,json,md}": "prettier --write"
}EditorConfig للاتساق الأساسي
يفرض ملف .editorconfig إعدادات المحرر الأساسية، مثل نمط المسافات البادئة ونهايات الأسطر، في جميع المحررات وبيئات التطوير المتكاملة بغض النظر عن الإضافات. أضيفوه إلى جانب Prettier.
# .editorconfig
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = trueاختبار سريع
لماذا ينبغي إضافة eslint-config-prettier إلى إعدادات ESLint التي تستخدم Prettier أيضًا؟
مراجعة: Prettier وESLint
تنسّق Prettier التعليمات البرمجية تلقائيًا عند الحفظ من خلال إضافة VSCode. وتكتشف ESLint الأخطاء ومخالفات النمط. استخدموا eslint-config-prettier لتجنب التعارضات. وأضيفوا lint-staged مع husky لفرض الفحص قبل commit. تلغي الأدوات المتسقة النقاشات حول التنسيق وتكتشف الأخطاء قبل نشر التعليمات البرمجية.
الأسئلة الشائعة
هل درس «إعداد Prettier وESLint» مجاني؟
نعم — نص درس «إعداد Prettier وESLint» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «إعداد Prettier وESLint»؟
أضف Prettier للتنسيق التلقائي وESLint لاكتشاف الأخطاء، واضبط الأداتين وادمجهما في سير عمل ينسّق عند الحفظ. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «إعداد Prettier وESLint»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- Chrome DevTools: Elements وConsole وNetwork
- VSCode: الإضافات واختصارات Emmet
- إعداد Prettier وESLint
- توافق المتصفحات وcaniuse.com