New Refactoring: Add Braces to If Statement

[nicoespeon]

Is this request related to a problem? Please describe.

I do use one-liner If Statements to write guard clause.

function doSomething() {
  if (!isValid) return;

  // … rest of the code
}

But sometimes, the guard clause might evolve and do something else. In that scenario, I want to add braces.

function doSomething() {
  if (!isValid) {
    // … now I can add some logic here
    return;
  }

  // … rest of the code
}

Adding braces can be a bit painful because the editor will likely insert the closing one. So I usually have to:

• put the cursor at the right place
• insert the opening brace
• eventually delete the closing one
• put the cursor at the right place again
• insert the closing brace

Describe the solution you'd like

Some extensions might help me wrap selection into braces. I want almost the same thing, but something simpler and specific to If Statements: a quick fix that would trigger whenever the selection is inside the correct node.

Given:

function doSomething() {
  if (!isValid) return;

  console.log("Something");
}

When I trigger the refactoring on the If Statement node,

Then I want:

function doSomething() {
  if (!isValid) {
    return;
  }

  console.log("Something");
}

Additional context

It's a similar refactoring than Add Braces to Arrow Function.

You can use yarn new to help you bootstrap the refactoring.

I'm here to help.

Example on Webstorm: