Главная » Техника

Emmet phpstorm как настроить

Содержание
  1. Emmet
  2. Emmet.HTML
  3. Emmet.CSS
  4. Ускоряем верстку сайта с emmet
  5. Установка emmet для редактора Sublime text
  6. Первый способ
  7. Второй способ
  8. Установка emmet для редактора PhpStorm
  9. Основные сокращения emmet
  10. Сокращения для html:
  11. Правила emmet
  12. Сокращения для css:
  13. Emmet
  14. Enable and configure Emmet
  15. Use live templates with Emmet
  16. Configure the abbreviation expansion key
  17. Configure the expansion key for native Emmet abbreviations
  18. Configure expansion keys for Emmet live templates
  19. Surround a block of code with an Emmet template
  20. Navigate between edit points
  21. Emmet
  22. Enable and configure Emmet
  23. Use live templates with Emmet
  24. Configure the abbreviation expansion key
  25. Configure the expansion key for native Emmet abbreviations
  26. Configure expansion keys for Emmet live templates
  27. Surround a block of code with an Emmet template
  28. Navigate between edit points

Emmet

On this page, configure Emmet preferences for HTML, XML, JavaScript (JSX Harmony) files and Style Sheets.

PhpStorm expands abbreviations only if their output does not exceed 15 KB.

Item Description
Expand abbreviation with From this list, select the default key to expand Emmet selectors with. This key will also by default expand Emmet live templates.

Emmet.HTML

Select this checkbox to have PhpStorm show a popup with a preview of the entered abbreviation before actually expanding it.

If this checkbox is selected, an editing position adds to the end of an HTML template ($END$);

if this checkbox is not selected, then the new edit point is not added.

Compare the following:

In this area, specify the BEM separators for the class names, modifiers and short elements. Refer to the Emmet documentation for details.

In this area, specify which Emmet filters you want to be applied to an expanded abbreviation before it is shown in the editor. Learn more about filters at http://docs.emmet.io/filters/. To have a filter always applied by default, select the checkbox next to it. The available options are:

Emmet.CSS

Item Description
Enable XML/HTML Emmet Select this checkbox to enable Emmet support for XML and HTML. If this checkbox is not selected, complicated abbreviations, such as div.class>ul#list>.item$) and similar, will not work in the editor.
Enable abbreviation preview
Enable automatic URL recognition while wrapping text with tag
  • If this checkbox is cleared and you attempt to wrap an URL address with the tag, PhpStorm encloses the URL address in and positions the cursor inside the double quotes in the href attribute. For example, wrapping http://www.jetbrains.com will result in | «>http://www.jetbrains.com :
  • If this checkbox is selected and you attempt to wrap an URL address with the tag, PhpStorm inserts the URL address inside the double quotes as the value of the href attribute and encloses the URL in «> . For example, wrapping http://www.jetbrains.com will result in http://www.jetbrains.com . Moreover, PhpStorm highlights the wrapped URL green as a recognized URL:
Add edit point at the end of template
BEM
Item Description
Enable CSS Emmet Select this checkbox to enable Emmet support for Style Sheets. If this checkbox is not selected, the complicated abbreviations, like bdci:n expanding into border-corner-image: none; , will not work in the editor.
Enable fuzzy search among CSS abbreviations When this checkbox is selected, every unknown abbreviation will be scored against available template names. The match with the best score will be used to resolve the template. For example, with this option enabled, the following abbreviations can be equal to:
Enable expansion of unknown properties (‘unknown’ to ‘unknown:;’)

    When this checkbox is selected, any entered word will be expanded into the same word followed with a colon and a semicolon;

    When this checkbox is cleared, only known properties (for example, color ) will be expanded this way color:;
Auto insert CSS vendor prefixes If this checkbox is selected, the CSS properties listed in the table below are expanded into constructs that contain pre-pending vendor prefixes. Learn more at Vendor prefixes.

If this checkbox is cleared, the entire table of properties is disabled.

Properties and vendor prefixes The table contains a list of CSS properties and vendor prefixes that correspond to various browsers.

To enable or disable a property in a browser, select or clear the checkbox under the browser column.

To add a new property to the list, click the Add button or press Alt+Insert . Then type the name of the property in the dialog box that opens and enable it in the relevant browsers.

