Discussion on: How To Set Up ESLint, TypeScript, Prettier with Create React App

View post

I can't get the prettier to run for some rules. One of them is "jsx-max-props-per-line".

This is how I specified -

"rules": {
        "prettier/prettier": [
            "error",
            {
                "singleQuote": true,
                "jsx-max-props-per-line": [
                    1,
                    {
                        "maximum": "1",
                        "when": "always"
                    }
                ]
            }
        ],
        "react/jsx-max-props-per-line": [
            1,
            {
                "maximum": "1",
                "when": "always"
            }
        ]
    },

Tried almost every permutation and combination. Please note that I only have eslint plugin on vscode enabled. No other linters are present in editor. Can someone please help!

pietro the wizard • Sep 9 '19

I have the same problem. Have you found a solution?

Pramod Mali • Jun 17 '20 • Edited

This is due to 'printWidth' property in the .prettierrc configuration file. By default, it's 120. For me, 80 works great and shows props in a new line.

module.exports = {
semi: true,
trailingComma: "all",
singleQuote: true,
printWidth: 80,
tabWidth: 4
}

prettier.io/docs/en/options.html#p...