picostitch
crafting (and) JavaScript

WebStorm Live Templates Rock (Again)

WebStorm has this awesome feature they call Live Templates where you can configure a text in a certain filetype to autocomplete to something, even dynamic. See how I built the auto-completion for dateC which becomes dateCreated: 2020-05-02 15:27 CET, which is current date of course, in my custom format.

dateC + TAB
becomes
dateCreated: 2020-05-02 15:27 CET

See Live Template in Action
See Live Template in Action

I got tired of writing the metadata, I am using here in my tidbits (see the source) over and over again, metadata such as the current dateCreated, as seen before.

How to create this Live Template?

If you want to create the live template above do the following.

  1. Shift + Cmd + A (for "Find Action")

  2. Type "Live Template"

  3. Select the one with "Preferences" behind it

    Find Action screen in WebStorm
    Find Action screen in WebStorm
  4. Create a new Live Template, Cmd + N, choose "Live Template"

  5. Fill it in as in the image

    The editor for the live template
    The editor for the live template
  6. Make sure to set "Applicable ..." below the fields. Since I am using it in markdown files, which has no own section I chose "Other", see image

    Edit live template type
    Edit live template type
  7. Note the $NOW$. This is a variable which does NOT exist yet, so let's create it to return the dateCreated in the format you have seen above (2020-05-02 15:27 CET).

  8. Click "Edit variables" on the right.

  9. Reading a little bit in the JetBrains docs I found out very quickly that I need to set the value of the variable NOW to concat(date("Y-MM-dd HH:mm"), " CET").

    Edit live template variable
    Edit live template variable
  10. If you tick "Skip if defined" the value will just auto complete and the Live Template is done (otherwise the inserted value of NOW would be selected for editing, which we don't need here)

  11. Save and apply ... just close all the dialogs :)

  12. Voila, now when I type dateC + TAB in my markdown file I get the date. dateCreated: 2020-05-02 15:54 CET