Allowing inline decorators for multi-line expressions?

[David Taylor]

In Discourse, we have a handful of property decorators like this:

// decorator-position ❌
class Blah {
  @tracked somePropertyName =
    this.some.long.property.which.extend.beyond.printWidth;
}

Prettier breaks this onto two lines, and keeps the @tracked somePropertyName 'inline', which is great. We'd like to keep this formatting.

Unfortunately the decorator-position eslint rule fails. It wants to move the decorator onto a line by itself, leaving us with this:

// decorator-position ✅
class Blah {
  @tracked
  somePropertyName =
    this.some.long.property.which.extend.beyond.printWidth;
}

A similar problem can be demonstrated with ternary expressions:

// decorator-position ❌
class Blah {
  @tracked somePropertyName = this.someBoolean
    ? "resultIfTrue"
    : "thisIsTheValueIfFalse";
}

// decorator-position ✅
class Blah {
  @tracked
  somePropertyName = this.someBoolean
    ? "resultIfTrue"
    : "thisIsTheValueIfFalse";
}

Interestingly, multi-line function invocations seem to be accepted by the rule:

// decorator-position ✅
class Blah {
  @tracked somePropertyName = this.someFunction(
    "argumentValueOne",
    "argumentValueTwo"
  );
}

---

Would it be possible to have the decorator-position rule accept the two ❌ cases described above?

[NullVoxPopuli]

Yeah, i think it's doable! Thanks for the code snippets!

Also, can you provide your prettier settings? Thanks!

[David Taylor]

Prettier config is here - we use the default lineWidth of 80.

Our eslint config has decorator-position configured with a matching lineWidth of 80