جاوااسکریپت - تنظیمات تورفتگی Prettier و eslint با هم کار نمیکنند

من در حال تلاش برای راهاندازی محیط توسعه تایپاسکریپت مبتنی بر ویم هستم، اما مشکلی در مدیریت تورفتگی دارم.

احتمالاً 'eslint' میگوید: indent: انتظار رفتگی ۲ فاصله بود اما ۴ فاصله پیدا شد. پس از بازفرمت کردن با prettier.

فایل .eslintrc.js من:

module.exports = { 
  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
  extends: [ 
    'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],
  parserOptions: { 
    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
    sourceType: 'module', // Allows for the use of imports
    ecmaFeatures: { 
      jsx: true, // Allows for the parsing of JSX
      tsx: true, // Allows for the parsing of TSX ???
    },
  },
  rules: { 
    indent: ['error', 2],
    quotes: ['error', 'single'],
    semi: ['error', 'never'],
    'sort-keys': ['error', 'asc', { caseSensitive: true, natural: false }],
  },
}

فایل .prettierc من:

 module.exports = { 
  semi: false,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 80, 
  tabWidth: 2,
};

پاسخ شماره ۱

طبق نظر کای کاتالدو در مورد این مسئله در گیتهاب:

قاعدهٔ تورفتگی ESLint و سبکهای تورفتگی Prettier با هم همخوانی ندارند - آنها پیادهسازیهای کاملاً جداگانهای هستند و دو رویکرد متفاوت برای حل همان مشکل («چگونه تورفتگی یکنواخت را در یک پروژه اعمال کنیم») هستند.

بنابراین، هنگام استفاده از prettier بهتر است قانون indent در eslint را غیرفعال کنید. تضمین شده است که آنها با یکدیگر تداخل خواهند داشت.

پاسخ شماره ۲

این باید آن را اصلاح کند https://github.com/prettier/eslint-config-prettier

این قوانین در eslint که با prettier تضاد دارند را غیرفعال میکند.

npm install --save-dev eslint-config-prettier

در فایل .eslintrc.* خود آخرین "prettier" را در بخش extends قرار دهید

"extends": [
         //"some-other-config-you-use",
         "prettier"
      ],

پاسخ شماره ۳

در eslintrc اضافه کنید indent: [2, 2, { SwitchCase: 1}]

پارامترهای تعریفشده

1. قوانین جدید eslint میخواهند پارامتر اول یک عدد باشد: شدت باید یکی از موارد زیر باشد: 0=خاموش، 1=هشدار، 2=خطا.

2. مقدار تورفتگی

3. این شیء بیان میکند که چگونه باید switch و case را مطابق با گزینههای موجود در اینجا تو رفتگی داد.

پاسخ شماره ۴

من به همان مشکل برخوردم. مسئله این است که شما میتوانید هر قاعدهی متضاد را به صورت دستی نادیده بگیرید. در مورد من، این افزونه prettier/prettier برای ESLint بود، بنابراین میتوان آن را با اضافه کردن قانون indent، زیر افزونه مورد نیاز حل کرد.

"rules": {
        // "indent":["error",10]
        "prettier/prettier":[  //or whatever plugin that is causing the clash
            "error",
            {
                "tabWidth":4
            }
        ]
    }

میتوانید قوانین خاص را به این شکل نادیده بگیرید تا از هر گونه تضاد خلاص شوید.