Prettier react/jsx-max-props-per-line format with VSCode

I was able to get it to work with the following:

// .eslintrc.jsmodule.exports = {  extends: [    'react-app',    'prettier',    'plugin:prettier/recommended',  ],  plugins: ['prettier'],  rules: {    'react/jsx-first-prop-new-line': [2, 'multiline'],    'react/jsx-max-props-per-line': [      2,      { maximum: 1, when: 'multiline' },    ],    'react/jsx-indent-props': [2, 2],    'react/jsx-closing-bracket-location': [      2,      'tag-aligned',    ],  },}// .prettierrc{ "semi": false, "singleQuote": true, "printWidth":80 // default}

Along with my dev dependencies which is essentially from eslint-config-react-app

"devDependencies": {"@types/node": "^14.6.0","@types/react": "^16.9.46","@types/react-dom": "^16.9.8","@typescript-eslint/eslint-plugin": "^4.0.0","@typescript-eslint/parser": "^4.0.0","babel-eslint": "^10.0.0","eslint": "^7.5.0","eslint-config-prettier": "^7.2.0","eslint-config-react-app": "^6.0.0","eslint-plugin-flowtype": "^5.2.0","eslint-plugin-import": "^2.22.0","eslint-plugin-jest": "^24.0.0","eslint-plugin-jsx-a11y": "^6.3.1","eslint-plugin-prettier": "^3.3.1","eslint-plugin-react": "^7.20.3","eslint-plugin-react-hooks": "^4.0.8","eslint-plugin-testing-library": "^3.9.0","jest": "^26.6.3","prettier": "^2.2.1","typescript": "4.0.5"},

Which formats the code ONLY if the line exceeds printWidth: 80 characters.

<InputField name="password" placeholder="password" label="Password" type="password" />  // transforms to this if line exceeds 'printWidth'<InputField  name="username"  placeholder="username"  label="Username"  type="text" />

module.exports = {    'extends': [        'eslint:recommended',    ],    'env': {        'es6': true    },    'plugins': ['react'],    'parser': 'babel-eslint',    'rules': {        // you rules....        'react/jsx-first-prop-new-line': [1, 'multiline'],        'react/jsx-max-props-per-line': [1,            {                'maximum': 1            }        ]    },};

yarn add --dev prettier-eslint-cli

VS code userConfig

"prettier.eslintIntegration": true,

First, you should only ESLint rules to your ESLint config, not your .prettierrc file.. they will be ignored since they're not valid Prettier configuration. Also, ESLint does not affect Prettier behavior. You can run Prettier via ESLint (as an auto-fixable rule via eslint-plugin-prettier) or run Prettier and run ESLint after, using prettier-eslint) which VSCode uses if you have prettier.eslintIntegration turned on.

Now you probably need to change the ESLint rule to use {"when": "always"} option. According to the docs, using "multiline" will only complain if your component is already multiline, but you have more than 1 prop per line:

<Icon   icon="arrow-left"  widht={15} height={18}/>

Using "always" will never allow more than 1 prop per line, even when the tag is not originally multiline.