AppCode News Tips & Tricks

Live Templates

Live templates are one of the most powerful coding assistance features in AppCode. You can create a template for any code chunk and quickly add it to your code whenever you need it. In this blog post, we will show you how to use predefined live templates, and also how to create new ones and share them with your team members.

Predefined live templates

AppCode provides sets of live templates for Swift, Objective-C, and other supported languages out of the box. Go to Preferences | Editor | Live Templates to see the lists of predefined templates. For example, this is what we have for Swift:

The list of live templates

Expand live templates

Each template has an abbreviation. Type this abbreviation and press to insert the template:

Expand live templates

The good thing is that you don’t have to remember all these abbreviations to use the templates. Simply press ⌘J to see all the templates available in the current context and select the one you want to use:

Expand live templates with Cmd+J

Pressing also allows you to jump between the placeholders within a template.

Create live templates

If you find yourself needing more templates than the list has to offer, you can easily create your own. Use one of these three ways:

  • In Preferences | Editor | Live Template, click + in the top right-hand corner and select Live Template. Your template will be created in the currently selected group:

    Add a new live template

    Alternatively, you can create a new group and add your templates there: click +, select Template Group, and create a new group.

  • In the editor, select the code chunk you want to add to a live template and then select Tools | Save as Live Template.
  • Duplicate an existing template by clicking The duplicate button, modify it as needed, and save it with a different name.

Live templates come in three varieties: simple, parametrized, and surround. Let’s see how we can create each type of template.

All of our templates will be applicable for the SwiftUI framework, so we will save them in a separate group called SwiftUI (click + and select Template Group to create it):

Custom template group

Create a simple template

Simple templates contain fixed plain text. When you expand a simple template, the text is automatically inserted into your source code, replacing the abbreviation.

Let’s create a template that will add boilerplate for the SwiftUI body element.

In Preferences | Editor | Live Templates, select the SwiftUI group that we have created, click +, and choose Live Template. Enter the template abbreviation and description in the corresponding fields, and then type the code block that you want this template to expand:

Add a simple live template

$END$ is a predefined variable that you can use to mark where the caret will appear when you expand the template.

Specify the context for the new template: click the Define link below and select Swift:

Define the template context

In the Options section, you can change the key that expands the template (by default, it is ). You can also check the Reformat according to style option if you want the current formatting settings to be applied to the added code block. When you’re done, click OK to save the new template.

Now you can use the new template in the editor by typing its abbreviation (body) and pressing . Alternatively, you can use it by pressing ⌘J and selecting the template from the list:

Expand a simple live template

Create a parameterized template

Parameterized templates contain variables that enable user input. When you expand a parameterized template, these variables are displayed either as placeholders for user input or are filled in automatically by means of special functions.

We will create a parameterized live template for the preview classes.

If you already have this code in the editor, simply select it and choose Tools | Save As Live Template from the main menu:

Save a code chunk as a live template

In the dialog that opens, we can modify this template before saving it:

The Save as Live Template dialog

First, let’s add the template abbreviation and description, for example, prev and The preview class.

Next, replace the code that can be changed with variables. In our case, all usages of ConferenceList can be replaced with $CLASS$.

As soon as we add a variable to the template text, the Edit variables button becomes available:

Live template with custom variables

Click this button to go to the variable settings.

For each variable, you can specify a predefined function to calculate its value. For the $CLASS$ variable we can choose the fileNameWithoutExtension() function, which returns the name of the current file with no extension:

Add a function

You can find the descriptions of all the available functions in our help.

Finally, let’s move our new template from the default user group to SwiftUI using drag and drop, and then remove the user group:

Move a live template

It’s time to see the new template in action. In the editor, type prev and press :

Expand the parameterized template

The template variables are replaced with the name of the current file.

Surround templates

Surround templates allow you to wrap a block of code with any text you want. You can create a surround template by adding the predefined $SELECTION$ variable in your template text. This variable denotes the code to be wrapped.

Take a look at the following example:

Select a code chunk for a live template

Here we have the ForEach loop that you may want to reuse as a surround live template. Choose Tools | Save as Live Template from the main menu to create a live template out of the selected code block.

As usual, you’ll need to type an abbreviation and description in the corresponding fields. After that, replace Text(conference.name) with $SELECTION$:

The surround template settings

Replace conferences and conference with the $COLLECTION$ and $ITEM$ variables, respectively:

Custom variables

For the $COLLECTION$ variable we can use the collectSequences() function. This function returns the name of the collection declared before the place where the template is expanded. Click Edit variables and select collectSequences() in the Expression field of the $COLLECTION$ variable. Also, add a default value for both variables:

Variables settings

Finally, set the template context. Click the Change link below and check all the options under Swift to make sure the template is available everywhere:

Define context

To expand the surround template, select the code you want to wrap, press ⌥⌘T (Code | Surround With), and choose your template from the list or just start typing the template abbreviation.

Expand a surround template

Share your live templates

Once you’ve created some custom templates, you may want to share them with your teammates. To do this, select File | Manage IDE Settings | Export Settings from the main menu. In the dialog that opens, uncheck everything (Select None), select Live templates, and specify the folder where you want to save settings.zip:

Export settings

To import the templates, go to File | Manage IDE Settings | Import Settings and select the saved settings.zip file. Then restart the IDE to apply the imported settings.

Alternatively, you can use the IDE Settings Sync plugin or the settings repository to share the IDE settings, including live templates. Learn more in the Share IDE settings help article.

Summary

You can significantly upgrade the IDE by adding new templates or modifying existing ones for any of the languages or frameworks you are working with. Add the code chucks you frequently use to live templates, adjust them using various predefined functions, and share them with your team. This will certainly reduce the time you spend on typing and allow you to focus on more important things.

Happy development!

Your AppCode team