Xo: Something wrong with spaces between curly braces

[lcdss]

When xo is executed, for some reason, it thinks all curly braces shouldn't have spaces and it can't fix the code even if there is nothing to fix. If I remove the spaces, it complain about the object-curly-spacing rule, and if I add the spaces (prettier already add them automatically on save), it still fails. Anyone knows why this is happening?

import { render, unmountComponentAtNode } from 'react-dom';
import { render } from 'react-dom';
import React, { useEffect, useState } from 'react';

const letters = { a: 'a', b: 'b' };

var/www/client $ yarn lint
yarn run v1.21.1
$ xo

  tests/app.test.js:3:9
  ✖  3:9   Replace ·render,·unmountComponentAtNode· with render,·unmountComponentAtNode  prettier/prettier

  ✖  10:20  Replace ·a:·'a',·b:·'b'· with a:·'a',·b:·'b'                                  prettier/prettier

  src/index.js:4:9
  ✖  4:9   Replace ·render· with render                                                  prettier/prettier

  src/app.js:3:16
  ✖  3:16  Replace ·useEffect,·useState· with useEffect,·useState                        prettier/prettier

  3 errors
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

{
  "xo": {
    "envs": [
      "browser",
      "es2020",
      "mocha"
    ],
    "extends": [
      "xo-react"
    ],
    "prettier": true,
    "rules": {
      "import/extensions": [
        "error",
        {
          "css": "always"
        }
      ],
      "import/no-unassigned-import": [
        "error",
        {
          "allow": [
            "**/*.css"
          ]
        }
      ],
      "object-curly-spacing": [
        "error",
        "always"
      ],
      "unicorn/catch-error-name": "off"
    }
  }
}

{
  "printWidth": 80,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all"
}

[papb]

Hello, I have just faced this problem as well, and found the solution. Sadly, XO infers rules from prettier in a way that I don't think is correct. From readme:

prettier

Type: boolean\
Default: false

Format code with Prettier.

The Prettier options will be read from the Prettier config and if not set will be determined as follow:

• semi: based on semicolon option
• useTabs: based on space option
• tabWidth: based on space option
• trailingComma: none
• singleQuote: true
• bracketSpacing: false <<<===== See this
• jsxBracketSameLine: false

If contradicting options are set for both Prettier and XO an error will be thrown.

Instead of using prettier defaults, XO has basically overwritten some of them. So you have to update your prettier config, adding bracketSpacing explicitly:

{
  "printWidth": 80,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
+ "bracketSpacing": true,
  "trailingComma": "all"
}

[lcdss]

Thanks for sharing the solution. I opted to configure eslint + prettier manually for this specific project but next time I'Il try it again.