Write Code with Emmet Abbreviations and Filters

Filter by IDE
Select the Progress AppBuilder client you are currently using for development.

IDE

With Emmet enabled in the code editor, you can increase your coding productivity. You can quickly expand simple abbreviations into complex, user-defined code snippets.

You can apply Emmet filters to abbreviations before expanding. With Emmet filters, you can quickly escape characters, insert comments or expand your abbreviation in a single line.

Procedure

In-Browser

  1. Log in the Telerik Platform and open the code for your app.
  2. Verify that Emmet is enabled.
  3. In the Project Navigator, double-click the file that you want to edit.
  4. Type an Emmet abbreviation or a combination of abbreviations and press Tab or Ctrl+E to expand it.
    Make sure that you are using the Emmet abbreviation syntax. For more information about the abbreviation syntax in Emmet, see Abbreviations Syntax.
    You can apply Emmet filters to the abbreviations. For more information about filters in Emmet, see Filters.
  5. Fill in any edit points.
  6. Save your changes.
  7. (Optional) Repeat Steps 3-5.

Example: Sample abbreviation syntax

  • Source abbreviation without filters:

    #page>div.logo+ul#navigation>li*5>a{Item $}
    
  • Expanded abbreviation without filters:

    <div id="page">
        <div class="logo"></div>
        <ul id="navigation">
         <li><a href="">Item 1</a></li>
         <li><a href="">Item 2</a></li>
         <li><a href="">Item 3</a></li>
         <li><a href="">Item 4</a></li>
         <li><a href="">Item 5</a></li>
        </ul>
    </div>
    
  • Source abbreviation with filter for escaping characters:

    #page>div.logo+ul#navigation>li*5>a{Item $}|e
    
  • Expanded abbreviation with filter for escaping characters:

    &lt;div id="page"&gt;
    &lt;div class="logo"&gt;&lt;/div&gt;
    &lt;ul id="navigation"&gt;
        &lt;li>&lt;a href=""&gt;Item 1&lt;/a&gt;&lt;/li&gt;
        &lt;li>&lt;a href=""&gt;Item 2&lt;/a&gt;&lt;/li&gt;
        &lt;li>&lt;a href=""&gt;Item 3&lt;/a&gt;&lt;/li&gt;
        &lt;li>&lt;a href=""&gt;Item 4&lt;/a&gt;&lt;/li&gt;
        &lt;li>&lt;a href=""&gt;Item 5&lt;/a&gt;&lt;/li&gt;
    &lt;/ul>
    

Universal

  1. Run the universal desktop client, log in the Telerik Platform and open the code for your app.
  2. Verify that Emmet is enabled.
  3. In the Project Navigator, double-click the file that you want to edit.
  4. Type an Emmet abbreviation or a combination of abbreviations and press Tab or Ctrl+E to expand it.
    Make sure that you are using the Emmet abbreviation syntax. For more information about the abbreviation syntax in Emmet, see Abbreviations Syntax.
    You can apply Emmet filters to the abbreviations. For more information about filters in Emmet, see Filters.
  5. Fill in any edit points.
  6. Save your changes.
  7. (Optional) Repeat Steps 3-5.

Example: Sample abbreviation syntax

  • Source abbreviation without filters:

    #page>div.logo+ul#navigation>li*5>a{Item $}
    
  • Expanded abbreviation without filters:

    <div id="page">
          <div class="logo"></div>
        <ul id="navigation">
           <li><a href="">Item 1</a></li>
           <li><a href="">Item 2</a></li>
           <li><a href="">Item 3</a></li>
           <li><a href="">Item 4</a></li>
           <li><a href="">Item 5</a></li>
        </ul>
    </div>
    
  • Source abbreviation with filter for escaping characters:

    #page>div.logo+ul#navigation>li*5>a{Item $}|e
    
  • Expanded abbreviation with filter for escaping characters:

    &lt;div id="page"&gt;
    &lt;div class="logo"&gt;&lt;/div&gt;
    &lt;ul id="navigation"&gt;
        &lt;li>&lt;a href=""&gt;Item 1&lt;/a&gt;&lt;/li&gt;
        &lt;li>&lt;a href=""&gt;Item 2&lt;/a&gt;&lt;/li&gt;
        &lt;li>&lt;a href=""&gt;Item 3&lt;/a&gt;&lt;/li&gt;
        &lt;li>&lt;a href=""&gt;Item 4&lt;/a&gt;&lt;/li&gt;
        &lt;li>&lt;a href=""&gt;Item 5&lt;/a&gt;&lt;/li&gt;
    &lt;/ul>
    

Windows

  1. Run the classic Windows desktop client, log in the Telerik Platform and open the code for your app.
  2. In the Project Navigator, double-click the file that you want to edit.
  3. Type an Emmet abbreviation or a combination of abbreviations and press Tab or Ctrl+E to expand it.
    Make sure that you are using the Emmet abbreviation syntax. For more information about the abbreviation syntax in Emmet, see Abbreviations Syntax.
    You can apply Emmet filters to the abbreviations. For more information about filters in Emmet, see Filters.
  4. Fill in any edit points.
  5. Press Ctrl+S to save your changes.
  6. (Optional) Repeat Steps 3-5.

Example: Sample abbreviation syntax

  • Source abbreviation without filters:

    #page>div.logo+ul#navigation>li*5>a{Item $}
    
  • Expanded abbreviation without filters:

    <div id="page">
          <div class="logo"></div>
        <ul id="navigation">
           <li><a href="">Item 1</a></li>
           <li><a href="">Item 2</a></li>
           <li><a href="">Item 3</a></li>
           <li><a href="">Item 4</a></li>
           <li><a href="">Item 5</a></li>
        </ul>
    </div>
    
  • Source abbreviation with filter for escaping characters:

    #page>div.logo+ul#navigation>li*5>a{Item $}|e
    
  • Expanded abbreviation with filter for escaping characters:

    &lt;div id="page"&gt;
    &lt;div class="logo"&gt;&lt;/div&gt;
    &lt;ul id="navigation"&gt;
        &lt;li>&lt;a href=""&gt;Item 1&lt;/a&gt;&lt;/li&gt;
        &lt;li>&lt;a href=""&gt;Item 2&lt;/a&gt;&lt;/li&gt;
        &lt;li>&lt;a href=""&gt;Item 3&lt;/a&gt;&lt;/li&gt;
        &lt;li>&lt;a href=""&gt;Item 4&lt;/a&gt;&lt;/li&gt;
        &lt;li>&lt;a href=""&gt;Item 5&lt;/a&gt;&lt;/li&gt;
    &lt;/ul>
    

Visual Studio

To use Emmet abbreviations, actions and filters in this version of the extension for Visual Studio, you can install an Emmet-enabled extension from the Microsoft Visual Studio Gallery.

CLI

To use Emmet abbreviations, actions and filters, apply the approach or tool available for your current IDE.

Next Steps

Continue development.

See Also

Start a free trial Request a demo
Contact us: +1-888-365-2779
sales@telerik.com
Copyright © 2016-2017, Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.