ESLint и конфликт Претти, невозможно отключить Претти для блока кода - PullRequest
Новая
       14

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

3 голосов
/ 01 октября 2019

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

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

// .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;

Преттир хочет, чтобы эти строки предназначались еще для двух пробелов.

Screenshot of errors

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

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

Я не понимаю, почему Преттиер хочет того, чего хочет 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 с такой скоростью, потому что устранять неисправности довольно неприятно.

...