Increase your productivity in WebStorm

Hi all! In this article, I would like to tell you how you can reduce the drudgery of writing code by using templates to create files.

To see all existing templates, we need to go to the IDE settings in the Editor/File and Code Templates section.

The first “+” creates a template, the second “+” creates a child template, “-” deletes the template

WebStorm templates (PhpStorm, PyCharm, etc.) use a template language Apache Velocity

What we will use when creating templates:

1. ${NAME} — file name when created

2. $componentName — declaration of a variable that will exist only inside the template

3. ${Component_Name} — a variable that will need to be specified when creating the template

4. #[[$END$]]# — the place where the cursor will be after creating the template

Let’s create a template like the image below:

In field Name you must specify the name of the template in the field Extension extension of the created file, in the field File name the name of the file to be created (we will leave it blank, because we want to specify it when creating the template).
Also don’t forget to check the box Enable Live Templates (underlined in purple) so that we have Apache Velocity code running.

import { FC } from 'react'

export type ${NAME}Props = {}

export const ${NAME}: FC<${NAME}Props> = ({}) => {
    return <>#[[$END$]]#</>
}

Now let’s test our template, as you can see, everywhere instead ${NAME} We have substituted the file name.

Let’s complicate our template a little, make it more flexible

Let’s add the ability to specify the name of the component and its props when creating a template, and if the name of the component or props is not specified, then we will create a default one using the file name, as in the previous template.

To do this, let’s edit our template:

#set($componentName = ${Component_Name})
#set($propsName = ${Props_Name})

#if(!$componentName)
  #set($componentName = ${NAME})
#end

#if(!$propsName)
  #set($propsName = "${NAME}Props")
#end

import { FC } from 'react'

export type $propsName = {}

export const $componentName: FC<$propsName> = ({}) => {
    return <>#[[$END$]]#</>
}

Let’s look at an example $componentNamewhat’s going on here:

1. #set($componentName = ${Component_Name}) – we declare a variable $componentNamewhich exists locally inside the template, and assign it a variable ${Component_Name}. With such a variable declaration ${Component_Name} The IDE will prompt us to fill it out when creating a template, as in the screenshot below.

   

2. In the code block below we check if we have some value in $componentNamei.e. when creating a template, we check whether we have filled out the field Component Name. If we have not filled in anything, then we assign it to a variable $componentName file name, i.e. ${NAME}

#if(!$componentName)
  #set($componentName = ${NAME})
#end

3. Instead of ${NAME} now we simply substitute a variable into the component name $componentName

A quick note: to use the string template, you must use double quotesfor example, like here: #set($propsName = "${NAME}Props")

Let’s test it and see what we get. To do this, we will create 2 files according to our template: let the first one be Input and let the name in it be the default; second – Selectin which we will set the props and component name ourselves.

How to create several files using one template at once

To create several files using a template at once, you need to add a Child Template. Select our main template and click on the second “+” in the top menu, as in the screenshot below

Let’s immediately indicate the extension of the file being created – in our case we need module.sass. We will also make sure that the file name is always equal to the file name of the main template – for this, in the field File name let’s write ${NAME}.

Now, when using our template, a file will be created next to it ${NAME}.module.sass.

Now let’s complicate the task

Let’s make sure that our template immediately creates a folder, and in it a tsx file and a module.sass file.

In order for us to tell the IDE that we need a folder, we need to change the names of the templates for tsx file and for module.sass on ${NAME}/${NAME}: the element after the last slash is a file, everything before is a folder.

The result when using the template will be like this:

Some more information

1. If you need some more complex template logic, refer to this page. Here you can find out other language constructions.

2. In addition to the name of the entity being created (we called it the file name ${NAME}), we can use other variables that the IDE provides us, for example, ${DATE}, ${USER}, ${PRODUCT_NAME}. You can view them at this page

3. The pre-filled values ​​that the IDE highlights after the file is created are declared as in the template below:

{
  "name": "#[[$name$]]#",
  "version": "#[[$version$]]#",
  "dependencies": {#[[$END$]]#
  }
}

Using this template, for example, the following package.json is created:

These variables can be navigated using Tab, and they will all be highlighted at once, so it will be easy and quick to change them. I don’t use them because it’s inconvenient for me, but know that they are there.

Thank you for your attention! I’m waiting for comments with your templates, I’m interested in what you write!