Code Refactoring
You could find refactor commands on the Main Menu under Tools > 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:
Some of these features, such as Safe Move, will work only on JavaScript projects (see Creating 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 (see WindowView 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 the default export.
Change destination path:
Click on the PREVIEW button to see the preview:
You could also use the Folder Explorer feature to navigate through your folders:
Click on the EXPORT 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 (see WindowView 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 the default export.
See Export Function for screenshots.
Put your cursor over a variable and then execute the command. You will see a new view opening to the right (see WindowView 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.
See Export 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 add all=true into the .flowconfig [options]. See here.
Change destination path or use the Folder Explorer feature to navigate through your folders:
Click on the PREVIEW button to see the preview:
Click on the COPY 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 the import 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 add all=true into the .flowconfig [options]. See here.
See Safe Copy for screenshots.
[Context Menu, Main Menu, Side Bar Menu] [Preview Available]
It will delete the current opened JavaScript file. Clicking on the PREVIEW 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 add all=true into the .flowconfig [options]. See here.
See Safe 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 an Expression Statement, otherwise it won't work.
Creates new variable with original selection on the assignment.
You will asked also to choose among let, const and var. 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 (see WindowView 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 the Class 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 (see WindowView 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 the Global scope:
And you will get this:
In this other example I'm choosing the Current scope:
And you will get this:
In this other example I'm choosing the Class method:
And you will get this: