Наш проект использует 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;
Преттир хочет, чтобы эти строки предназначались еще для двух пробелов.
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 с такой скоростью, потому что устранять неисправности довольно неприятно.