Max jsx props per line within a function parameter

Question

I am using prettier-eslint and trying to add a new eslint rule that limits the number of jsx props per line:

eslintrc:

...
rules: {
  'react/jsx-max-props-per-line': [2, { maximum: 1 }],
  'react/jsx-indent-props': [2, 2],
  'react/jsx-first-prop-new-line': [2, 'multiline'],
}
...

However, when I have code like the following, it gets corrected as detailed below. I would prefer it to be corrected instead to the following. jsx-wrap-multiline seems to go after the solution I am looking for, but it doesn't deal with function parameters. How would I be able to get the desired linting linsted below? Thanks!

// Original Code
const foo = () => showModal(<SampleComponent title="hello world" id={123} />);

// Fixed Code
const foo = () =>
  showModal(<SampleComponent
    title="hello world"
    id={123}
  />);

// Desired Fix
const foo = () => showModal(
  <SampleComponent
    title="hello world"
    id={123}
  />
);

---

full .estlintrc.js:

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: './tsconfig.json',
  },
  env: {
    browser: true,
  },
  overrides: [
    {
      files: ['*.test.*'],
      env: {
        jest: true,
      },
    },
  ],
  plugins: ['@typescript-eslint', 'jsx-max-len', '@babel'],
  extends: [
    'airbnb-typescript',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'prettier',
    'prettier/react',
    'prettier/@typescript-eslint',
  ],
  globals: {
    // tests
    page: true,
    browser: true,
    describe: true,
    beforeAll: true,
    beforeEach: true,
    afterAll: true,
    afterEach: true,
    it: true,
    test: true,
    expect: true,
    global: true,
  },
  rules: {
    // ----- REACT ----- //
    'react/destructuring-assignment': 0,
    'react/display-name': 0,
    'react/jsx-closing-bracket-location': 1,
    'react/jsx-curly-newline': 0, // handled by prettier
    'react/jsx-indent': 'off',
    'react/jsx-one-expression-per-line': 0, // unnecessary rule
    'react/jsx-props-no-spreading': 0, // Allow prop spreading
    'react/jsx-wrap-multilines': ['error', { arrow: true, return: true, declaration: true }],
    'react/no-array-index-key': 0, // index keys are fine when used correctly
    'react/no-unused-prop-types': 0, // Fails on SFC which GoogleMapReact is, etc.
    'react/prop-types': 0, // Don't use prop types, use Typescript
    'react/require-default-props': 0,
    'react/jsx-max-props-per-line': [2, { maximum: 1 }],
    'react/jsx-indent-props': [2, 2],
    'react/jsx-first-prop-new-line': [2, 'multiline'],

    // ----- JSX ----- //
    'jsx-a11y/click-events-have-key-events': 0,
    'jsx-a11y/label-has-associated-control': 0,
    'jsx-a11y/label-has-for': 0, // good eventually, but not now
    'jsx-a11y/no-noninteractive-element-interactions': 0,
    'jsx-a11y/no-static-element-interactions': 0,
    'jsx-max-len/jsx-max-len': [2, { lineMaxLength: 100, tabWidth: 2, maxAttributesPerLine: 1 }],

    // ----- TYPESCRIPT ----- //
    '@typescript-eslint/ban-types': 0,
    '@typescript-eslint/explicit-module-boundary-types': 0, // Eventually turn these back on
    '@typescript-eslint/indent': 'off',
    '@typescript-eslint/no-empty-interface': 0,
    '@typescript-eslint/no-explicit-any': 0, // For now allow 'any'
    '@typescript-eslint/no-inferrable-types': 0,
    '@typescript-eslint/no-redeclare': 0,
    '@typescript-eslint/no-var-requires': 0,
    '@typescript-eslint/prefer-as-const': 0,
    '@typescript-eslint/prefer-optional-chain': 'error',

    // ----- OTHER ----- //
    'array-bracket-spacing': 0, // ['error', 'always'],
    'arrow-parens': ['error', 'always'],
    'comma-dangle': ['error', 'always-multiline'],
    // Always enforce curly braces around if/else blocks; https://eslint.org/docs/rules/curly
    curly: 'error',
    'import/named': 0, // doesn't play well with Typescript
    'implicit-arrow-linebreak': 0, // this conflicts with lines that are too long
    'import/prefer-default-export': 0,
    // This doesn't work with the aliases we've set up, plus I believe Typescript catches this
    // anyways
    'import/no-unresolved': 0,
    indent: 'off',
    'no-alert': 0,
    'no-case-declarations': 0,
    'no-console': ['error', { allow: ['warn', 'error'] }], // allow warnings and error logs
    'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
    // GraphQL relies on an internal variable, __typename, with a dangling underscore.
    'no-underscore-dangle': ['error', { allow: ['__typename'] }],
    // Use the babel/eslint plugin to handle optional changing something like a?.foo() would
    // raise a linting error before
    'no-unused-expressions': 0,
    // I *think* that the typescript compiler catches unused variables, plus this complaints about
    // imported types
    'no-unused-vars': 0,
    'object-curly-spacing': ['error', 'always'],
    'prefer-destructuring': 0,
    quotes: 'off',
    semi: ['error', 'always'],
  },
};

full .prettierrc:

{
  "arrowParens": "always",
  "printWidth": 100,
  "trailingComma": "all",
  "tabWidth": 2,
  "singleQuote": true
}

Answer 1

I think you are missing the

"plugins": [
  ...
  "prettier"
],

Answer 2

I think you just needed to change prettier to have print-width of 80 and it should work. I tried the same and found that to be the solution for me. Hope it works for you too!