Конфликт ESLint и Prettier, невозможно отключить Prettier для блока кода

В нашем проекте используются Prettier и ESLint. Обычно они отлично работают вместе, но мы сталкиваемся с проблемой, когда они конфликтуют. Я не знаю почему, я не могу понять, как это исправить, и я не могу отключить prettier для строки, потому что получаю ошибки.

Соответствующие части наших настроек

// .prettierrc
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "arrowParens": "always"

// eslintrc.js
  extends: ['airbnb', 'eslint-config-prettier', 'prettier/react'],
  plugins: [
    'eslint-plugin-prettier',
    'redux-saga',
    'react',
    'react-hooks',
    'jsx-a11y',
  ],
  rules: {
    'prettier/prettier': ['error'],
    indent: [
      2,
      2,
      {
        SwitchCase: 1,
      },
    ],
    'max-len': 0,

А вот код с добавленными комментариями, указывающими на проблемы:

    const options =
      children === undefined
        ? items.map((item) => (
          // Prettier complains about the next four lines
          <option key={uuidv1()} value={item}>
            {item}
          </option>
        ))
        : children;

Prettier хочет, чтобы эти строки были еще двумя пробелами.

Снимок экрана с ошибками

ESLint нравятся им такими, какие они есть. Я склонен согласиться с ESLint. Если я автоматически форматирую Prettier, ESLint жалуется и хочет вернуть его обратно. Я использую VSCode. Такого конфликта нигде в нашей кодовой базе не было.

Я попытался просто отключить prettier для этих строк, но опция автоматического отключения с eslint добавляет // eslint-disable-next-line prettier/prettier, из-за чего приложение выдает ошибку Definition for rule 'prettier/prettier' was not found. Попытка добавить // prettier-ignore невозможна из-за JSX.

Я не понимаю, почему Prettier хочет то, что говорит ESLint. Единственный способ исправить это - полностью удалить 'prettier/prettier': ['error'], из нашей конфигурации ESLint, что кажется неуместным.

Предложения?

Обновление 10.10.19 - благодаря предложению пользователя chazsolo я изменил форматирование функции, чтобы получить это, что не имеет проблем с линтингом:

const dropDownOptions =
  children ||
  items.map((item) => (
    <option key={uuidv1()} value={item.value || item}>
      {item.text || item}
    </option>
  ));

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

Обходной путь также работает, только если я проверяю значение типа children на ложность. У нас есть еще одно условие, когда это совпадение, и я не могу его таким же образом замкнуть. Все эти проблемы связаны с использованием .map().

// Can't short-circuit here
var === SOME_ENUM
  ? filteredItems.map((item) => (
      // some JSX
    ))
  : filteredItems.map((item) => (
      // some other JSX
    ));

Я могу переместить условие внутри функции карты, но это приводит к проверке условия в каждом цикле.

Эта проблема возникла много, и я, вероятно, создам проблему в Prettier с такой скоростью, потому что устранение неполадок довольно раздражает.


javascript eslint prettier
person cdpautsch    schedule 01.10.2019    source источник
comment
Вы против того, чтобы писать код немного иначе? Вместо использования троичной цепи вы можете замкнуть накоротко children и items.map. Я не могу проверить, сработает ли это?   -  person chazsolo    schedule 10.10.2019
comment
Смотрите мою правку. Это хорошее предложение, и оно работает в данном случае, но мы находим много похожих проблем, связанных с картой внутри тернарных операторов. Не все обходные пути возможны или идеальны. : / Все-таки ценю идею!   -  person cdpautsch    schedule 10.10.2019
comment
Рад, что это помогло вам, но, к сожалению, я не знаю, как лучше всего позволить eslint / prettier хорошо работать вместе. В вашем следующем примере я бы рекомендовал создать для компонента методы встроенных функций сопоставления, а затем использовать такие же SOME_ENUM ? filteredItems.map(fn1) : filteredItems.map(fn2). Я знаю, что это не решает проблему, но тем не менее чем заняться :)   -  person chazsolo    schedule 10.10.2019

Ответы (1)


arrow_upward
0
arrow_downward

Моя базовая настройка хорошо работает для vue / ts в .eslintrc.json. Вы должны добавить красивее в плагины

{
  "parser": "vue-eslint-parser",
  "parserOptions": { 
    "parser": "@typescript-eslint/parser" 
  },
  "plugins": ["@typescript-eslint", "prettier"],
  "rules": {
    "semi": ["error", "never"],
    "quotes": ["error", "single"],
    "prettier/prettier": "error"
  }
}
person bravohex    schedule 14.04.2021