Refactor your Javascript like a Pro with js2-refactor

Share

In this article i will show you how to use the js2-refactor tool in Spacemacs which is a community
built version of Emacs using Space key as the leader key.

 

1 Refactor your Javascript like a Pro with js2-refactor

js2-refactor is a JavaScript refactoring library for emacs. This is a collection of small refactoring functions to further the idea of a JavaScript IDE in Emacs that started with js2-mode.

In this article i will show you how to use the js2-refactor tool in Spacemacs which is a community built version of Emacs using Space key as the leader key.

To know more about Spacemacs click here

1.1 Installation – Emacs

I highly recommend installing js2-refactor through elpa.

It’s available on melpa:

Then add this to your emacs settings:

1.2 Installation – Spacemacs

For Spacemacs users, you need to add javascript layer.

To use this configuration layer, add it to your ~/.spacemacs. You will need to add javascript to the existing dotspacemacs-configuration-layers list in this file.

For more information on this, visit the Spacemacs Javascript layer configuration page.

1.3 Usage

Once you installed and configured your js2-refactor in to Spacemacs, open any Javascript source file and start refactoring.

1.4 Refactorings

1.4.1 js2r-expand-array

Expand bracketed array list at point.

Key-Binding: SPC-m-r-e-a

Before:

After:

1.4.2 js2r-expand-object

Expand bracketed object list at point.

Key-Binding: SPC-m-r-e-o

Before:

After:

1.4.3 js2r-expand-function

Expand function body at point.

Key-Binding: SPC-m-r-e-u

Before:

After:

1.4.4 js2r-extract-function

Turn the fragment into a function whose name explains the purpose of the function.

Key-Binding: SPC-m-r-e-f

Before:

After:

1.4.5 js2r-extract-method

You have a code fragment that can be grouped together. Turn the fragment into a method whose name explains the purpose of the method.

Before:

After:

1.4.6 js2r-extract-var

You have a complicated expression.

Put the result of the expression, or parts of the expression, in a temporary variable with a name that explains the purpose.

Inspiration: Extract Variable

Key-Binding: SPC-m-r-e-v

Before:

After:

1.4.7 js2r-contract-array

Contract bracketed array list at point.

Key-Binding: SPC-m-r-c-a

Before:

After:

1.4.8 js2r-contract-object

Contract bracketed object list at point.

Key-Binding: SPC-m-r-c-o

Before:

After:

1.4.9 js2r-contract-function

Contract function body at point.

Key-Binding: SPC-m-r-c-u

Before:

After:

1.4.10 js2r-kill

Kills to the end of the line, but does not cross semantic boundaries.

Key-Binding: SPC-m-k

Before:

After:

1.4.11 js2r-ternary-to-if

Converts ternary operator to if-statement.

Key-Binding: SPC-m-r-3-i

Before:

After:

1.4.12 js2r-forward-barf

Moves the last child out of current function, if-statement, for-loop or while-loop.

Key-Binding: SPC-m-r-b-a

Before:

After:

1.4.13 js-doc-insert-file-doc

Inserts documentation header information for the file.

Will be very useful for writing source code documentation very quickly and effectively.

Key-Binding: SPC-m-r-d-b

1.4.14 js-doc-insert-function-doc

Inserts documentation block for a function automatically deducing parameter info and return info.

Key-Binding: SPC-m-r-d-f

To use this properly, you have to select or mark a whole function body and use the above command.

1.4.15 js-doc-insert-tag

Inserts a documentation tag from a list of available tags. You can choose by looking up and select.

Key-Binding: SPC-m-r-d-t

I inserted the author tag using the above command in the below example.

1.4.16 js-doc-describe-tag

Gives you detailed information and usage about a particular documentation tag.

Key-Binding: SPC-m-r-d-h

1.4.17 js2r-split-string

Splits a string

Key-Binding: SPC-m-r-s-s

Before:

After:

1.4.18 js2r-var-to-this

Changes local var a to be this.a instead.

Key-Binding: SPC-m-r-v-t

Before:

After:

1.4.19 js2r-toggle-function-expression-and-declaration

Toggle between function name() {} and var name = function ();

Key-Binding: SPC-m-r-t-f

Before:

After:

1.4.20 js2r-log-this

Adds a console.log() statement for what is at point (or region). With a prefix argument, use JSON pretty-printing.

Key-Binding: SPC-m-r-l-t

Before:

After:

1.4.21 js2r-split-var-declaration

Splits a var with multiple vars declared, into several var statements.

Key-Binding: SPC-m-r-s-v

Before:

After:

1.4.22 js2r-add-to-globals-annotation

Creates a *global * annotation if it is missing, and adds the var at point to it.

Key-Binding: SPC-m-r-a-g

Before:

After:

1.4.23 js2r-wrap-in-for-loop

Wraps a simple For-loop around the selected or marked block at point to it.

Key-Binding: SPC-m-r-w-l

Before:

After:

1.4.24 js2r-forward-slurp

Moves the next statement into current function, if-statement, for-loop or while-loop.

Key-Binding: SPC-m-r-s-l

Before:

After:

1.4.25 js2r-arguments-to-object

Replaces arguments to a function call with an object literal of named arguments.

Key-Binding: SPC-m-r-a-o

Before:

After: