ESLint — переопределение правил из eslint-плагина-красивее

#eslint #prettier

#eslint #красивее

Вопрос:

Я использую ESLint с более красивым плагином и конфигурацией:

 // eslintrc.js
extends: [
  `eslint:recommended`,
  `plugin:react/recommended`,
  `plugin:@typescript-eslint/recommended`,
  `plugin:prettier/recommended`,
  `prettier/react`,
  `prettier/@typescript-eslint`
]
 

Это отлично работает, но я хотел бы отключить определенное более красивое правило, которое удаляет «ненужные» круглые скобки (их удаление фактически нарушает мой код):

 // Replace `(state.counter)` with `state.counter` eslint(prettier/prettier)
return <div>{(state.counter)}</div>
 

Как вы можете видеть из приведенного выше сообщения, в нем не указано, какое именно правило вызывает такое поведение, и поэтому я не знаю, какое из них переопределить.

Я попытался переопределить все правила, найденные в eslint-prettier-config, но ничего не сработало, и я не хочу продолжать использовать // eslint-disable-next-line prettier/prettier .

Ответ №1:

Prettier не так настраивается. Вы можете попробовать их конфигурацию: https://prettier.io/docs/en/configuration.html

Поместите .prettierrc файл или конфигурацию eslint следующим образом:

 {
  rules: {
   'prettier/prettier': [
      'error',
      {
        trailingComma: 'all',
        tabWidth: 2,
        semi: false,
        singleQuote: true,
        bracketSpacing: true,
        eslintIntegration: true,
        printWidth: 120,
      },
    ],
  }
}
 

Комментарии:

1. спасибо, сэкономил мне много времени <3

Ответ №2:

В настоящее время невозможно отключить это конкретное правило из prettier с помощью конфигурации, но для переопределения правил в eslint, которые поступают из extends блока, вы можете либо записать в правило следующим образом:

 "rules": {
  "prettier/prettier": "off"
  "@typescript-eslint/no-use-before-define": [
    "error",
    { "functions": false, "variables": true, "classes": true },
  ],
}
 

Или, чтобы переопределить его только для определенного шаблона файла, вы можете переопределить его в overrides блоке.

 "overrides": [
  {
    "files": ["*.html"],
    "rules": {
      "prettier/prettier": "off",
      "@typescript-eslint/unbound-method": "off"
    }
  }
]
 

Здесь я показываю как конфигурацию, которую вы искали, так и унаследованное правило из вложенного пакета, чтобы показать будущим посетителям, как это сделать.

Комментарии:

1. overrides Как вы узнали, что должны поместить в раздел "prettier/prettier" ? Почему бы просто prettier не документировать это где-нибудь? Я пытаюсь сделать то же самое для плагина cypress и не знаю, что именно поставить