PhpStorm 2018.2 Help

JavaScript Postfix Templates

Postfix code completion lets you add template code around an expression you’ve just typed. A template expands when you type its abbreviation (postfix) after a dot and press the expansion key or when you select the abbreviation in the code completion popup. For example, the .if postfix applied to an expression wraps it with an if statement. PhpStorm is shipped with a set of predefined postfix templates and lets you define your own custom ones for JavaScript and TypeScript. Note that JavaScript templates work in TypeScript files as well.

Custom templates can be copied, updated, and removed. For predefined templates you can only change their postfixes, for example to replace a long key with a shorter one.

BeforeAfter
function m(arg) { arg.if }
function m(arg) { if (arg) { } }

Learn more from Postfix code completion.

To activate postfix completion

  1. Press Ctrl+Alt+S or choose File | Settings (for Windows and Linux) or PhpStorm | Preferences (for macOS) from the main menu, and then go to Editor | General | Postfix Completion.
  2. The Postfix Completion page opens showing a list of available postfixes with the corresponding templates next to them. When you select a postfix, the Description pane illustrates the corresponding transformation showing the code snippet before and after the template is expanded.
  3. Select the Enable postfix templates checkbox and the checkboxes next to the postfixes which you need to activate.

To apply a postfix template

  1. Type your expression followed by a dot.
  2. Type the postfix and press the expansion key (the default one is Tab) or select the postfix from the suggestion list. If necessary, choose an expression to be surrounded or replaced.

To create a custom template

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), click General under Editor, and then click Postfix Completion.
  2. On the Postfix Completion page that opens, click Add button, and choose the language where the template will work. You can choose JavaScript or TypeScript, JavaScript templates work in TypeScript files as well.
  3. In the Create new template dialog, that opens, type the template postfix, choose the language level, type the template code, and add $EXPR$ in the places where you need to insert the initial expression. Add $END$ where you want the cursor to be at the end.

You can also create a new template that slightly differs from an existing one, for example, in its language context or the final position of the cursor. PhpStorm lets you copy the original template and make the necessary changes in that copy.

To create a new custom template from an existing one

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), click General under Editor, and then click Postfix Completion.
  2. On the Postfix Completion page that opens, select the custom template from which you want to create a new one and click icons actions copy svg on the toolbar.
  3. In the Edit template dialog that opens, edit the template as necessary and type a new postfix.

To change the default expansion key

  • In the Settings/Preferences dialog (Ctrl+Alt+S), click General under Editor, and then click Postfix Completion. On the Postfix Completion page that opens, choose a new key from the Expand templates with list.

To disable postfix completion

  • To suppress expanding all the configured postfix templates, clear the Enable postfix templates checkbox.
  • To suppress expanding a specific template, clear the checkbox next to its postfix.
Last modified: 28 June 2018