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

Question

[meinhard]

Собственно, настроил себе связку 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
}

Answer 1

[Владимир Проскурин]

В 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

Comments

[meinhard]

добавил правило в .eslintrc

{
    "extends": [
      "react-app",
      "prettier"
    ],
    "rules": {
      "jsx-quotes": [
        1,
        "prefer-double"
      ],
      "react/jsx-max-props-per-line": [2, {"maximum": 1, "when": "always" }] 
    },
    "plugins": [
      "prettier"
    ]
}

появилась проблема с отступом, как сделать, чтобы вычислялись пробелы и атрибуты шли один за другим?

сейчас

<li className={classNames}
onMouseLeave={() => setMouseLeave(true)}
onMouseEnter={() => setMouseLeave(false)}>

хочу

<li className={classNames}
    onMouseLeave={() => setMouseLeave(true)}
    onMouseEnter={() => setMouseLeave(false)}>

[meinhard]

если не трудно, поделись инструкцией как пошагово внедрить prettier на проект, пользуюсь create-react-app