0.44.0 eslint-config-prettier/flowtype.js error persists, prettier=false

[mp0wr]

I reproduced the prettier flowtypes error observed in #542 that was addressed in #583.
MacOs, node v14.17.3

context
intent: path to 'object-curly-spacing':true involves the fewest rules and additional deps.
The project is a create-react-app one about a year old.

steps

1. remove eslint deps and configs from package.json.
2. remove .eslintrc
3. npm i xo -D
4. npm init xo
5. npm i -D eslint-config-xo-react
6. run xo as follows

without prettier (desired)

npx xo --space --no-semicolon --plugin=react --prettier=false "src/App.js"
# many of these:
  ✖    1:16   There should be no space after {.                                                                      object-curly-spacing
  ✖  191:16   Unexpected usage of singlequote.                                                                       jsx-quotes

the lines that fail:

   1: 16    import React, { useState, useEffect } from 'react'
191:16     <Navbar id='navbar' expand='lg' sticky='top'>

with prettier

I don't really want prettier, but it seemed the likely way to get object-curly-spacing turned on.

npx xo --space --no-semicolon --plugin=react --prettier=true "src/App.js"

Error: Cannot read config file:

~/myproject/node_modules/eslint-config-prettier/flowtype.js
Error: "prettier/flowtype" has been merged into "prettier" in eslint-config-prettier 8.0.0. See: https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21
Referenced from: BaseConfig
    at Object.<anonymous> (node_modules/eslint-config-prettier/flowtype.js:1:7)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at module.exports (node_modules/import-fresh/index.js:32:59)
    at loadJSConfigFile (node_modules/@eslint/eslintrc/lib/config-array-factory.js:225:16)
    at loadConfigFile (node_modules/@eslint/eslintrc/lib/config-array-factory.js:309:20)
    at ConfigArrayFactory._loadConfigData (node_modules/@eslint/eslintrc/lib/config-array-factory.js:609:42)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] xo: `npx xo --space --no-semicolon --plugin=react --prettier=true -- "src/App.js"`
npm ERR! Exit status 1

xo-config.cjs

module.exports = {
	env: {
		browser: true,
		es2021: true,
	},
	extends: [
		'eslint:recommended',
		'plugin:react/recommended',
		'plugin:@typescript-eslint/recommended',
		'prettier',
	],
	parser: '@typescript-eslint/parser',
	parserOptions: {
		ecmaFeatures: {
			jsx: true,
		},
		ecmaVersion: 12,
		sourceType: 'module',
	},
	plugins: ['react', '@typescript-eslint'],
	rules: {
		space: true,
		semicolon: false,
		'object-curly-spacing': ['error', 'always'],
		quotes: ['warn', 'single'],
		indentation: [2, {
			baseIndentLevel: 1,
		}],
		indent: ['warn', 2],
		semi: ['error', 'never'],
		'linebreak-style': ['error', 'unix'],
	},
}

prettierrc.json

{
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "bracketSpacing": true, 
  "singleQuote": true,
  "semi": false
}

[mp0wr]

later tried to do without prettier.
xo seemed to ignore xo.config.cjs except to highlight and reformat the config file itself.

I experimented with putting the configuration in package.json

does xojs support @babel/eslint-parser, the renamed mono-repo version of babel-eslint-parser?

// provide some config in params
+          "xo": "npx xo --space --no-semicolon --plugin=react --prettier=false",

// updated parser
+     "@babel/eslint-parser": "^7.15.0",

+    "eslint-config-standard": "^16.0.3",
+    "eslint-config-standard-jsx": "^10.0.0",
+    "eslint-config-xo-react": "^0.25.0",
+    "eslint-plugin-import": "^2.24.1",
+    "eslint-plugin-react": "^7.24.0",

// xo config
  "xo": {
    "envs": [
      "browser",
      "es2021"
    ],
    "parser": "@babel/eslint-parser",
    "parserOptions": {
      "ecmaFeatures": {
        "jsx": true
      },
      "requireConfigFile": false,
      "babelOptions": {
        "plugins": [
          "@babel/plugin-proposal-class-properties"
        ],
        "presets": [
          "@babel/preset-react"
        ]
      }
    },
    "extends": [
      "react-app",
      "plugin:react/recommended",
      "plugin:import/typescript",
      "standard",
      "standard-jsx",
      "xo-react"
    ],
// It was difficult to determine which settings are expressed in which format.
// 1. field: value, like space: 2 or esnext: true (an xo shortcut?)
// 2. in rules: { object with documented, portable eslint syntax }
// 3. in overrides: {} (why this construct? 
// if there is a precedence order for configs, all are "overrides"; the structure doesn't need to vary.
// maybe it's to make one config source, and overcome the unordered nature of attributes?
    "esnext": true,
    "eslint-env": "es6",
    "semicolon": false,
    "space": 2,
    "object-curly-spacing": true,
    "rules": {
      "react/jsx-tag-spacing": [
        "error",
        {
          "closingSlash": "never",
          "beforeSelfClosing": "always",
          "afterOpening": "never",
          "beforeClosing": "never"
        }
      ]
    },
    "quotes": [
      "error",
      "single"
    ],
    "jsx-quotes": [
      "error",
      "prefer-single"
    ],
    "react/jsx-tag-spacing": [
      "error",
      {
        "closingSlash": "never",
        "beforeSelfClosing": "always",
        "afterOpening": "never",
        "beforeClosing": "never"
      }
    ],
    "import/extensions": [
      ".cjs",
      ".js",
      ".jsx"
    ],
    "node/file-extension-in-import": [
      ".js",
      ".jsx"
    ],
    "import/no-useless-path-segments": 0,
    "unicorn/import-index": 0,
    "indentation": [
      2,
      {
        "baseIndentLevel": 1
      }
    ],

//  this config was intended to allow different case for filenames.
// the experiment is generated by create-react-app. Classes and Components have TitleCase.
// scripts and configs are a mix of camelCase and kebab-case.

   "unicorn/filename-case": [
      "error",
      {
        "cases": {
          "camelCase": true,
          "pascalCase": true,
          "kebabCase": true
        }
      }
    ]
  }

the filename-case rule had no effect (maybe it needed to be nested elsewhere?)

 ✖    1:1    Filename is not in kebab case. Rename it to app.js.                                                                                                                                                                                  unicorn/filename-case

  ✖    9:28   Missing file extension "js" for "./libs/contextLib"                                                                                                                                                                                  import/extensions
  ✖    9:28   require file extension .js.                                                                                                                                                                                                          node/file-extension-in-import
  ✖   10:25   Missing file extension "js" for "./libs/errorLib"                                                                                                                                                                                    import/extensions

[mp0wr]

this file re-tab-indents and adds comma-dangle itself on-save. then it reports its transgressions. :)

the rules are nested correctly now, in package.json

  "xo": {
    "envs": [
      "browser",
      "es2021"
    ],
    "parser": "@babel/eslint-parser",
    "parserOptions": {
      "ecmaFeatures": {
        "jsx": true
      },
      "requireConfigFile": false,
      "babelOptions": {
        "plugins": [
          "@babel/plugin-proposal-class-properties"
        ],
        "presets": [
          "@babel/preset-react"
        ]
      }
    },
    "extends": [
      "react-app",
      "plugin:react/recommended",
      "plugin:import/typescript",
      "standard",
      "standard-jsx",
      "xo-react"
    ],
    "esnext": true,
    "eslint-env": "es6",
    "semicolon": false,
    "space": 2,
    "object-curly-spacing": true,
    "rules": {
      "import/extensions": [
        2,
        "never",
        {
          "css": "always",
          "scss": "always",
          "sass": "always"
        }
      ],
      "quotes": [
        "error",
        "single"
      ],
      "jsx-quotes": [
        "error",
        "prefer-single"
      ],
      "react/jsx-tag-spacing": [
        "error",
        {
          "closingSlash": "never",
          "beforeSelfClosing": "always",
          "afterOpening": "never",
          "beforeClosing": "never"
        }
      ],
      "node/file-extension-in-import": [0,
        ".js",
        ".jsx"
      ],
      "import/no-useless-path-segments": 0,
      "unicorn/import-index": 0,
      "indent": ["error", 2],
      "unicorn/filename-case": [
        "error",
        {
          "cases": {
            "camelCase": true,
            "pascalCase": true,
            "kebabCase": true
          }
        }
      ]
    }
  }

[devinrhode2]

v0.45.0 was just released, I think this issue is probably fixed there

[fregante]

It's not clear how flowtype ends up in your configuration. From a quick look, your config has a lot of extra options that don't apply to XO. I would suggest:

• using prettier: true instead of specifying "prettier" in any other way in your config
• rebuilding your config from scratch, until you find what's wrong with it