jsx-max-props-per-line, maximum param, object style

[leszeof]

Hello everyone! I have some problem with this rule jsx-max-props-per-line It says that i can use it like "react/jsx-max-props-per-line": [2, { maximum: { single: 3, multi: 1 } }] but my eslint config says that maximum should be integer, not object. Explain me please why docs example does not work in my case? The same situation happens in VS code. My main goal is : according to my style guide if > 3 props/attributes per line in jsx it should be soft-wrapped to new line and become multiline with 1 attr/props per line. Maybe anyone know some?

my logs: Problem with ESLint reformatting: .eslintrc.js: Error: .eslintrc.js: Configuration for rule "react/jsx-max-props-per-line" is invalid: Value {"single":3,"multi":1} should be integer. Error: .eslintrc.js: Configuration for rule "react/jsx-max-props-per-line" is invalid: Value {"single":3,"multi":1} should be integer.

• at ConfigValidator.validateRuleOptions (C:\projects\web\node_modules\@eslint\eslintrc\lib\shared\config-validator.js:144:23) at C:\projects\web-ufs\node_modules\@eslint\eslintrc\lib\shared\config-validator.js:199:18 at Array.forEach ( ) at ConfigValidator.validateRules (C:\projects\web\node_modules\@eslint\eslintrc\lib\shared\config-validator.js:196:34)
• at ConfigValidator.validateConfigArray (C:\projects\web\node_modules\@eslint\eslintrc\lib\shared\config-validator.js:322:18)
• at CascadingConfigArrayFactory._finalizeConfigArray (C:\projects\web\node_modules\@eslint\eslintrc\lib\cascading-config-array-factory.js:493:23)
• at CascadingConfigArrayFactory.getConfigArrayForFile (C:\projects\web\node_modules\@eslint\eslintrc\lib\cascading-config-array-factory.js:299:21)
• at CLIEngine.isPathIgnored (C:\projects\web\node_modules\eslint\lib\cli-engine\cli-engine.js:973:18)
• at ESLintPlugin.invokeESLint (C:\Program Files\JetBrains\WebStorm 2020.2.3\plugins\JavaScriptLanguage\languageService\eslint\bin\eslint-plugin.js:100 :23)
• at ESLintPlugin.fixErrors (C:\Program Files\JetBrains\WebStorm 2020.2.3\plugins\JavaScriptLanguage\languageService\eslint\bin\eslint-plugin.js:81:21)

[ljharb]

What version of eslint-plugin-react do you have? The object form of the config was added in v7.26.0 (and we're up to v7.27.0 now)

[leszeof]

What version of eslint-plugin-react do you have? The object form of the config was added in v7.26.0 (and we're up to v7.27.0 now)

Hello! Thanks for feedback. My config is: "eslint": "7.32.0", "eslint-config-airbnb-typescript": "12.3.1", "eslint-config-prettier": "8.3.0", "eslint-import-resolver-webpack": "0.13.0", "eslint-plugin-import": "2.22.1", "eslint-plugin-jest": "24.3.6", "eslint-plugin-jsx-a11y": "6.4.1", "eslint-plugin-prettier": "3.4.0", "eslint-plugin-react": "7.23.2", "eslint-plugin-react-hooks": "4.2.0", "prettier": "2.4.1",

Now i see, my version is v7.23.2. So i can just upgrade my eslint-plugin-react and everything will work?

[ljharb]

I'd start with that - and also, use ^ for everything. Pinning versions in package.json is useless (and harmful), since lockfiles exist.

[leszeof]

I'd start with that - and also, use ^ for everything. Pinning versions in package.json is useless (and harmful), since lockfiles exist.

Thank you very much! Now it is working correct! =) But my config contradicts itself - more than 3 props in a row cannot be (and it linted now), but when saving, prettier transfers everything to one line (as max line length is 140).

[ljharb]

Indeed, prettier conflicts with a number of eslint rules. You need to extend the prettier shared config, as well, so conflicting rules are disabled.

[leszeof]

Thanks a lot for your answers! It was helpful!

I suspect that it will only be possible to find out at random?) I mean what rules can be conflicting with each other.

[ljharb]

That's why the prettier config exists - someone manually audited every rule and collected them into one shared config that disables them all.