IDEA Polishing Journey - Live Templates

IDEA’s success is undeniable - by 2018, its market share had grown to over 50%. What makes it so good? From a developer’s perspective, it’s incredibly thoughtful. Many designs and small features genuinely solve pain points and improve efficiency. Recently, I spent some time researching and polishing one of these features - Live Templates. Here’s a brief summary and sharing of my experience.

What are Live Templates

By using live templates, you can insert frequently-used constructions into your code. For example, loops, conditions, various declarations, or print statements.

In simple terms, live templates allow you to quickly insert commonly used code blocks.

Demo Time

The GIF shows a component class that I frequently need in my current frontend project, which connects to Redux and intl. Writing this manually each time felt like a waste of time. So, I turned it into a template.

How to do it? Keep reading.

Adding Live Templates

Open Settings → Live Templates

Open Settings with shortcut: Command + Shift + A

Add Live Templates

Field Explanations

• abbreviation: The shorthand text that triggers the template when typed
• description: The description shown by the IDE to help understand the template’s purpose
• template: The actual code block we want to insert, including specified variables

Scope Configuration

This determines in which environments the IDE will suggest this template when typing the abbreviation. For example, here I only want it in TypeScript, so I select only TS.

Adding Variables

The reason it’s called “live template” is because of variables. Here I only control the component name.

Predefined Variables

Currently there are two: $END$ and $SELECTION$. $END$ controls the cursor position, while $SELECTION$ represents the selected code block.

Official documentation - click here

Expressions

Note that expressions can be nested. For example, here I want the component name to be the filename without extension, with the first letter capitalized.

Skip if defined

Let me explain what this means. Literally, it means “skip if defined”. If we check this, the cursor will skip this position and move to the next one; otherwise, it will stop here for editing mode.

If I don’t select this here, even if we have $END$ in the defaults, when generating the template, the cursor will default to the $ComponentName$ position.

Variable Default Values

As the name suggests, these are the default values when we haven’t defined them. But there’s a trick here - we can define a default value as another variable value.

The image shows what I set when creating a console template. The benefit of this is that we can have linked requirements.

For example, when we edit one variable value, another one will change accordingly. Here’s the effect:

After setting up the variables, the template is complete. Click OK, and it’s ready to use.

Live Template Installation

Besides creating your own, you can install templates created by others. Currently, I’ve found that JAR method doesn’t work, but XML works.

1. If the file format is XML, download it directly

2. Find the live template directory. For example, my local path is ~/Library/Application Support/JetBrains/WebStorm2021.2/jba_config/templates. Note that the path may vary depending on the IDE version. Copy the downloaded XML file into this directory

3. Restart the IDE, and the installation is complete

Final Thoughts

A simple LiveTemplate is now complete. When coding, LiveTemplates can significantly improve our productivity. I believe we should focus on two things:

1. Familiarize yourself with the default LiveTemplates in your IDE. These are gems summarized from practical experience by predecessors, excellent in both flexibility and naming. For example, sout and psvm in Java, or importdefault and importitems in JavaScript.
2. Based on your project situation and coding habits, extract your commonly used patterns into templates to fill the gaps in defaults. For example, I’ve extracted frontend UT cases, console.log statements, arrow functions, etc.

Any repetitive work becomes manual labor, and we need to identify these manual tasks, abstract them, and formalize them. Live templates are an excellent solution that saves us time. So, give it a try!