meinhard
@meinhard

Prettier — как настроить чтобы каждый jsx атрибут был с новой строки?

Собственно, настроил себе связку eslint + prettier, все работает с одним исключением, в JSX все атрибуты у тега пишутся в одну строку, а хотелось бы каждый с новой строки:

Как prettier форматирует сейчас:
<li className={classNames} onMouseLeave={() => setMouseLeave(true)} onMouseEnter={() => setMouseLeave(false)}>


Как должен:
<li className={classNames} 
     onMouseLeave={() => setMouseLeave(true)} 
     onMouseEnter={() => setMouseLeave(false)}>


Как этого добиться?

.prettierrc
{
    "singleQuote": true,
    "printWidth": 120,
    "tabWidth": 4,
    "semi": true,
    "trailingComma": "none",
    "jsxBracketSameLine": true,
    "arrowParens": "always",
    "bracketSpacing": true
}
  • Вопрос задан
  • 5107 просмотров
Пригласить эксперта
Ответы на вопрос 1
Vlad_IT
@Vlad_IT
Front-end разработчик
В eslint с eslint-plugin-react есть правило jsx-max-props-per-line. Настраиваете его, и используете autofix самого eslint, либо делаете интеграцию eslint с prettier https://github.com/prettier/eslint-plugin-prettier https://github.com/prettier/prettier-eslint
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы