key-spacing + align: 'value' + jsx objects becomes ugly sometimes

[a-x-]

👀 Look at the repo with minimal reproducible example (dependencies, config, source): https://github.com/a-x-/eslint-align-check

---

environment

• ESLint Version: latest (5.13.0)
• Node Version: latest (11.9.0)
• npm Version: latest (6.8.0)

parser: Babel-ESLint

minimal configuration: (full config has no sense never : )

{
  "plugins": [
    "react",
  ],
  "rules": {
    "key-spacing": ["warn", {
      "multiLine": {"align": "value"},
    }],
    // some related a bit rules
    "object-curly-newline": ["warn", { "multiline": true, "minProperties": 5 }],
    "object-property-newline": ["warn", {"allowAllPropertiesOnSameLine": true }],
    "object-curly-spacing": ["warn", "always", {
      "arraysInObjects": false,
      "objectsInObjects": false,
    }],
    // ...
  },
}

source and command

source before eslint --fix ran

function Component () {
      return <div>
        <span style={{ display: 'inline-block', marginRight: '10px' }}>
          <Fa
            icon={ d.icon }
            style={{ marginRight: '4px', color: '#0C090A', opacity: '0.6', fontSize: '18px', verticalAlign: 'middle' }}
          />
          <span style={{ verticalAlign: 'bottom' }}>{ d.title }</span>
        </span>
        <span>
          <Fa
            icon="location-arrow"
            style={{ marginRight: '4px', color: '#0C090A', opacity: '0.6', fontSize: '18px', verticalAlign: 'middle' }}
          />
          <span style={{ verticalAlign: 'bottom' }}>{ this.state.info?.device.app_version }</span>
          <br />
          <span style={{ color: '#999999' }} title="Когда последний раз делал что-то в приложении">
            { this.state.info?.device.last_request_at }
          </span>
        </span>
      </div>;
}

eslint --fix file.jsx

Expected: don't re-align objects in jsx curlies.

PR? I'm not sure, maybe I can.

[aladdin-add]

thanks for the issue, I was able to repro it!

[eslint-deprecated]

Unfortunately, it looks like there wasn't enough interest from the team
or community to implement this change. While we wish we'd be able to
accommodate everyone's requests, we do need to prioritize. We've found
that accepted issues failing to be implemented after 90 days tend to
never be implemented, and as such, we close those issues.
This doesn't mean the idea isn't interesting or useful, just that it's
not something the team can commit to.

Thanks for contributing to ESLint and we appreciate your understanding.

[aladdin-add]

reopen as it is happening in latest eslint and default parser: I've created a mini demo

[yeonjuan]

@aladdin-add
For fixing this issue,
I thought that the multiple properties on a single line should be treated as a single line. And fix it. (#12472) . Am I missing something?

({
   a: 1, b: 3, c:4, // single line.
});

[kaicataldo]

We decided to revert the PR that closed this due to a regression. @yeonjuan We would love to work with you on finding an alternate solution, if you'd like still to work on this!

[yeonjuan]

@kaicataldo
I still want to work on this :).
This is an alternative solution what I thought.

const obj = {
    key1: "value1", key2: "value2",  // (1)
}

The line (1) should be checked by a multiline option(multiLine.beforeColon, multiLine.afterColon) because the obj should be considered as a multi-line object.

But the multiLine.align is for vertical aligning. So what about just ignoring a multiLine.alignoption in this case(multiple props on the same line)?

[kaicataldo]

The configuration options for this rule are really confusing 😬

I think your proposal makes sense and we should ignore aligning a line when it contains multiple properties.

So these would be correct:

/*eslint "key-spacing": [2, {
    "singleLine": {
        "beforeColon": false,
        "afterColon": true
    },
    "multiLine": {
        "beforeColon": true,
        "afterColon": true,
        "align": "colon"
    }
}]*/
var obj = { one: 1, "two": 2, three: 3 };
var obj2 = {
    "two" : 2,
    three : 3
};
var obj2 = {
    one : 1, "two" : 2, three : 3 
};

Also curious what other team members think.