Let’s create a template for an Angular component, similar to the default a-component. If you already have a suitable code fragment, you can convert it into a live template right in the editor. The following example shows how you can modify a predefined template that encloses a selected code fragment in a tag so the selection turns into a paragraph.

You can also duplicate an existing template by clicking the Duplicate toolbar icon, modify it as needed, and save it with a different name.

In Preferences / Settings | Editor | Live Templates, select the group where you want to add your template, click +, and select Live Template.Īlternatively, you can create a new group and add your templates there: click +, select Template Group, and create a new group. What if a template you need is not on the predefined list? You can create your own. For example, when you expand a fori template into an iteration loop stub. With ⇥ / Tab you can also jump between the variables within an expanded template. Have you forgotten what the abbreviation is? Press ⌘J / Ctrl+J, and WebStorm will show you all the templates that are applicable in the current context. To insert the template, just type its abbreviation and press ⇥ / Tab. To see the list of predefined templates, go to Preferences / Settings | Editor | Live Templates.įor each template, WebStorm provides an abbreviation. In this example, the variable for the selector name is a dashed-case version of the class name, according to the Angular Style Guide. Here’s how you can create a new React stateless component from an rsc predefined template.Ī template can have multiple variables and they can depend on each other. WebStorm comes with a number of ready-to-use live templates for JavaScript, TypeScript, style sheets, and other supported languages and frameworks, including Vue, Angular, and React. This can be any code fragment that you find yourself using often – it could be something little and simple, for instance, a line of code like a method definition, or something big and complex like a skeleton for a whole file.įrom this blog post, you’ll learn how to use predefined live templates as well as how to create new ones and share them with your team. Note: This post was updated in February 2021.Ĭode snippets, or live templates as they are called in WebStorm, can help you save and reuse code.

Download intellij idea vue js plugin