| !, html:5 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
|
| !!! |
<!DOCTYPE html> |
| a |
<a href=""></a> |
| a:link |
<a href="http://"></a> |
| a:mail |
<a href="mailto:"></a> |
| br |
<br /> |
| frame |
<frame /> |
| link |
<link rel="stylesheet" href="" /> |
| link:css |
<link rel="stylesheet" href="style.css" /> |
| link:favicon |
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> |
| link:rss |
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" /> |
| meta |
<meta /> |
| meta:utf |
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> |
| meta:win |
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" /> |
| meta:vp |
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> |
| meta:compat |
|
| style |
<style></style> |
| script |
<script></script> |
| script:src |
<script src=""></script> |
| img |
<img src="" alt="" /> |
| img:srcset, img:s |
<img srcset="" src="" alt="" /> |
| img:sizes, img:z |
<img srcset="" src="" alt="" /> |
| map |
<map name=""></map> |
| form |
<form action=""></form> |
| label |
<label for=""></label> |
| input |
<input type="text" /> |
| inp |
<input type="text" name="" /> |
| input:text, input:t | <input type="text" name="" /> |
| input:search |
<input type="search" name="" /> |
| input:email |
<input type="email" name="" /> |
| input:url |
<input type="url" name="" /> |
| input:password, input:p |
<input type="password" name="" /> |
| input:datetime |
<input type="datetime" name="" /> |
| input:date |
<input type="date" name="" /> |
| input:time |
<input type="time" name="" /> |
| input:tel |
<input type="tel" name="" /> |
| input:number |
<input type="number" name="" /> |
| input:color |
<input type="color" name="" /> |
| input:checkbox, input:c |
<input type="checkbox" name="" /> |
| input:radio, input:r |
<input type="radio" name="" /> |
| input:range |
<input type="range" name="" /> |
| input:file, input:f |
<input type="file" name="" /> |
| input:submit, input:s |
<input type="submit" value="" /> |
| input:image, input:i |
<input type="image" src="" alt="" /> |
| input:button, input:b |
<input type="button" value="" /> |
| input:reset |
<input type="reset" value="" /> |
| select |
<select name=""></select> |
| select:disabled, select:d |
<select name="" disabled="disabled"></select> |
| option, opt |
<option value=""></option> |
| textarea |
<textarea name="" cols="30" rows="10"></textarea> |
| marquee |
<marquee behavior="" direction=""></marquee> |
| menu:context, menu:c |
<menu type="context"></menu> |
| menu:toolbar, menu:t |
<menu type="toolbar"></menu> |
| video |
<video src=""></video> |
| audio |
<audio src=""></audio> |
| html:xml |
<html xmlns="http://www.w3.org/1999/xhtml"></html> |
| keygen |
<keygen /> |
| command |
<command /> |
| button:submit, button:s, btn:s |
<button type="submit"></button> |
| button:reset, button:r, btn:r |
<button type="reset"></button> |
| button:disabled, button:d, btn:d |
<button disabled="disabled"></button> |
| bq |
<blockquote></blockquote> |
| fig |
<figure></figure> |
| figc |
<figcaption></figcaption> |
| pic |
<picture></picture> |
| ifr |
<iframe src="" frameborder="0"></iframe> |
| emb |
<embed src="" type="" /> |
| obj |
<object data="" type=""></object> |
| cap |
<caption></caption> |
| colg |
<colgroup></colgroup> |
| fst, fset |
<fieldset></fieldset> |
| btn |
<button></button> |
| optg |
<optgroup></optgroup> |
| tarea |
<textarea name="" cols="30" rows="10"></textarea> |
| leg |
<legend></legend> |
| sect |
<section></section> |
| art |
<article></article> |
| hdr |
<header></header> |
| ftr |
<footer></footer> |
| adr |
<address></address> |
| dlg |
<dialog></dialog> |
| str |
<strong></strong> |
| prog |
<progress></progress> |
| mn |
<main></main> |
| tem |
<template></template> |
| datag |
<datagrid></datagrid> |
| datal |
<datalist></datalist> |
| kg |
<keygen /> |
| out |
<output></output> |
| det |
<details></details> |
| cmd |
<command /> |
| ol+ |
<ol>
<li></li>
</ol>
|
| ul+ |
<ul>
<li></li>
</ul>
|
| dl+ |
<dl>
<dt></dt>
<dd></dd>
</dl>
|
| map+ |
<map name="">
<area shape="" coords="" href="" alt="" />
</map>
|
| table+ |
<table>
<tr>
<td></td>
</tr>
</table>
|
| colgroup+, colg+ |
<colgroup>
<col />
</colgroup>
|
| tr+ |
<tr>
<td></td>
</tr>
|
| select+ |
<select name="">
<option value=""></option>
</select>
|
| optgroup+, optg+ |
<optgroup>
<option value=""></option>
</optgroup>
|
| pic+ |
<picture>
<source srcset="" />
<img src="" alt="" />
</picture>
|
Плагин Emmet — пишем код быстрее
От автора: если Вы много верстаете и до сих пор не используете плагин Emmet или Zen Coding, то этот урок будет для Вас как нельзя кстати. Используя плагин Emmet, Вы станете писать код на порядок быстрее, а сам процесс написания кода из скучного и рутинного станет оригинальным и доставит несомненное удовольствие.
Плагин Emmet – это ни что иное, как бывший Zen Coding, который приобрел огромную популярность сразу же после своего выхода в свет. Плагин этот представлен в версиях для множества редакторов, так что, скорее всего, Вы также сможете использовать его в своем любимом редакторе.
В данном уроке мы установим плагин для редактора Notepad++, рассмотрим возможные проблемы, возникающие при установке и, конечно же, попрактикуемся в работе с плагином.
Синтаксис Emmet, на самом деле, прост. Если Вы хорошо знакомы с CSS или jQuery, то изучение синтаксиса Emmet не составит для Вас абсолютно никакого труда. Ну а после некоторой практики Вы сможете составлять сложные последовательности аббревиатур, которые будут разворачиваться в сколь угодно большой код.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
СмотретьФорматирование текста с помощью плагина Emmet
Для того чтобы отформатировать текст в виде html, обычно используются теги. Причём чаще всего сначала формируют разметку документа в виде тегов, а потом внутрь них вставляют текст. Но бывает ситуации, когда текст уже есть, он хорошо отформатирован, разбит на абзацы, заголовки и другие логические части: списки, блоки с кодом и т.п.
Тогда текст проще «оборачивать» в теги.
Вот здесь как раз и понадобится плагин Emmet, который существует для нескольких текстовых редакторов кода (Notepad++, Sublime Text, Coda, NetBeans, Brackets и др.). На примере последнего мы и рассмотрим этот плагин. Кстати, подробное описание всего, что умеет Emmet, вы найдете по ссылке emmet cheat-sheat.
Установка плагина Emmet в Brackets
Все очень просто. Нужно скачать плагин с сайта, вызвать окно установщика расширений в редакторе Brackets, нажав на клавишу в виде кубика Лего, и перетащить zip-архив на кнопку Drag zip here или Установить с URL.
Или еще проще — в поле поиска справа вверху ввести «Emmet» и установить плагин, кликнув на нем.
Аббревиатуры в Emmet
Для начала необходимо запомнить несколько простых понятий и сочетаний клавиш. В Emmet существует понятие аббревиатуры, которое подразумевает некоторое сокращение для тегов в html-коде или для css-свойств.
Итак, аббревиатурой для создания базовой структуры html-документа является html:5 или просто восклицательный знак !. Чтобы Emmet преобразовал этот код в теги, нужно просто набрать ! и нажать Tab. Важно не ставить пробелы после набранного кода.
Чтобы добавить любой тег, достаточно просто написать его без скобок и нажать клавишу Tab.
div превратится в <div></div>
div превратится в <div></div> |
Для того чтобы создать заголовок первого уровня с текстом внутри, нужно набрать h2{Текст заголовка} и нажать Tab.
<h2>Текст заголовка</h2>
<h2>Текст заголовка</h2> |
Чтобы создать заголовок с тексом-«рыбой», которым обычно является lorem ipsum… — псевдо латинский текст, которым замещают текст в тех блоках, для которых реальный текст ещё не написан, необходимо набрать
Цифра после слова lorem указывает на количество слов из этого текста. В нашем примере это 3 слова.
Чтобы создать div с классом block, нужно набрать просто
А для абзаца с классом block обязательно указать тег p:
А код ниже превратиться в абзац, заполненный шаблонным текстом lorem ipsum.
Если вам необходимо добавить элемент div с, причем с вложенными в него 2-мя абзацами с текстом lorem ipsum, используйте такую аббревиатуру:
Оборачивание текста в теги
Но пока мы не приблизились к тому, как оборачивать существующий текст в теги.
На самом деле все просто. Для этого необходимо выделить нужный текст и нажать (внимание!) сочетание клавиш Ctrl+Shift+A.
В нижней части редактора будет выведено поле для ввода аббревиатуры. И здесь действуют те же правила. Правда, вряд ли в этом случае вам понадобится текст-рыба 🙂
Видео по теме
В видео ниже разбирается, как превратить txt-файл в html с разметкой и css-форматированием с помощью плагина Emmet. Вы можете попробовать повторить все действия, скачав txt-файл.
Просмотров: 991
Плагин Emmet для Sublime Text.
Вы до сих пор пишите теги html и css свойства вручную? Пришло время это исправить! Сегодня мы поговорим о плагине emmet, который поможет нам в этом.
Emmet — это плагин, который позволит вам писать html и css в десятки раз быстрее. Многие уже используют его в своих проектах, но многие о нем еще ничего не знают, и сегодня я попытаюсь исправить это.
Для начала его нужно установить. В Sublime Text, о котором недавно была написана статья, это делается очень просто. Откройте command palette, нажав сочетание клавиш cmd+shift+p, или перейдите в пункт tools и выберите там command palette. Теперь введите «install package» и нажмите enter. Дальше введите «emmet» и снова нажмите enter. После того, как плагин загрузится и установится, перезапустите Sublime Text.
Установка завершена, и теперь мы можем начать пользоваться плагином emmet. Введите
div
А теперь нажмите клавишу tab. В результате этих несложных действий мы получим открывающий и закрывающий тег div, а курсор будет установлен внутри, между ними.
<div></div>
Точно так же можно делать с любыми тегами. Например, давайте создадим ссылку.
a
Теперь нажмите tab, и мы получим следующее
<a href=""></a>
Как видите, emmet добавил атрибут href самостоятельно. Если же вы введете img, то там сразу будут атрибуты src и alt.
Теперь рассмотрим, как добаблять классы и id. Делается это точно так же, как и в css: класс с помощью ., а id с помощью #
.block
В результате получим
<div></div>
То же самое и с id
#block
Получим следующее
<div></div>
Заметьте, что я не писал слово div, а просто ставил точку или решетку и писал нужный мне класс или id. Дело в том, что мы можем пропускать название тега и тогда emmet сам будет додумывать, какой же тег поставить. В большинстве случаев это будет div, но, если вы, например, напишите так внутри тега ul, то тег будет li с нужным классом или id.
Если вы хотите сами ввести какой-то атрибут, то напишите его в квадратных скобках
div[data-attribute="value"]
Получим следующее
<div data-attribute="value"></div>
Чтобы вкладывать теги внутри других тегов, нужно использовать знак больше
ul>li>a
Получим следующее
<ul>
<li><a href=""></a></li>
</ul>
С помощью символа * можно указать, сколько таких тегов нам нужно
ul>li*5
Вот, что у нас получится
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Если вам нужно добавить тег на том же уровне, используйте знак +
#container>.left+.right
Результат
<div>
<div></div>
<div></div>
</div>
С помощью символа $ мы можем указать, что каждый тег следует нумеровать автоматически
ul>li.item$*5
Результат
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Если вам нужен ведущий ноль, то напишите знак $ 2 раза, если 2 ведущих нуля, то 3 знака $ и т.д.
Если вы хотите добавить внутри тега текст, то его нужно указать в фигурных скобках
a{Some text}
Результат
<a href="">Some text</a>
Если во время верстки вам нужен какой-то текст, то просто напишите lorem
lorem
Результат
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, mollitia quibusdam voluptatibus fuga dolorem officiis animi error ex ea ipsa excepturi incidunt quis sunt ducimus rerum corrupti obcaecati ipsum quisquam.
Если вам нужно какое-то определенное количество слов, то напишите цифру, обозначающую количество слов после.
lorem3
Результат
Lorem ipsum dolor.
Чтобы создать html структуру, просто напишите знак !
!
Результат
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body></body>
</html>
Теперь поговорим о том, как emmet поможет нам в css
Там достаточно просто написать начальные буквы свойства и значение, а потом нажать tab. Например
m10
В результате получим
margin: 10px;
В некоторых свойствах уже стоят значения по-умолчанию. Например, в свойстве text-align
ta
Результат
text-align: left;
Но вы можете изменить его, просто написав букву значения после сокращения свойства. К примеру, пусть будет по центру.
tac
Результат
text-align: center;
Все рассматривать нет смысла. Документацию по плагину emmet вы можете найти здесь: http://docs.emmet.io/cheat-sheet/
В конце стоит сказать, что если вам по каким-то причинам не нравится клавиша tab, то вы можете поменять ее. Для этого зайдите по следующему пути: Perferences->Package Settings->Emmet->Key Bindings — default. Используйте поиск(cmd+f или перейдите по пути Find->Find) С помощью поиска найдите команду «expand_abbreviation_by_tab». Выше нее, в массиве keys, в кавычках написано «tab». Измените это значение на свое, например, на «ctrl+e». Но это не совсем правильно. Лучше будет, если вы скопируете весь этот объект и вставите его в файл Key Bindings — User, а там уже меняйте сочетание клавиш. Сделано это для того, чтобы если что, вы могли вернуть все настройки по-умолчанию с помощью файла Key Bindings — Default.
Итак, на этом все. Сегодня мы рассмотрели плагин emmet для текстового редактора Sublime Text. Если вы используете другой редактор, то поищите этот плагин для него в интернете. Удачи!
-
Создано 20.05.2014 19:09:59 -
Михаил Русаков
Создано 20.05.2014 19:09:59
Михаил РусаковЕсли у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Написать HTML и CSS быстрее с Emmet
Как веб-разработчик, мы всегда искали инструмент, позволяющий увеличить наш рабочий процесс и производительность. И пост сегодня предназначен для веб-разработчиков, которые часто работают с HTML и CSS, и мы собираемся взглянуть на инструмент, который позволяет нам, написать эти два основных веб-языка (много) быстрее — Emmet.Рекомендуем к прочтению: Работа с фрагментами кода в Sublime Text.Emmet является расширение ZenCoding, который записывается чисто с JavaScript. В этой статье я буду использовать Sublime Text, Emmet также доступна для многих редакторов кода, включая TextMate, Coda, Eclipse, Notepad++, и Adobe DreamWeaver.
Установка Emmet
Зайдем на эту страницу, чтобы найти и скачать Emmet для вашего редактора кода. Если вы используете Sublime Text, как я, Emmet может быть легко установлен через управления в пакете.
После установки, возможно, потребуется перезагрузить Sublime Text.Написание HTML с Emmet
Большинство современных редакторов, вероятно, имеют аналогичные встроенные функциональности. Например, в Sublime Text пишем просто <ul> и нажмите клавишу табуляции, она будет автоматически расширяться в полном неупорядоченный список с <li> элемента.Мы также можем написать следующее div.class назначить HTML класса в элементе.Emmet, в данном случае, расширяет эту функциональность, что позволяет нам создавать сложные структуры HTML в более упрощенном виде с сокращениями или псевдонимы, похожий на тот, в CSS. Так что, если вы уже знакомы с синтаксисом CSS, вы должны привыкнуть к нему быстро.Кроме того, Emmet документация обеспечивает массовый список сокращений, псевдонимов и целей, которые могут быть очень пугающим для новичка. Но, вот некоторые из основных вещей по крайней мере, вы должны знать.
Дочерний элемент (Child )
Как мы уже упоминали, Emmet использует синтаксис, аналогичный CSS. В CSS мы имеем прямой селектор child, который представлен со знаком «>». В Emmet, мы используем этот оператор чтобы добавлять дочерние элементы.
Родственный элемент
Родственный элемент ссылается на элемент в том же уровне вложенности. В CSS, мы можем выбрать Родственный элемент со знаком плюс «+». Точно так же мы можем использовать его, чтобы добавить родственные элементы с Emmet.
Назначение ID или класса
Мы можем выбрать элемент и его ID атрибут с помощью знака # в CSS. С Emmet, мы используем # присвоить атрибуту ID элемента, и, как мы показали вам, прежде чем мы сможем назначить класс в HTML элемент, точно так же мы выбираем элемент класса.
Например:
Когда мы не определили элемент, как вы можете видеть выше, Emmet будет использовать <div> по умолчанию. Если мы хотим быть более конкретным, мы можем объявить тип элемента перед классом или ID имя, например, так.
Специально в классе для HTML, мы можем назначить несколько классов в одном элементе таким образом.
Назначение атрибутов
В CSS, мы используем квадратные скобки, чтобы выбрать атрибут. Таким же образом могут быть применены с Emmet для присвоения атрибута сгенерированного элемента.
Умножение
Emmet также позволяет добавлять HTML элемент в конкретных цифрах с помощью звездочки (*) знак, который может быть во время заставки. В этом примере мы добавляем <h4> и <h5> под <section> элемента.
Основы документа HTML
Мы можем построить основную структуру HTML документа в Emmet. Учитывая пример базовой структуры HTML5, мы можем сделать это таким образом.
Lorem Ipsum
А вот еще, Это одно из моих любимых в Emmet. Sublime Text приходит с ярлыка для создания фиктивных Lorem Ipsum текста. Мы просто можем написать Lorem и нажать Tab, и она будет расширяться примерно до 5 — 7 строк Lorem Ipsum.
Emmet, в данном случае, работает немного по-другому. С Emmet, мы можем определить, много слов, чтобы генерировать.
Допустим, мы хотим только 3 слова, и мы можем написать lorem3:
Использование Эммет в CSS
Можно также написать CSS с Emmet. Как и в HTML, он расширяет псевдонимы в полную собственность CSS.
Вот один пример: допустим, что мы хотим добавить padding со значением 10px, мы просто пишем р: 10 и нажмите клавишу табуляции (TAB), и он будет автоматически расширять его padding: 10px, следующим образом.
Или же, если мы хотим, чтобы скрыть элементы, мы можем сделать либо с visibility или display
Однако, несмотря на преимущества, когда дело доходит до CSS, я по-прежнему предпочитают использовать функцию авто-заполнения от моего редактора кода так как это просто более удобно для меня.
Плюс, запоминая этих CSS псевдонимов немного сложнее, чем для HTML, хотя, вы можете обратиться к шпаргалке псевдонимов Emmet для CSS, а также HTML здесь .Заключение
Emmet действительно блестящий инструмент, и я думаю, что это является важным инструментом для веб-разработчиков. Единственным недостатком является, пожалуй, обучение необходимо для новичков, но как только вы поймете, это может значительно повысить производительность. Вы можете написать HTML и CSS быстрее, чем когда-либо прежде.
Источник: http://hongkiat.com
Добавлять комментарии могут только зарегистрированные пользователи.
Поделись с друзьями:
Ускоряем работу с Emmet, или мой первый шаг к Open Source / Habr
Не претендуя на новаторство и особую глубину рассуждений, я решил написать эту статью с двумя целями:- Рассказать о моем первом опыте в написании чего-то полезного для IT-сообщества (а конкретно — плагина для редактора Sublime Text). Возможно, это подтолкнет к созданию open-source проектов тех, кто этим еще никогда не занимался, стесняется, боится, что квалификации не хватит или что нужно обязательно писать что-то глобальное и т.п.
- Показать коллегам-верстальщикам созданный в результате плагин, который вполне может сэкономить им драгоценные минуты жизни.
Начнем же, перекрестясь.
1. Часть первая, с рассуждениями
Ребята, мне в этом месяце стало стыдно. Не так стыдно, как бывает, когда что-то ляпнул лишнее. А прямо глобально. Я вдруг осознал себя бесполезным элементом в ИТ-индустрии. Я понял, что всю жизнь пользовался дарами open source, ничего абсолютно не предлагая сообществу от себя. Форменный паразит.
И основная причина тому в моей странной уверенности, что моих знаний недостаточно для написания чего-то полезного для других.
Чтобы вы понимали, я — верстальщик, или, как это сейчас модно-огородно, «фронтендер». Но нет, все же верстальщик. Не буду при всех заниматься самообманом. Можно сказать, что я на несколько лет застрял в этой специальности, зная обо всем остальном (языках и методах программирования, разнообразных фреймворках, базах данных и т.п.) на уровне прикладных задач и не особо системно. Но, все же, написать несложные программы я могу и, так или иначе, делаю это постоянно.
Ну так вот, возвращаясь к моей проблеме — мне стало стыдно. Известно, что это чувство у всех, не страдающих душевными болезнями, вызывает сначала грусть-тоску, а потом желание измениться. Когда я добрался до второй стадии, мне открылись невероятные для моего узкого взгляда на мир открытия.
Уже слышу ваши голоса: «Поделись же ими с нами, капитан!»
А капитану и не жалко.
ОТКРЫТИЕ ПЕРВОЕ: коллегам для упрощения работы не всегда нужно что-то революционно-глобальное, как я почему-то полагал, иногда достаточно небольшого инструмента, помогающего в узкой сфере и вполне «поднимаемого» мной. И проблем, которые можно решить такими инструментами, полным полно.
ОТКРЫТИЕ ВТОРОЕ: сделать что-то полезное для людей, выставить это на всеобщее обозрение — это нереально крутой пинок самому себе к профессиональному развитию.
Да, да, я отчетливо понимаю, что большинство из читающих этот текст людей к этим мыслям пришли еще в начале карьеры, и нового тут ничего нет. Но если хоть один из вас похож на меня и пока только склоняется к подобным выводам — значит слова не потрачены зря и я имею моральное право продолжить повествование.
А теперь, собственно, о том, каким был мой первый шаг в мире профессионального альтруизма.
2. Часть вторая, с идеями
И вот я сел за свой первый open source. Что же полезного мне написать сначала? Очередной jquery-слайдер? Или какой-нибудь свой «ни на что не похожий» bootstrap-подобный фреймворк (честно говоря, не представляю, зачем их плодят сейчас в таком количестве). Идею не хотелось высасывать из пальца.
И я подумал о том, чего не хватает сейчас лично мне. Как вы помните, я верстаю, и как многие верстальщики (если не все) использую в работе редактор Sublime Text и замечательный плагин Emmet. Он в разы облегчает написание html-разметки и css-стилей. Но, для наших нужд остановимся на его работе со стилями.
Обычно моя работа с плагином выглядит как и у большинства: когда я хочу написать какое-либо css-свойство, я пишу его Emmet-сокращение, нажимаю Tab, сокращение раскрывается в нормальное свойство, в конце перехожу на новую строку клавишей Enter. Этот процесс уже, как говорится, вошел в пальцы и, вроде бы, всех всё в нем устраивает.
Но каждый раз нажимать Tab -> Enter мне вдруг показалось излишним. Почему бы не записывать сокращения подряд, через пробел, что намного быстрее, и потом уже раскрывать их все? Может показаться, что это «экономия на спичках», однако, мой опыт показывает, что обычно свойства мы пишем не по одному, думая после каждого, а логическими группами, например за position обычно следуют left и top, значения которых мы уже знаем и можем писать их подряд без пауз, или когда мы пишем width — то уже знаем, какой будет дальше height. И таких примеров много. Так что есть хороший задел для уменьшения количества лишних телодвижений.
Сам Emmet имеет свою реализацию подобного поведения: если писать значение через знак «+» и в конце нажать на Tab — они все раскроются разом. Но постоянно тянуться до плюса, да еще с shift’ом его нажимать мне показалось неудобным, и я решил организовать нужное мне поведение отдельным плагином. Это выходило за рамки моей изначальной компетенции, плагины для Sublime пишутся на Python, с которым я знаком был достаточно поверхностно. Но, как говаривали древние, война — херня, главное — манёвры.
3. Часть третья, с результатами
Вот так выглядит теперь моя работа с использванием написанного мной плагина EmmetOneLine:
Как видите, логика Emmet сохранена, все раскрывается как надо, а лишних табов и переходов на новые строки больше нет. Лепота.
Раскрытие всех блоков я по умолчанию повесил на Ctrl+Tab, в дальнейшем думаю прикрутить проверку строки на несколько свойств и сделать раскрытие по tab, когда это доступно. Еще это будет нужно тем, кто использует Ctrl+Tab для перехода по вкладкам. (Я для этого обычно использую нечеткий поиск по документам).
Плагин был написан мной за несколько часов, ночью, в порыве вдохновения. API Sublime оказалось достаточно дружелюбным, по данной теме нашлось пару статей на хабре и несколько зарубежных материалов, дело шло быстро, благо логика намечалась не особо замороченная. К моему, должен сказать, приятному удивлению, мне хватило достаточно общего представления о Python, небольшого опыта программирования на других языках и нескольких практик из других плагинов чтобы сделать первую рабочую версию, пригодную для использования. Для целей публикации я завел себе аккаунт на GitHub, что раньше не делал, используя в рабочих проектах исключительно BitBucket. Процесс публикации плагина в Package Control так вообще оказался элементарным, достаточно было форкнуть проект package_control_channel и добавить в один json-файл информацию о плагине и дать на рассмотрение мейнтейнеру.
Теперь мой маленький плагин в сети и готов экономить вам время. А я получил интересный опыт, энергию на доработку плагина и планы по наращиванию сложности будущих открытых и не только проектов.
4. Пару слов напоследок
Подводя итог, я очень хочу пожелать тем начинающим разработчикам, кто еще никогда ничего не писал для сообщества — поступить как я и просто начать это делать. Open Source — это не всегда что-то сложное, есть потребность и в маленьких, простых решениях. Не стоит, как ваш покорный слуга, столько лет стесняться незнания каких-то вопросов, уровня английского, практических навыков и закрывать для себя этот интересный мир. Найдите интересную вам проблему и решите на том уровне, на котором можете. Люди Вас поймут и, в случае пользы проекта, поправят код и помогут советом.
За что, кстати, я был бы очень благодарен уважаемым более опытным коллегам! Буду рад любой помощи или критике по работе или описанию плагина (В том числе, касаемо ошибок в английском описании работы плагина).
За сим позвольте откланиться и пожелать всем профессионального роста!
Ссылка на плагин.
Emmet (ex Zen Coding) — инструментарий ускоряющий вашу работу с HTML и CSS в три раза
Всем привет! В этой статье мы с вами познакомимся с одним из наиболее популярных плагинов, предназначенных для «быстрого» тайпинга. К вашим услугам — Emmet (ex Zen Coding).
Данный плагин интересен, помимо всего прочего, тем, что написан на любимом всем фронтенд разработчикам языке JavaScript и потому хорошо переносим между различными платформами. Сейчас он представлен практически для всех известных IDE: Eclipse, Sublime Text 2, TextMate, Coda и пр.
Давайте просто напишем в редакторе div, нажмём tab (для Sublime Text 2, в вашем редакторе может быть и другая клавиша) и получим:
Или, допустим, мы хотим создать ненумерованный список из 5 элементов, для этого пишем:ul>li*5
Результат:
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> |
Работа с классами, дивами (элемент по умолчанию) и структурой также довольно проста. Создадим небольшой лэйаут:.container>.header+.main+.footer
Результат:
<div> <div></div> <div></div> <div></div> </div>
<div> <div></div> <div></div> <div></div> </div> |
Или то же самое, но в стиле html5: .container>header+.main+footer
<div> <header></header> <div></div> <footer></footer> </div>
<div> <header></header> <div></div> <footer></footer> </div> |
Emmet прямо-таки читает наши мысли! К примеру, если мы напишем просто a и нажмём tab, то результат будет такой:
Т.е. атрибут href дописывать не придется — Emmet обо всём позаботился за нас.
А как насчёт счетчика нумерации? И можно ли помещать текст внутри тегов? Давайте рассмотрим пример сложнее:
ul#nav>li.item$*4>a{Item $}
ul#nav>li.item$*4>a{Item $} |
Нажимает tab
<ul> <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> </ul>
<ul> <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> </ul> |
Уделите время и поиграйтесь с этими параметрами:
Это довольно забавно 
Дополнительные атрибуты задаются очень просто:
<input type=»» name=»client»>
<input type=»» name=»client»> |
Возьмите себе на вооружение!