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.

Pycharm webstorm