Flip order of error message for wrong name

[zth]

This flips the order of the error message parts for the "wrong name" error message. This is to make things clearer. Instead of starting with the definition of the thing we're looking for, we start with what's wrong, and then print the definition.

This makes things clearer in general, but it especially improves the situation for React components with a large amount of props, or with props with types that are verbose.

React component before:

This record expression is expected to have type
    Component.props<
  string,
  string,
  string,
  string,
  string,
  string,
  string,
  string,
  string,
>
  The field nonExistant does not belong to type Component.props

After:

The field nonExistant does not belong to type Component.props
  
  This record expression is expected to have type
    Component.props<
  string,
  string,
  string,
  string,
  string,
  string,
  string,
  string,
  string,
>

The biggest improvement is seen in the editor, where the relevant information is now visible without needing to scroll in the hover or problems tab:

[DZakh]

How about wrapping the field name with quotes? I think it'll make the error message more readable. Now the field name blends in with the rest of the text. Here's the example from TS:

[tsnobip]

I'm a bit more doubtful about this one, the order is indeed more logical this way, but having the important piece of information last in the terminal is also nice.

[zth]

I'm a bit more doubtful about this one, the order is indeed more logical this way, but having the important piece of information last in the terminal is also nice.

Yeah, it's a good point, and a trade off. I've optimized for the editor experience here, where what's on top matters:

[zth]

How about wrapping the field name with quotes? I think it'll make the error message more readable. Now the field name blends in with the rest of the text. Here's the example from TS:

Definitively possible to do. Although they are colored in the terminal, but I don't believe they're colored in the editor.

[tsnobip]

Yeah, it's a good point, and a trade off. I've optimized for the editor experience here, where what's on top matters:

It indeeds looks much better in the IDE

[cristianoc]

If there's enough consensus, go for it.

[JasoonS]

I typically read the error block from top to bottom in my terminal, so I approve of this change 👍

[zth]

Waiting for more people to weigh in on what they think about this before deciding whether to go with it.

[DZakh]

I like that The field nonExistant does not belong to type Component.props and This record expression is expected to have type became close to each other.