كيفية إعداد ESLint وPrettier لقاعدة تعليمات برمجية نظيفة في عام 2026

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

ماذا تفعل كل أداة

القسم: ESLint يتعامل مع جودة الكود (المنطق، الأخطاء المحتملة)، ويتعامل Prettier مع التنسيق (كيف يبدو). يؤدي استخدام كليهما، مع امتلاك التنسيق Prettier، إلى تجنب التعارضات.

التثبيت

# Install both plus the integration packages
npm install --save-dev eslint prettier
npm install --save-dev eslint-config-prettier
# eslint-config-prettier turns off ESLint rules that conflict with Prettier

تكوين ESLint (التكوين المسطح، 2026)

// eslint.config.js (flat config - the modern standard)
import js from '@eslint/js';
import prettier from 'eslint-config-prettier';

export default [
  js.configs.recommended,
  {
    languageOptions: {
      ecmaVersion: 2025,
      sourceType: 'module',
    },
    rules: {
      'no-unused-vars': 'warn',
      'no-console': 'warn',
      'prefer-const': 'error',
      'eqeqeq': 'error',   // require === over ==
    },
  },
  prettier,   // MUST be last - disables ESLint rules that conflict with Prettier
];

تكوين أجمل

// .prettierrc.json
{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2,
  "arrowParens": "always"
}

# .prettierignore - files Prettier should skip
node_modules
dist
build
*.min.js
coverage

المفتاح: دع التنسيق أجمل

الخطأ الكلاسيكي هو محاولة كل من ESLint وPrettier تنسيق التعليمات البرمجية – فهم يتعارضون ويتقاتلون حول علامات الاقتباس والفواصل المنقوطة والمسافات. الإصلاح هوeslint-config-prettier، مما يؤدي إلى تعطيل جميع قواعد تنسيق ESLint بحيث يتعامل Prettier مع التنسيق ويتعامل ESLint مع جودة التعليمات البرمجية. قم بإضافته أخيرًا في تكوين ESLint الخاص بك حتى يتجاوز القواعد المتعارضة.

البرامج النصية package.json

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

# Run them
npm run lint          # find problems
npm run lint:fix      # auto-fix fixable problems
npm run format        # format all files with Prettier
npm run format:check  # check formatting without changing (for CI)

التنسيق عند الحفظ (رمز VS)

// .vscode/settings.json - commit this so the whole team gets it
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
}

وبهذا، يؤدي حفظ الملف إلى تنسيقه تلقائيًا باستخدام Prettier وإصلاح مشكلات ESLint تلقائيًا. كود متسق بدون أي جهد يدوي.

فرض الالتزام مع الهاسكي والوبر

npm install --save-dev husky lint-staged
npx husky init

// package.json - run linting/formatting only on staged files
{
  "lint-staged": {
    "*.{js,ts,jsx,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,md,css}": "prettier --write"
  }
}

# .husky/pre-commit
npx lint-staged

الآن يقوم كل التزام تلقائيًا بتنسيق الملفات المرحلية وتنسيقها – ولا يدخل أي كود غير منسق أو يفشل في الوبر إلى الريبو.

إعداد TypeScript

npm install --save-dev typescript-eslint

// eslint.config.js with TypeScript
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import prettier from 'eslint-config-prettier';

export default [
  js.configs.recommended,
  ...tseslint.configs.recommended,
  {
    rules: {
      '@typescript-eslint/no-unused-vars': 'warn',
      '@typescript-eslint/no-explicit-any': 'warn',
    },
  },
  prettier,   // last
];

الأسئلة المتداولة

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

س: لماذا يتعارض ESLint وPrettier؟
ج: يمكن لكل منهما فرض قواعد التنسيق (علامات الاقتباس، والفواصل المنقوطة، والتباعد)، إلا أنهما يختلفان. الإصلاح هوeslint-config-prettier، مما يؤدي إلى تعطيل قواعد التنسيق الخاصة بـ ESLint بحيث تمتلك Prettier التنسيق وتمتلك ESLint جودة التعليمات البرمجية. قم بإضافته أخيرًا في تكوين ESLint الخاص بك.

س: هل يجب أن أقوم بتشغيل Prettier من خلال ESLint (eslint-plugin-prettier)؟
ج: بشكل عام لا – تشغيل Prettier كقاعدة ESLint يكون أبطأ ويضيف تمايلات حمراء للتنسيق. يقوم الإعداد الموصى به بتشغيلها بشكل منفصل: Prettier للتنسيق (التنسيق عند الحفظ)، ESLint للجودة، مع eslint-config-prettier لمنع التعارضات.

س: كيف يمكنني فرض ذلك على فريقي؟
ج: قم بتنفيذ ملفات التكوين (eslint.config.js، .prettierrc، .vscode/settings.json) وقم بإعداد Husky + lint-staged بحيث يتم تنفيذ التنسيق التلقائي. أضفformat:check وlint إلى CI، لذلك لا يمكن دمج التعليمات البرمجية غير المنسقة أو الفاشلة. وهذا يضمن الاتساق بغض النظر عن إعدادات المحرر الفردية.

س: ما هو التكوين المسطح وهل يجب أن أستخدمه؟
ج: التكوين المسطح (eslint.config.js) هو تنسيق تكوين ESLint الحديث الذي حل محل تنسيق .eslintrc الأقدم. إنه الإعداد الافتراضي والموصى به في عام 2026 — وهو أكثر وضوحًا ووضوحًا وأفضل في التركيب. استخدامه لمشاريع جديدة.

الخلاصة

تعمل ESLint وPrettier معًا على الحفاظ على قاعدة التعليمات البرمجية الخاصة بك نظيفة ومتسقة. الإعداد:تثبيت كلاهما بالإضافة إلىeslint-config-prettier، اسمح لـ Prettier بالتنسيق الخاص وجودة التعليمات البرمجية الخاصة بـ ESLint، وأضف eslint-config-prettier أخيرًا لمنع التعارضات، وتمكين التنسيق عند الحفظ في VS Code، وفرض الالتزام باستخدام Husky وlint-staged. الفكرة الأساسية هي الفصل بين الاهتمامات – التنسيقات الأفضل، وESLint يلتقط المشكلات – واستخدام eslint-config-prettier حتى لا يتقاتلوا. بمجرد الإعداد، يصبح الكود الخاص بك متسقًا تلقائيًا وخاليًا من الوبر دون أي جهد يدوي، مما يؤدي إلى القضاء على مناقشات التنسيق واكتشاف الأخطاء قبل شحنها. إنه استثمار إعداد صغير يؤتي ثماره على كل ملف تكتبه.