Skip to content

Features

Jump to bottom
Lorenzo Pichilli edited this page Jan 2, 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 ctrl+alt+s:

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.

Flow Goto Definition

If you want know where is the definition of a certain function, class, etc. just go with the cursor on it and use the menu option Flow Goto Definition in Context Menu. You could find it 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:

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 --eval or --print flag for node.js. Select the rows that you want to evaluate and then:

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

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: ctrl+alt+w.

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 selected 2 regions, see example)
  • while statement
  • do while statement
  • for statement
  • try catch statement
  • try catch finally statement

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 ]

Split string lines to variable

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 Sort array ASC you will see:

var str = ""
str += 'This is'
str += 'a string with'
str += 'multiple lines'

Description in progress..

Clone this wiki locally