WebStorm 2018.1 Help

Creating and Editing Template Variables

After a template is expanded, its variables are presented in the editor as input fields. The values of these fields can be either filled in by the user or calculated by WebStorm.

To have it done automatically, for each variable you need to specify the following:

  • Expression to be calculated in association with the variable.
  • Default value to be entered in the input field if the calculation fails.

The order in which WebStorm will process input fields after the template expansion, is determined by the order of variables in the list.

Configuring variables used in a template

To configure variables used in a template

  1. Open the template settings, and in the Template Text area click the Edit Variables button.

    The Edit Template Variables dialog box opens, where you can define how the variables will be processed when the template is used.

  2. In the Name text box, specify the variable name to be used in the template body.
  3. In the Expression drop-down list, specify the expression to be calculated by WebStorm when the template is expanded. Do one of the following:
    • Type a string constant in double quotes.
    • Type a predefined function with possible arguments or select one from the drop-down list.

      An argument of a function can be either a line constant or another predefined function. See the list of predefined functions below on this page.

  4. To enable WebStorm to proceed with the next input field, if an input field associated with the current variable is already defined, select the Skip if defined checkbox.
  5. To arrange variables in the order you want WebStorm to switch between associated input fields, use the Move Up and Move Down buttons.

Predefined functions to use in live template variables

blockCommentEnd Returns the characters that indicate the end of a block comment in the the current language context.
blockCommentStart Returns the characters that indicate the start of a block comment in the the current language context.
camelCase(String)Converts a string into cameCase. For example, camelCase(my-text-file), camelCase(my text file), and camelCase(my_text_file) all return myTextFile.
capitalizeAndUnderscore(sCamelCaseName)Capitalizes all the letters of a CamelCase name passed as parameter, and inserts an underscore between the parts. For example, capitalizeAndUnderscore(FooBar) returns FOO_BAR.
capitalize(String)Capitalizes the first letter of the parameter.
classNameComplete()This expression substitutes for the class name completion at the variable position.
clipboard()Returns the contents of the system clipboard.
commentEnd Returns the characters that indicate the end of a comment in the current language context. The return value is empty if line comments are defined in the current language.
commentStart Returns the characters that indicate the start of a comment in the current language context. If line comments are defined in the current language, their start indicator is preferable.
complete() Invokes code completion at the position of the variable.
completeSmart() Invokes smart type completion at the position of the variable.
date(sDate) Shows the current system in the specified format.

By default, the current date is returned in the default system format. However, if you specify date format in double quotes, the date will be presented in this format:

decapitalize(sName)Replaces the first letter of a name parameter with the corresponding lowercase letter.
enum(sCompletionString1,sCompletionString2,...)Shows a list of comma-separated strings suggested for completion at the template invocation.
escapeString(sEscapeString)Escapes a string.
expectedType()Returns the expected type of the expression into which the current template expands. Makes sense if the template expands in the right part of an assignment, after return, etc.
fileName()Returns the name of a file with its extension.
fileNameWithoutExtension()Returns the name of a file without its.
firstWord(sFirstWord)Returns the first word of a string.
groovyScript("groovy code")Returns Groovy script with the specified code.
You can use groovyScript macro with multiple arguments. The first argument is a script text that is executed or a path to the file that contains a script. The next arguments are bound to _1, _2, _3, ..._n variables that are available inside your script.
Also, _editor variable is available inside the script. This variable is bound to the current editor.
JsArrayVariable Returns the name of the current JavaScript array.
jsClassName()Returns the name of the current JavaScript class.
jsComponentTypeOf() Returns the type of the current JavaScript component.
jsMethodName()Returns the name of the current JavaScript method.
jsQualifiedClassName Returns the complete name of the current JavaScript class.
jsSuggestIndexName Returns a suggested name for an index.
jsSuggestVariableName Returns the suggested name for a variable.
lineCommentStart Returns the characters that indicate the start of a line comment in the current language context.
lineNumber()Returns the current line number.
lowercaseAndDash(String) Converts a capitalized camelCase string into lower case and inserts n-dashes as separators. For example, lowercaseAndDash(MyExampleName) returns my-example-name.
snakeCase(String) Converts a string into snake_case, for example, snakeCase(fooBar) returns foo_bar.
spaceSeparated(String) Converts a CamelCase string into lower case and inserts spaces as separators. For example, spaceSeparated(fooBar) returns foo bar.
substringBefore(String,Delimiter) Removes the extension after the specified delimiter and returns only the file name. This is helpful for test file names, for example, substringBefore($FileName$,".") will return component-test in component-test.js.
time(sSystemTime)Returns the current system time.
underscoresToCamelCase(sCamelCaseText)Replaces underscores with CamelHump letters. For example, underscoresToCamelCase(foo_bar) returns underscoresToCamelCase(fooBar).
underscoresToSpaces(sParameterWithSpaces)Replaces underscores with spaces.
user()Returns the name of the current user.
Last modified: 7 February 2018

See Also