To delete one or more properties from the list, select them and click Remove or press Alt+Delete .

Источник

Ускоряем верстку сайта с emmet

При постоянном наборе одних и тех же тегов html и правил css невольно задумываешься можно ли ускорить данный рутинный процесс.

Сегодня мы рассмотрим расширение emmet для популярных редакторов и сред разработки, которое помогает существенно ускорить верстку сайтов. По своей сути emmet это набор сокращений которым соответствуют css правила и html разметка.

Установка emmet для редактора Sublime text

Первый способ

  1. Нажимаем ctrl+shift+p и пишем команду Packege Control: Install Package
  2. Вводим название плагина Emmet

Второй способ

  1. В редакторе переходим в консоль View -> Show console и добавляем следующий код:

import urllib.request,os,hashlib; h = ‘df21e130d211cfc94d9b0905775a7c0f’ + ‘1e3d39e33b79698005270310898eea76’; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘http://packagecontrol.io/’ + pf.replace(‘ ‘, ‘%20’)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install’ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb’ ).write(by)

После чего нажимаем ввод


  • Теперь заходим во вкладку Preferences -> Package Control, в списке выбираем Install Package после чего в строке ввода набираем «Emmet» и кликаем на первую запись

  • После чего требуется перезапустить редактор
  • Плагин установлен, можно работать!

    • Установка emmet для редактора PhpStorm

    В данную среду разработки уже включён плагин emmet. Чтобы это проверить достаточно набрать какое-либо сокращение emmet и нажать tab

    Основные сокращения emmet

    Сокращения для html:

    ! Сокращение для вывода структуры html документа

    meta:vp вывод viewport

    a Вывод ссылки

    link:css Подключение таблицы стилей

    link:favicon Вывод фавикона

    script:src Добавление js кода

    form:post

    inp

    select+

    tarea

    bq

    art

    c Комментарий

    btn:s Вывод кнопки

    hdr тег header

    ftr тег footer

    ol+ Нумерованный список

    table+ Вывод таблицы

    Правила emmet

    div>ul>li Описание вложенности элементов

    div+p Создание нескольких равнозначных элементов

    div>p>span^a Элемент на уровень выше

    header>(ul>li)+div Объединить в один элемент

    a*3 Вывести несколько элементов

    div.block_$*2 Класс с номером

    #block1+.block2 Id и class

    img[title=»картинка»] Вывод атрибутов

    .block1 Вывод текста

    Сокращения для css:

    p10 padding: 10px;

    pt20 padding-top: 20px;

    w20 width: 20px;

    wa width: auto;

    h20 height: 20px;

    mah20 max-height: 20px;

    mh20 min-height: 20px;

    maw20 max-width: 20px;

    mw20 min-width: 20px;

    bg+ background: #fff url() 0 0 no-repeat;

    bg#f00 background: #f00;

    bgc#f00 background-color: #f00;

    bgt background-color: transparent

    bgi background-image:url();

    lg(left, #f00, 30%, #fff) Линейный градиент (с префиксами)

    background-image: -webkit-linear-gradient(left, #f00, 30%, #fff); background-image: -o-linear-gradient(left, #f00, 30%, #fff); background-image: linear-gradient(to right, #f00, 30%, #fff);

    Источник

    Emmet

    The Emmet toolkit enhances coding with HTML, CSS, and JSX. You can use Emmet code templates without leaving PhpStorm. To expand a template into the correct markup, type its abbreviation and press Tab . For information about changing the shortcut, see Configure the abbreviation expansion key.

    For example, in an HTML file, type table>tr*3>td*2 and press Tab to get a stub of a 3×2 table:

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

    Enable and configure Emmet

    With PhpStorm, 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 the IDE settings Ctrl+Alt+S .

      Press Ctrl+Alt+S to open the IDE settings and select Editor | Emmet .

    On the Emmet page that opens, choose the key to expand Emmet abbreviations with, by default Tab is selected.

    To enable or disable Emmet in a specific language (HTML, CSS, or JSX), go to Editor | Emmet | and toggle the Enable Emmet checkbox. Use the controls on the Emmet page to configure Emmet in various language contexts.

    PhpStorm 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:

    To generate a list of entries, you just need to type “entry-list 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:

    The ATTRS variable must have an empty string as the default value and should be skipped.

    Use live templates with Emmet

      Press Ctrl+Alt+S to open the IDE settings and select Editor | Live Templates .

    On the Emmet page, select the checkboxes next to the templates you want to use.

    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.

    In the Template Text field, add the required text and variables to the template body.

    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.

    Configure the abbreviation expansion key

    By default, Emmet native abbreviations and additional live templates are expanded by pressing Tab . For additional live templates, PhpStorm 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.

    Configure the expansion key for native Emmet abbreviations

      Press Ctrl+Alt+S to open the IDE settings and select Editor | Emmet .

    On the Emmet page that opens, choose the new expansion key instead of the default Tab from the Expand abbreviation with list.

    Configure expansion keys for Emmet live templates

      Press Ctrl+Alt+S to open the IDE settings and select Editor | Live Templates .

    On the Live Templates page opens, expand the Zen HTML , Zen CSS , or Zen XSL template group and select the desired template. The focus moves to the Template Text area.

    From the Expand with list, choose the key to expand the template with.

    Surround a block of code with an Emmet template

    In the editor, select a block of code to surround and press Ctrl+Alt+J or select Code | Surround with | Live Template from the main menu.

    From the Select Template list, select Emmet :

    Type the Emmet abbreviation to use and press Enter .

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

    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:

    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 Alt+Shift+[ .

    To move the cursor to the next edit point, choose Navigate | Next Emmet Edit Point , or press Alt+Shift+] .

    Источник

    Emmet

    The Emmet toolkit enhances coding with HTML, CSS, and JSX. You can use Emmet code templates without leaving WebStorm. To expand a template into the correct markup, type its abbreviation and press Tab . For information about changing the shortcut, see Configure the abbreviation expansion key.

    For example, in an HTML file, type table>tr*3>td*2 and press Tab to get a stub of a 3×2 table:

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

    Enable and configure Emmet

    With WebStorm, 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 the IDE settings Ctrl+Alt+S .

      Press Ctrl+Alt+S to open the IDE settings and select Editor | Emmet .

    On the Emmet page that opens, choose the key to expand Emmet abbreviations with, by default Tab is selected.

    To enable or disable Emmet in a specific language (HTML, CSS, or JSX), go to Editor | Emmet | and toggle the Enable Emmet checkbox. Use the controls on the Emmet page to configure Emmet in various language contexts.

    WebStorm 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:

    To generate a list of entries, you just need to type “entry-list 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:

    The ATTRS variable must have an empty string as the default value and should be skipped.

    Use live templates with Emmet

      Press Ctrl+Alt+S to open the IDE settings and select Editor | Live Templates .

    On the Emmet page, select the checkboxes next to the templates you want to use.

    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.

    In the Template Text field, add the required text and variables to the template body.

    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.

    Configure the abbreviation expansion key

    By default, Emmet native abbreviations and additional live templates are expanded by pressing Tab . For additional live templates, WebStorm 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.

    Configure the expansion key for native Emmet abbreviations

      Press Ctrl+Alt+S to open the IDE settings and select Editor | Emmet .

    On the Emmet page that opens, choose the new expansion key instead of the default Tab from the Expand abbreviation with list.

    Configure expansion keys for Emmet live templates

      Press Ctrl+Alt+S to open the IDE settings and select Editor | Live Templates .

    On the Live Templates page opens, expand the Zen HTML , Zen CSS , or Zen XSL template group and select the desired template. The focus moves to the Template Text area.

    From the Expand with list, choose the key to expand the template with.

    Surround a block of code with an Emmet template

    In the editor, select a block of code to surround and press Ctrl+Alt+J or select Code | Surround with | Live Template from the main menu.

    From the Select Template list, select Emmet :

    Type the Emmet abbreviation to use and press Enter .

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

    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:

    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 Alt+Shift+[ .

    To move the cursor to the next edit point, choose Navigate | Next Emmet Edit Point , or press Alt+Shift+] .

    Источник

    Читайте также:  Как настроить усилитель тп линк н300
    Оцените статью
    © 2026 Настройка и ремонт техники