Skip to content

Features

Jump to bottom
Lorenzo Pichilli edited this page May 30, 2018 · 28 revisions

Feature list:

On Hover Description

Just put the cursor over a name of a function, property, etc. and you will see appear a little popup with all the information about it and, also, a link the the definition of it:

Show Hint Parameters

If you want know the parameters of a function, just use the default key binding super + alt + h:

You could also use the Context Menu and click on Show Hint Parameters or you could find it under Tools > JavaScript Enhancements > Show Hint Parameters.

Unused Variables

With this feature you could see your unused variables/functions/classes inside your file. They will be highlighted with a yellow underline and a dot in the gutter:

You can navigate unused variables/functions/classes opening the Sublime Text Command Palette and typing Unused Variable::

Flow Goto Definition

If you want to go where the definition of a certain function, class, etc. is, just go with the cursor on it and use the Context menu option Flow Goto Definition or use the popup of On Hover Description feature and click on Go to defintion. You could find it also under Tools > JavaScript Enhancements > Flow Goto Definition.

Bookmarks Project

They differs from normal bookmark of Sublime Text. In fact you could set and save your bookmarks per project, in order also to search a bookmark in the whole project or only in the current view:

Using Command Palette:

Sort import

With this feature you could sort alphabetically all of your import inside a file:

Expand Abbreviation

This feature is similar (but much simpler) to the Emmet plugin - "Expand Abbreviation" feature. If you want repeat n-times a line of code, select the code with something like *5 (repeat 5 times) at the end of the selection and then you will have this:

Evaluate JavaScript

With this feature, you could evaluate your javascript code inline using --print flag of node.js command. After the code execution, you will see the result and the Execution Time. Select the rows that you want to evaluate and then:

You could use also this feature directly on the current line with the corresponding menu option.

Note: undefined at the end is coming from node --print, so don't worry about that!

Can I use?

This feature uses "can i use" json data from caniuse repo, that contains raw data from the caniuse.com support tables.

You can use this feature in HTML, CSS and JavaScript context!

Just put the cursor on the word you want to check, then open the Context Menu and click on "Can I use?" option. It will appear an input panel with all items that have a name matching with the word:

You could use also the default key binding: super + alt + j`.

After selecting an item from the list, it will appear a popup with all information about it:

Furthermore you could find the complete list under Tools > JavaScript Enhancements > Search on "Can I use" list:

JSDoc

This feature uses https://github.com/jsdoc3/jsdoc to generate API documentation. You could find it under Tools > JavaScript Enhancements > JSDoc. There are 2 options:

  • Generate Documentation: uses the jsdoc command line to generate documentation.
  • Add a jsdoc configuration file: it will add a conf.json file with default values to the current project folder.

This feature could be used only inside a project.

To define the path of your custom configuration file, you could do it in the project_settings.json (inside the .je-project-settings folder) and then change the value for:

  "jsdoc": {
    "conf_file": ""
  }

The path could be absolute or relative to the path project (without considering the .je-project-settings folder!!!).

How to use JSDoc: usejsdoc.org

Surround With

This is a feature that you could find in the Context Menu. To enable this option, you must select the text you want surround. You can surround code with:

  • if statement
  • if else statement (this works only if you select 2 regions)
  • while statement
  • do while statement
  • for statement
  • try catch statement
  • try finally statement
  • try catch finally statement
  • function
  • anonymous function
  • arrow function
  • async function
  • iife function
  • generator function
  • block {}

These options work also on multiple selections at once.

Delete Surrounded

This is a feature that you could find in the Context Menu. Options are:

  • Strip quoted string

These options work also on multiple selections at once.

Create Class from object literal

This is a feature that you could find in the Context Menu. This option create a JavaScript Class from an object literal (Constructor with all setter and getter for each field). You could set default values or use the string "required" to say that a field hasn't a default value.

To work properly, you must declare a variable and assign an object literal to it, like this example:

var Person = {
  name: "required",
  surname: "required",
  email: "",
  age: 18
}

Then put the cursor inside the object literal and then open the Context Menu. Clicking on Create Class from object literal it will produce:

class Person {

  constructor (surname, email="", age=18, name) {
    this.surname = surname;
    this.email = email;
    this.age = age;
    this.name = name;
  }

  get surname() {
    return this.surname;
  }

  set surname(surname) {
    this.surname = surname;
  }

  get email() {
    return this.email;
  }

  set email(email) {
    this.email = email;
  }

  get age() {
    return this.age;
  }

  set age(age) {
    this.age = age;
  }

  get name() {
    return this.name;
  }

  set name(name) {
    this.name = name;
  }

}

Sort array

This is a feature that you could find in the Context Menu. Just put the cursor between brackets and it will appear a menu with these options:

  • Sort array ASC ( compare function: function(x,y){return x-y;} )
  • Sort array DESC ( compare function: function(x,y){return y-x;} )
  • Sort array alphabetically ASC
  • Sort array alphabetically DESC

These options work also on multiple selections at once. Example:

let foo = [1,50,3,76,9,0]

After clicking on Sort array ASC you will see:

let foo = [ 0, 1, 3, 9, 50, 76 ]

String lines to concat

This is a feature that you could find in the Context Menu. Just put the cursor between a string with multiple lines and this option will appear in the context menu. It will split the string and, for each line, it will be concatenated to a variable named str.

This option works also on multiple selections at once. Example:

`This is
a string with
multiple lines
`

After clicking on String lines to concat you will see:

let str = ""
str += 'This is'
str += 'a string with'
str += 'multiple lines'
Clone this wiki locally