Emmet - это набор инструментов для быстрого написания синтаксиса HTML, CSS, Sass / SCSS, LESS. Он позволяет легко создавать теги, атрибуты, классы и даже целые структуры документа с помощью коротких сокращений с помощью клавиши Tab (и не только).

Установка

  • В редакторе Atom откройте Настройки (или Настройки в Windows)
  • Перейдите в раздел Установить и найдите пакет Emmet.
  • Найдя, нажмите кнопку Установить.

Emmet также поддерживается Visual Studio Code, Sublime Text, Eclipse / Aptana, Coda, TextMate, Edit Plus и многими другими хорошо известными текстовыми редакторами.

Сокращения

Давайте начнем с простого примера и посмотрим, что он будет выводить в нашем редакторе.

div#container>img.logo+h1.title+p*3>{Paragraph $}

Вышеупомянутая строка преобразуется в:

<div id=”container”>
 <img src=”” alt=”” class=”logo”>
 <h1 class=”title”></h1>
 <p>Paragraph 1</p>
 <p>Paragraph 2</p>
 <p>Paragraph 3</p>
</div>

Что именно здесь произошло?

Мы указали, что нам нужен элемент div с идентификатором container, затем дочерний элемент img с именем класса logo, родственный тег h1 с именем класса title и снова 3 родственных тега p, заполненных содержимым Paragraph $, где $ будет заменен счетчиком цикла.

Итак, после написания этого однострочника и нажатия клавиши Tab мы создали целый блок html-кода, готовый к использованию менее чем за 5 секунд.

Как видите, мы сэкономили много времени на набор текста и копирование.

Достаточно интересно? Читать дальше…

Генератор Lorem Ipsum

Просто набрав lorem, вы создадите абзац по умолчанию Lorem ipsum…. Очень полезно, когда у вас много работы с шаблонами и вам нужно заполнить их заполнителями.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam vero neque sapiente consequuntur aperiam dignissimos, recusandae, velit suscipit dicta nesciunt at in natus sequi odit tempore pariatur labore maiores explicabo!

Пора углубляться в детали… Попробуйте ввести:

table>thead>tr>th*3>lorem1^^tbody>tr*2>td*3>lorem3

В результате получится:

<table>
  <thead>
    <tr>
      <th>Lorem.</th>
      <th>Libero.</th>
      <th>Optio.</th>
    </tr>
    <tbody>
      <tr>
        <td>Lorem ipsum dolor.</td>
        <td>Quia officiis, excepturi?</td>
        <td>Iusto, non officia!</td>
      </tr>
      <tr>
        <td>Lorem ipsum dolor.</td>
        <td>Laborum, quia, facilis!</td>
        <td>Sapiente, autem ad!</td>
      </tr>
    </tbody>
  </thead>
</table>

Как видите, мы создали table, который содержит раздел заголовка и тела, каждый из которых заполнен заполнителями Lorem ipsum. Вы заметили lorem1 и lorem3? Мы только что сказали, что нам нужно одно и три слова в предложении-заполнителе, но вы можете заменить его любым допустимым числовым значением, которое вам нравится. Вы уже знаете *3multiplier из предыдущего примера, а ^ просто перемещает вас на один уровень вверх в дереве узлов, аналогично >, который переводит вас на один уровень вниз.

Сокращения CSS

Когда дело доходит до CSS или SCSS, большинство редакторов уже поддерживают автозаполнение свойств ваших классов и их значений, и в этом случае Emmet может оказаться не таким полезным. Но есть несколько случаев, когда это может пригодиться и сэкономить вам время на вводе текста. Давайте посмотрим на эти примеры ...

m10

Это будет преобразовано в margin: 10px;

Итак, как вы уже могли догадаться, мы можем сделать mt10, mr5 и т. Д., Что приведет к margin-top: 10px; и margin-right: 5px. Что, если нам нужны не пиксели, а единицы измерения? К счастью, у Эммета есть несколько псевдонимов для часто используемых юнитов:

  • p дает%
  • e даетem
  • x даетex
  • r дает rem

Цвета и другие свойства

  • c#f2 дает #f2f2f2
  • bdt1#0s дает border-top: 1px #000000 solid

Интерактивное сокращение

  • На Mac нажмите control + option + enter
  • В Windows hitctrl + alt + enter

… Для входа в интерактивный режим сокращения, командную строку внутри вашего редактора, которая позволит вам тестировать и выполнять ваши сокращения на лету. Это очень удобно при написании более сложных правил. Хотя лучше всего помнить, что лучше написать несколько отдельных правил, чем тратить слишком много времени на одну строку. В конце концов, Эммет здесь для того, чтобы сэкономить ваше время и ускорить кодирование, а не усложнять или затягивать его.

Шпаргалка

Официальная Шпаргалка Эммета впечатляет, ее определенно стоит проверить и поэкспериментировать.