WebStorm 2018.2 Help

Generating Code

WebStorm provides multiple ways to generate common code constructs and recurring elements, which helps you increase productivity. These can be either predefined or custom templates, which are applied differently based on the context, various wrappers and automatic pairing of characters. Additionally, WebStorm provides code completion and Emmet support.

Creating code constructs using live templates

WebStorm provides a number of predefined live templates for many common code constructs. You can also define custom templates to cover use cases specific to your workflow.

You can create code constructs by inserting and expanding live templates as well as wrap fragments of code using surround templates.

To insert a live template

  1. Place the caret at the place where you want the template to expand.
  2. Type the template abbreviation and press the invocation key (Tab by default).

    Alternatively, to use code completion, press Ctrl+J or click Insert Live Template on the context menu and select the required template from the suggestion list. To view Quick Documentation for the selected suggestion, press Ctrl+Q.

  3. If the selected template requires user input, the first input field is marked with a red frame.Type your value in this frame and press Enter or Tab to complete input and pass to the next input field. After completing the last input field, the caret moves to the end of the construct, and the editor returns to the regular mode of operation.

To wrap a code fragment using a surround template

  1. In the editor, select the piece of code to wrap and press Ctrl+Alt+J or click Surround With Live Template... on the context menu or the selection.
  2. In the suggestion list, select the desired template.

To view the list of available live templates

  • In the Settings/Preferences dialog (Ctrl+Alt+S), click Live Templates under Editor. The Live Templates page that opens, shows all the configured live templates grouped by languages. Learn more from Creating Live Templates.

Unwrapping and removing statements

WebStorm lets you quickly unwrap or extract expressions from enclosing statements. This action is available for JavaScript if ...else, for, while, and do...while control structures as well as for XML and HTML tags.

  1. Place the caret on the expression you want to extract or unwrap.
  2. Choose Code | Unwrap/Remove on the main menu or press Ctrl+Shift+Delete. WebStorm shows a pop-up window with all the actions that are available in the current context. Statements to be extracted are displayed on the blue background, statements to be removed are displayed on the grey background.
    Unwrapping statements
  3. Click the desired action or select it using the up and down arrow keys and press Enter.

Completing paired characters

WebStorm can automatically add closing braces and other paired elements.

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), click General under Editor, and then click Smart Keys. The Smart Keys page opens.
  2. To add closing braces automatically on pressing Enter, select the Insert pair } check box in the Enter area.
  3. Configure automatic insertion of closing tags by selecting the relevant checkboxes in the XML/HTML area.

The indentation level is defined in the Code Style settings.

Generating constructors

WebStorm can generate a constructor that initializes specific fields using the values of the corresponding arguments.

class Person { private readonly name: string private readonly lastName: string }
class Person { private readonly name: string private readonly lastName: string constructor(name: string, lastName: string) { this.name = name; this.lastName = lastName; } }
  1. Click Generate on the context menu of a class or press Alt+Insert.
  2. In the Generate popup, click Constructor.
  3. If the class contains fields, select the fields to be initialized by the constructor and click OK.

Generating getters and setters

WebStorm can generate accessor and mutator methods (getters and setters) for the fields in your classes. WebStorm generates the names of getters and setters according to your code generation naming preferences, see JavaScript Code Style: Code Generation and TypeScript Code Style: Code Generation for details.

class Person { private name: string private lastName: string }
class Person { get name(): string { return this._name; } get lastName(): string { return this._lastName; } private _name: string private _lastName: string }
class Person { set name(value: string) { this._name = value; } set lastName(value: string) { this._lastName = value; } private _name: string private _lastName: string }
  1. Click Generate on the context menu of a class or press Alt+Insert.
  2. In the Generate popup, click one of the following:
    • Getter to generate accessor methods for getting the current values of class fields.
    • Setter to generate mutator methods for setting the values of class fields.
    • Getter and Setter to generate both accessor and mutator methods.
  3. In the dialog that opens, select the fields to generate getters or setters for and click OK.

Implementing methods of an interface or and abstract class

If a class is declared as implementing an interface or an abstract class, it has to implement the methods of the parent class or the base interface. WebStorm creates stubs for implemented methods.

  1. Click Generate on the context menu of a class (Alt+Insert) and select Implement members from the popup or just press Ctrl+I.
  2. In the dialog that opens, select the methods to implement and click OK.

Overriding methods of a superclass

You can override any method of a parent class by generating necessary code from a predefined template. WebStorm creates a stub that contains a call to the method of the superclass and you only have to provide some meaningful source code in the method's body.

  1. Click Generate on the context menu of a class (Alt+Insert) and select Override method from the popup or just press Ctrl+O.
  2. In the dialog that opens, select the methods to override. The list of methods does not include the methods that are already overridden, or cannot be accessed from the current subclass.
  3. Click OK and provide the source code for the method body. Use the gutterIconOverriding icon that marks the overriding method in the left gutter to view the name of the base class, and to open the overridden method declaration.
Last modified: 14 September 2018