JSX inside of object isn't formatted properly

Versions:

• prettier-eslint-cli version: 4.7.1
• node version: 8.11.2
• npm (or yarn) version: 5.10.0

My code started formatting weirdly when I introduced the 'no-extra-parens': ['error', 'all'] rule. Here’s an example:

const object = {
  component:
  <ConditionsButton conditions={conditions} counterparts={counterparts} />
  ,
};

I’m expecting the component to wrap at 80 characters, and the extra comma to be after the closing bracket of the JSX line.

Here are the logs from --log-level trace, they’re absolutely massive, maybe something else is going on? https://gist.github.com/Floriferous/a4804511ada112ba400ffaef83ffb5fe

EDIT: Here’s my .eslintrc.js:

module.exports = {
  parser: 'babel-eslint',
  parserOptions: {
    ecmaVersion: 6,
    ecmaFeatures: {
      jsx: true,
    },
  },
  plugins: ['import', 'jsx-a11y', 'meteor', 'react', 'flowtype'],
  extends: ['airbnb', 'plugin:meteor/recommended', 'plugin:react/recommended'],
  env: {
    es6: true,
    node: true,
    browser: true,
  },
  globals: {},
  rules: {
    'class-methods-use-this': 'off',
    indent: [1, 2],
    'max-len': ['error', 80],
    'no-underscore-dangle': [
      'error',
      {
        allowAfterThis: true,
        allow: [
          '_id',
          '_ensureIndex',
          '_verifyEmailToken',
          '_resetPasswordToken',
          '_storedLoginToken',
          '_name',
          '_execute',
        ],
      },
    ],
    'object-curly-newline': ['error', { consistent: true }],
    'multiline-ternary': ['error', 'always-multiline'],
    'no-extra-parens': ['error', 'all'],
    'no-mixed-operators': ['error', { allowSamePrecedence: false }],
    'function-paren-newline': ['error', 'multiline'],
    'import/no-unresolved': 'off',
    'import/no-absolute-path': 'off',
    'import/no-extraneous-dependencies': 'off',
    'import/extensions': 'off',
    'import/prefer-default-export': 'off',
    'import/no-named-as-default': 'off',
    'jsx-a11y/no-static-element-interactions': 'off',
    'jsx-a11y/click-events-have-key-events': 'off',
    'jsx-a11y/anchor-is-valid': 'off',
    'react/forbid-prop-types': 'off',
    'react/sort-prop-types': [
      'error',
      {
        callbacksLast: false,
        ignoreCase: true,
        requiredFirst: false,
        sortShapeProp: false,
      },
    ],
    'meteor/no-session': 'off',
  },
};

[zimme]

I’ve had a quick look through the stacktrace you linked to and I can see that prettier produces the output that you want then we run that through eslint and I can see the warning about extra parens and such and then the output of that is that ...map(... is back to a oneliner again… I’m not sure why eslint does this, I’m guessing it’s parsing the ast of the text to check the semantics of the code and then when it print the text back in output it doesn’t care about the previous formatting.

I don’t really know how to fix this for the moment but I’d suggest you look into eslint-config-prettier to see if you can disable all/some eslint rules that conflict with prettier and see if that will help you out short term.

Maybe we can use eslint-config-prettier to find the rule that is conflicting in this case and based on that attack the problem properly.

[Floriferous]

Not stale