Tuesday, 16 January, 2018 UTC
Summary
Code snippets, or Live Templates as they are called in WebStorm, can help you save and reuse code. This can be any code fragment that you find yourself using often – just a line of code like a method definition, or a skeleton for a whole file.
There are two ways to use a snippet: either type its designated abbreviation and hit Tab, or select it from the code completion suggestions.
What makes Live templates particularly useful is that you can customize them with variables. To move from one variable inside the template to the next one, press Enter or Tab.
Here’s an example. We’ve created and used a Live Template for a new React stateless component, in which a component name is a variable that we can specify when using the template. (We’ll talk about creating custom templates in a second.)
A template can have multiple variables and they can depend on each other. Here the variable for the selector name is a dashed-case version of the class name.
WebStorm has several collections of Live Templates that are available out of the box, including code snippets for development with Vue, Angular, and AngularJS. You can find then under Preferences | Editor | Live Templates.
By the way, Live Templates can be used not only in JavaScript or TypeScript, but in any language that WebStorm supports.
Creating a custom Live Template
Let’s now see how we can create our very own Live Template. For this example, we’ll create a template for an Angular component, similar to the default
a-component. This is a simple one!- Select the code you want to use in the template in the editor, press Cmd-Shift-A, and search for the action Save as Live Template…
- Enter the abbreviation that you’ll be using to invoke the template. We’ll go with
ngcomp. - Add a template description.
- Optionally, add variables to the code of the template.
Variable names should start and end with$. In our example, we need only one variable for the component name. Of course you can have multiple variables, as long as each one has a unique name. - Add
$END$to where the cursor should be at the end.
- Click the Change link below to select the parts of code the template will be available in. For our
ngcomp, we want it to be available in any part of a TypeScript file.
- Click OK to save the template. That’s it!
Let’s do one more, this time a little more complex.
We’ll have 2 variables: the name of the component class and the name of the component selector.
Logically we want to first specify the component name and only then the selector, even though the selector comes first in the code. To do this, we click Edit variables and using the arrow icons to adjust the order of variables.
Now, according to the Angular Style
Guide, selector names are usually a dashed-case version of the component name. This means we can just specify the class name in our template and get the selector name automatically through its transformation.
Guide, selector names are usually a dashed-case version of the component name. This means we can just specify the class name in our template and get the selector name automatically through its transformation.
To do this, we click the Expression field next to the
selector variable and select the function we need – lowercaseAndDash, and then add the variable name as parameter.Let’s see our new template in action:
We can also select “Skip if defined” next to our selector variable. In that case, after we’ve edited the component name and pressed Enter, the cursor will go to the end position and not to the selector.
With the many functions available in WebStorm, you can do any variable transformations you need to create really powerful Live Templates. Try them out and see if they save you some time coding!
WebStorm Team