My setup:

• VSCode
• eslint with arrow-body-style set to always
• VSCode eslint extension configured to automatically fix errors

The problem that I'm trying to solve is that it's fiddly to switch between block and expression style arrow functions. Here's a parison:

// block style
const myBlockStyleArrowFn = () => {
  return {};
}

// expression style
const myExpressionStyleArrowFn = () => ({});

I really like the shorthand expression style in many cases but when it es time to extend one of these functions it's always a case of manually adding the necessary braces etc..

Even worse, if I'm just experimenting with the change then I find that VSCode will helpfully convert my block style arrow function back into an expression style (I find myself inserting redundant console.log() statements just to prevent this from happening).

What I'd really love is an extension that lets me switch between the two forms with a shortcut (perhaps there is one that I haven't been able to find, or I should write one!). And this is my question:

What's the easiest way to convert between the two forms of JavaScript arrow functions in VSCode?

I know I could switch off the automatic fix feature but in 99% of cases it does a good job so I'd be losing a lot there.

Thanks as always for any help.

My setup:

• VSCode
• eslint with arrow-body-style set to always
• VSCode eslint extension configured to automatically fix errors

The problem that I'm trying to solve is that it's fiddly to switch between block and expression style arrow functions. Here's a parison:

// block style
const myBlockStyleArrowFn = () => {
  return {};
}

// expression style
const myExpressionStyleArrowFn = () => ({});

I really like the shorthand expression style in many cases but when it es time to extend one of these functions it's always a case of manually adding the necessary braces etc..

Even worse, if I'm just experimenting with the change then I find that VSCode will helpfully convert my block style arrow function back into an expression style (I find myself inserting redundant console.log() statements just to prevent this from happening).

What I'd really love is an extension that lets me switch between the two forms with a shortcut (perhaps there is one that I haven't been able to find, or I should write one!). And this is my question:

What's the easiest way to convert between the two forms of JavaScript arrow functions in VSCode?

I know I could switch off the automatic fix feature but in 99% of cases it does a good job so I'd be losing a lot there.

Thanks as always for any help.

• javascript
• visual-studio-code
• arrow-functions

Share Improve this question Follow asked Nov 15, 2019 at 18:21 jaypjayp 71577 silver badges2121 bronze badges 1

• Bump. I'm having the same issue, with IntelliJ, this was really easy to do. Did you find a solution? – peter Commented Jun 18, 2020 at 15:19

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 12

There is a built in refactoring for this action.

Put your cursor between the = and the >. A light bulb will appear.
Click the light bulb and select Add braces to arrow function.

Doing the same and selecting Remove braces from arrow function will go back the other way.

You just have to install VS Code JavaScript Booster extension and your coding productivity made easier, change regular functions to arrow functions and you can easily revert back and much more offered by the extension. Much on the extension here is the link https://marketplace.visualstudio./items?itemName=sburg.vscode-javascript-booster.