PyCharm Edu 2018.2 Help

Emmet Support

PyCharm Edu integrates with Emmet and Emmet version 1.1 so you can use Emmet without leaving the IDE and edit HTML, CSS, or JSX code faster. To expand a template into a markup, just type its abbreviation and press the expansion key or shortcut. For example, in an HTML file, type table>tr*3>td*2 and then press Tab to get a stub of a 3x2 table:

<table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>

PyCharm Edu supports such features as new syntax for writing RGBA colors, implied, default, and boolean attributes, the Update Tag action and more.

Enabling and configuring Emmet

With PyCharm Edu, you can use native Emmet templates plus more than 200 additional HTML, CSS, and XSL live templates that are listed under the Zen CSS, Zen HTML, and Zen XSL nodes on the Editor | Live Templates page of PyCharm Edu settings (Ctrl+Alt+S).

To enable and configure native Emmet in PyCharm Edu

  1. Press Ctrl+Alt+S to open the Settings/Preferences dialog and then go to Editor | Emmet.
  2. Choose the key to expand Emmet abbreviations with, by default Tab is selected.
  3. To have PyCharm Edu show a pop-up window with a preview of the entered abbreviation before actually expanding it, select the Enable abbreviation preview checkbox.
  4. Specify how Emmet in PyCharm Edu will treat URL addresses by selecting or clearing the Enable automatic URL recognition while wrapping text with <a> tag checkbox.
    • If this checkbox is cleared and you attempt to wrap an URL address with the <a> tag, PyCharm Edu simply encloses the URL address in <a href=""></a> and positions the cursor inside the double quotes in the href attribute. For example, wrapping http://www.jetbrains.com will result in <a href="|">http://www.jetbrains.com</a>:
      emmet recognize url off
    • If this checkbox is selected and you attempt to wrap an URL address with the <a> tag, PyCharm Edu inserts the URL address inside the double quotes as the value of the href attribute and encloses the URL in <a href="<wrapped URL>"></a>. For example, wrapping http://www.jetbrains.com will result in <a href="http://www.jetbrains.com">http://www.jetbrains.com</a>. Moreover, PyCharm Edu highlights the wrapped URL green as a recognized URL:
      emmet recognize url

PyCharm Edu lets you use and customize Emmet live templates, or you can add your custom templates. Suppose you have a template entry with the following template text:

<entry type="$TYPES$">$END$ <entry>
To generate a list of entries, you just need to type “entry-list<entry[number=$]*5″ and press Tab. By default, the number attribute will be generated before type. To customize the position where it is generated, you need to add the ATTRS variable to your template, for example:
<entry type="$TYPES$" $ATTRS$>$END$ <entry>
The ATTRS variable must have an empty string as the default value and should be skipped.

To use live templates with Emmet

  1. Press Ctrl+Alt+S to open the Settings/Preferences dialog and then go to Editor | Live Templates.
  2. Under the Zen CSS, Zen HTML, and Zen XSL node, select the checkboxes next to the templates you want to use.
  3. When you select a template in the list, the focus moves to the Template Text area where the fields show the settings of the selected template.
  4. In the Template Text field, add the required text and variables to the template body.
  5. Click the Edit Variables button. In the Edit Template Variables dialog that opens, specify the default variable values in the Default value field and select the Skip if defined checkbox where necessary.

Configuring the abbreviation expansion key

By default, Emmet native abbreviations and additional live templates are expanded by pressing Tab. For additional live templates, PyCharm Edu lets you re-define the default expansion key. Note, that this custom setting does not override the default setting for native Emmet support; you will just get the ability to expand the template using either of these keys.

To configure the expansion key for native Emmet abbreviations

  1. Press Ctrl+Alt+S to open the Settings/Preferences dialog and then go to Editor | Emmet.
  2. From the Expand abbreviation with list, choose the new expansion key instead of the default Tab.

To configure expansion keys for Emmet live templates

  1. Press Ctrl+Alt+S to open the Settings/Preferences dialog and then go to Editor | Live Templates.
  2. Expand one of the Zen Coding template groups, for example, Zen HTML, Zen CSS, or Zen XSL, and select the desired template. The focus moves to the Template Text area.
  3. From the Expand with list, choose the key to expand the template with.

Surrounding a block of code with an Emmet template

  1. In the editor, select a block of code to surround and press Ctrl+Alt+J.
  2. In the Select Template pop-up menu, choose Emmet:
    select template
  3. Type the Emmet abbreviation to use and press Enter.

    Note the drop-down list to the right. Click the down arrow to view the history of recently applied Emmet live templates:

    emmet history
    Also mind the color indication. If you type a valid Emmet abbreviation, the background is green. However, when a non-existent abbreviation is entered, the background turns red:
    emmet abbreviation

Navigating between edit points

In HTML and XML, you can navigate between edit points, that is, between those points of code where Emmet templates are applicable.

  • To move the cursor to the previous edit point, choose Navigate | Previous Emmet Edit Point, or press Shift+Alt+Open Bracket.
  • To move the cursor to the next edit point, choose Navigate | Next Emmet Edit Point, or press Shift+Alt+Close Bracket.
Last modified: 9 August 2018