quick fix for function only contains one jsx element and have not the return statement

[Kingwl]

Search Terms

quickfix, jsx, function

Suggestion

quick fix for function only contains one jsx element and have not the return statement

Use Cases

the pattern of a function with block body that only have one jsx element without return statement
that seems a error
could we provide a quickfix for that?

Examples

items.map(x => {
  <div>123</div>
})

to

items.map(x => (
  <div>123</div>
))

Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript / JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. new expression-level syntax)

[DanielRosenwasser]

Great idea. It doesn't even have to be limited to JSX. I'm not sure how we'd plumb the logic through, but there are two fixes I'd have in mind:

1. For any block body containing a single ExpressionStatement whose expression's type matches the expected type, suggest the following:

• Add a return statement.
• Remove block body braces.
• Replace braces with parentheses.

2. For any block body containing only a labeled ExpressionStatement, check to see if the expected type contains a property with the same name as the label, and if so, suggest

• Wrap this block with parentheses.

[Kingwl]

should that a quickfix? maybe refactor is more suitable

[DanielRosenwasser]

Well, I guess your example is a refactoring since there's no error (you just end up producing a void[].

The cases I have in mind should have an associated error.

[Kingwl]

sometime we cannot infer the return type(no context, no type annotation)
will we ignore those case?

[Kingwl]

need some help:
how could i know type are related in quick fix without isTypeRelatedTo😢

[DanielRosenwasser]

Thanks @Kingwl!