You could find refactor commands on the Main Menu underTools > JavaScript Refactor, on the Context Menu and also on the Side Bar Menu. The last one will have only a subset of them.

Refactor Commands are:

• Convert to arrow function
• Export:
  • Function
  • Class
  • Variable
• Safe Copy
• Safe Move
• Safe Delete
• Extract:
  • Variable
  • Field (current method, field declaration, class constructor)
  • Parameter
  • Method (global scope, current scope, class method)

Some of these features, such asSafe Move, will work only on JavaScript projects (seeCreating a JavaScript Project page).

[Context Menu, Main Menu]

Converts a function expression to an arrow function. Put your cursor inside a function expression and then execute the command.

From:

setInterval(function(){},1000)

To:

setInterval(()=>{},1000)

[Context Menu, Main Menu] [Preview Available]

Exports a function, class or variable to another file and then import it in the current one.

Put your cursor inside a function expression and then execute the command. You will see a new view opening to the right (seeWindowView feature) where you could type in the destination path of the new file and also see the preview.

If you choose an existing path, then you will be asked for a confirm to append the exported function to the chosen file. Instead, if you choose a new path, then the exported function will be thedefault export.

Change destination path:

Click on thePREVIEW button to see the preview:

You could also use theFolder Explorer feature to navigate through your folders:

Click on theEXPORT button and you will get this final result:

Put your cursor inside a class and then execute the command. You will see a new view opening to the right (seeWindowView feature) where you could type in the destination path of the new file and also see the preview.

If you choose an existing path, then you will be asked for a confirm to append the exported class to the chosen file. Instead, if you choose a new path, then the exported class will be thedefault export.

SeeExport Function for screenshots.

Put your cursor over a variable and then execute the command. You will see a new view opening to the right (seeWindowView feature) where you could type in the destination path of the new file and also see the preview.

If you choose an existing path, then you will be asked for a confirm to append the exported variable to the chosen file.

SeeExport Function for screenshots.

[Context Menu, Main Menu, Side Bar Menu] [Preview Available]

It will copy the current opened JavaScript file in a new file respecting the dependencies imported into it. If the new destination file is an existing file, then you will be asked to confirm the overwrite.

NOTE: If you want this command checks all the imported/exported JavaScript dependencies and not just those with@flow, you need to addall=true into the.flowconfig[options]. Seehere.

Change destination path or use theFolder Explorer feature to navigate through your folders:

Click on thePREVIEW button to see the preview:

Click on theCOPY button and you will get this final result:

[Context Menu, Main Menu, Side Bar Menu] [Preview Available]

It will move the current opened JavaScript file in a new file respecting the dependencies imported into it and it will also update the path on theimport statement of the files that uses it such as a dependency. If the new destination file is an existing file, then you will be asked to confirm the overwrite.

NOTE: If you want this command checks all the imported/exported JavaScript dependencies and not just those with@flow, you need to addall=true into the.flowconfig[options]. Seehere.

SeeSafe Copy for screenshots.

[Context Menu, Main Menu, Side Bar Menu] [Preview Available]

It will delete the current opened JavaScript file. Clicking on thePREVIEW button, you could see a list of files that uses it such as a dependency (import). Before deleting the file, you will be asked to confirm it.

NOTE: If you want this command checks all the imported/exported JavaScript dependencies and not just those with@flow, you need to addall=true into the.flowconfig[options]. Seehere.

SeeSafe Copy for screenshots.

[Context Menu, Main Menu]

Creates new function/variable/etc. with original selection as the body. For Variable, Field and Parameter, the selection NEED to be anExpression Statement, otherwise it won't work.

Creates new variable with original selection on the assignment.

You will asked also to choose amonglet,const andvar. Moving the selection of this items will update the current view automatically.

After that, you could change quickly the name of this new variable because of automatic selections:

Creates new field with original selection on the assignment.

You will see a new view opening to the right (seeWindowView feature) where you could type in the field name and also in which scope it need to be added:

In this case I'm choosing theClass constructor option:

After that, you will see something like this:

Adds new parameter with original selection on the current function.

After that, you could change quickly the name of this new parameter because of automatic selections:

Adds new function to global/current scope or adds a new class method to the current class with original selection as the body.

You will see a new view opening to the right (seeWindowView feature) where you could type in the function name, parameters and also in which scope it need to be added:

In this example I'm choosing theGlobal scope:

And you will get this:

In this other example I'm choosing theCurrent scope:

And you will get this:

In this other example I'm choosing theClass method:

And you will get this: