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

👀 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.

[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.

[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)?