JS Toolbox

Compatible with: IntelliJ IDEA PhpStorm WebStorm PyCharm RubyMine AppCode CLion Gogland DataGrip Rider MPS Android Studio
31.01.2016
95 575
JS Toolbox

An Intellij / Webstorm plugin that provides several tools for javascript development.

Here is a list of available actions:

  • Go to test [Alt T], [Ctrl Command T] on Mac
  • Go to view [Alt V], [Ctrl Command V] on Mac
  • Go to constructor [Alt G], [Ctrl Command G] on a mac
  • Join multi-line strings and variable declarations [Ctrl SHIFT Alt J], [Ctrl Command J] on Mac
  • Open current file in browser [Ctrl SHIFT Alt G], [SHIFT Option Command G] on Mac
  • Add a semi-color at the end of the line [Ctrl SHIFT ;], [Command SHIFT ;] on Mac
  • Sort the selection using a user-defined splitter [SHIFT alt 1], [Command SHIFT 1] on Mac
  • Generate a method for the current javascript class
  • Override a method from the parent javascript class

See all the JS Toolbox actions from two locations:

  • From Tools > JS Toolbox
  • From the editor, right click > JS Toolbox
Go to test [Alt T], [Ctrl Command T] on Mac

Jump between a javascript file and its unit test. You can configure the file name patterns under:

Settings > JS Toolbox

And set values for Unit test suffix and File suffix

If you need multiple patterns use comma. For example:

Unit test suffix: "Spec.js,-spec.js"
File suffix: "-controller.js,.js"

With this configuration the action will take you from:

"my-component.js" or "my-component-controller.js"

to

"my-componentSpec.js" or "my-component-spec.js"

Go to view [Alt V], [Ctrl Command V] on Mac

Jump between a javascript file and its associated view. You can configure the file name patterns under:

Settings > JS Toolbox

And set values for View suffix and File suffix

If you need multiple patterns use comma. For example:

File suffix: "-controller.js,.js"
View suffix: "-view.html,.html"

With this configuration the action will take you from:

"my-component.js" or "my-component-controller.js"

to

"my-component.html" or "my-component-view.html"

Toggle camel and dash case

Select some text and then choose the "Toggle camel and dash case" action

one-two-three

Will turn into

oneTwoThree
oneTwoThree

Will turn into

one-two-three
Go to constructor [Alt G], [Ctrl Command G] on a mac

Jump to the constructor of the current javascript file.

Join multi-line strings and variable declarations [Ctrl SHIFT Alt J], [Ctrl Command J] on Mac

Join strings and variable declarations

Turn a multi-line string into a single string. Press Ctrl SHIFT Alt J on any of the string lines or select a block of text and join.

    var s = 'one ' +
        'two ' +
        'three';
    

Into a single string:

    var s = 'one two three';
    

Join multiple vars into a single var:

    var foo = 1;
    var bar = 2;
    

Into a single var declaration:

    var foo = 1,
        bar = 2;
    
Open current file in browser [Ctrl SHIFT Alt G], [SHIFT Option Command G] on Mac

Open the current file in the browser. Configure the URL that you want to use when opening the browser under Settings > JS Toolbox.

Generate a method for the current javascript class (Under generate menu)

Add a new method to the current javascript class.

You need to use the @constructor annotation to mark the constructor of the class.

Override a method from the parent javascript class (Under generate menu)

Override a parent method in the current javascript class.

You need to annotate the classes with the @constructor and @extends annotations, otherwise the plugin cannot find the class hierarchy.

Sort the selection using a user-defined splitter [Ctrl SHIFT 1], [Command SHIFT 1] on Mac

For example, select a bunch of arguments, choose sort, and enter a text (eg. ,) to split and sort the result.

Download plugin

Recent change notes

  • 1.9 - Implement toggle camel and dash case
  • 1.8 - Add actions for camel case and dash case
  • 1.7 - Improve the sort implementation. Add a new dialog
  • 1.6 - Improve the go view/test. Add line number in open in browser
  • 1.5 - Accept constructors starting with var. Change shortcuts for sort.
  • 1.4 - Add sort shortcut
  • 1.3 - Add shortcut to add a semicolon at the end of the current line.
  • 1.2.1 - Fix bug finding the parents in override javascript method
  • 1.2 - Add support for constructors with the following syntax: function MyConstructor() {}
  • 1.1 - Fix override method bug
  • 1.0 - Initial version