Eslint + Prettier + React. Props indents

Question

I want to use this format, where first prop located in the line with the tag

<strong className={`list__item_price${props.price ? '' : ' empty'}`}
        itemProp="offers"
        itemScope
        itemType="http://schema.org/Offer">

I want to use prettier and eslint. But they conflict with each other. Prettier says first prop should be on the next line, while Eslint says it should be on the first line. Here's the options:

.prettierrc.json :

{
  "printWidth": 120,
  "tabWidth": 4,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": false,
  "jsxBracketSameLine": true,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

.eslintrc.json :

{
    "env": {
        "browser": true,
        "es2020": true
    },
    "ecmaFeatures": {
        "modules":true,
        "arrowFunctions":true,
        "classes":true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb",
        "prettier",
        "prettier/react"
    ],
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 11,
        "sourceType": "module"
    },
    "settings": {
        "import/resolver": "webpack"
    },
    "plugins": [
        "react",
        "prettier"
    ],
    "rules": {
        "no-plusplus": "off",
        "prettier/prettier": "error",
        "prettier/tabWidth": "off",
        "react/jsx-indent": ["error", 4],
        "react/jsx-indent-props": ["error", "first"],
        "react/jsx-props-no-spreading": ["error", {
            "html": "ignore"
        }],
        "react/jsx-closing-bracket-location": ["error", "after-props"],
        "react/jsx-first-prop-new-line": ["error", "never"],
        "jsx-a11y/no-static-element-interactions": "off",
        "jsx-a11y/click-events-have-key-events": "off"
    }
}

As you see, I tried to turn off some prettier options, but it didn't help. Could explain, how can I do that?

Answer 1

Prettier doesn't support that style. You have several alternative options:

1. Run Prettier before ESLint so ESLint overrides with the format you want
2. Use Prettier without this style
3. Use this style without Prettier