التعارض شكله إيه؟
ESLint يقول: الفاصلة المنقوطة خطأ لو موجودة. Prettier يقول: كل جملة تخلّص بفاصلة. تحفظ الملف، Prettier يحط الفاصلة، ESLint يعلّمها أحمر. تحذفها عشان اللينتر، الحفظ الجاي يرجّعها. الشغل يلف.
الخلاف ده على شكل. صاحب الشكل واحد: Prettier. ESLint يسيب قواعد الشكل، ويفضل على المعنى.
الحزمة اللي بتعمل كده اسمها eslint-config-prettier. مش بتضيف قواعد. بتقفل قواعد ESLint اللي بتتداخل مع Prettier.
npm install --save-dev eslint-config-prettierآخر عنصر هو اللي يتطبق
import js from "@eslint/js";import eslintConfigPrettier from "eslint-config-prettier";export default [ js.configs.recommended, { files: ["**/*.js"], languageOptions: { ecmaVersion: 2022, sourceType: "module", }, rules: { eqeqeq: ["error", "always"], "no-unused-vars": "warn", }, }, eslintConfigPrettier,];eslintConfigPrettier في الآخر. لو حطيت بعده كائن فيه semi أو quotes أو indent، رجّعت التعارض، لأن الكائن الأخير يغلب اللي قبله. بعض نسخ الحزمة كانت بتتستورد من eslint-config-prettier/flat. لو السطر العادي وقع، صفحة الحزمة هي اللي تقول المسار.
قواعد المعنى زي eqeqeq وno-unused-vars تفضل قبل سطر Prettier. سطر Prettier مش بيلغيها. بيلغي اللي بيخاصم الفورماتر.
إعداد جاهز من حد تاني
في حزم اسمها بالعادة eslint-config- وبعدين اسم، زي eslint-config-prettier أو إعداد Airbnb. تثبّت الحزمة، وتقرأ صفحتها عشان تعرف إزاي تتستورد. ESLint ٩ غيّر الشكل، فمفيش سطر واحد ينفع لكل الحزم.
الشكل القديم في .eslintrc كان مصفوفة أسماء:
{ "extends": ["some-config", "prettier"]}كلمة prettier هنا معناها إعداد ESLint اللي بيقفل التعارض، مش حزمة Prettier نفسها. وفي الملف الحديث الاستيراد مكان النص، والمصفوفة مكان extends. prettier لسه آخر اسم، لنفس سبب الترتيب.