Emmet - инструменты веб-разработчика

Все мы слышали об emmet. Его синтаксис очень простой, но теоретически позволяет вместить в себя HTML-структуру любой сложности. Пожалуй, самая большая его странность, не считая однострочного кода, - конвертер работает только в одну сторону. По-моему, ручная правка HTML это ад даже в хорошем текстовом редакторе и нужно стремиться её избегать. И в некоторых случаях emmet нам в этом хороший помощник, его сокращение раздутого синтаксиса HTML до минимально возможного в принципе - просто праздник какой-то.

###Синтаксис emmet:
+ оператор конкатенации: li+li -> <li></li><li></li>
* оператор повторения: li*2 -> <li></li><li></li>
$ оператор перечисления: {$}*3 -> 123
() группировка тегов: ul(li+li) -> <ul><li></li><li></li></ul>
[] доступ к атрибутам тега: textarea[cols=30 rows=10] -> <textarea name="" id="" cols="30" rows="10"></textarea>
{} доступ к значению тега: p{hello} -> <p>hello</p>
.class установка классов: h6.small -> <h6 class="small"></h6>
#id установка id: h1#big -> <h1 id="big"></h1>
> оператор вложенности: ul>li -> <ul><li></li></ul>
^ переход на предыдущую вложенность: div+div>p>span+em^bq ->

<div></div><div><p><span></span><em></em></p><blockquote></blockquote></div>
2 Симпатий

Может кто сталкивался, как сделать в множественном выделении перечисление? Например, в коде ниже вместо | нужен инкремент чисел.

`

Lorem
ipsum
dolor
`

чтобы получилось так
`

Lorem
ipsum
dolor
`

.item.item-$*3 даст перечисление, но с пустыми дивами
.item.item-1{Lorem}+.item.item-2{ipsum}+.item.item-3{dolor} даст результат точно как на примере, но перечисляем уже вручную.

Кстати, div можно не писать, это ещё одна фича.

Не так, суть в том, чтобы в существующих блоках можно было добавлять.

Насколько я знаю, этот плагин не предназначен для редактирования существующего кода, в нем просто нету такого функционала. Может быть, тебе нужны макросы.

Соглашусь с eimrine. Или в sublime использовать комбинацию Ctrl+D выделит элемент перед курсором (если не ошибаюсь) и при повторном нажатие выделит такое же слово или символ дальше по коду.

Так в том и вопрос. Ну вот через Ctrl+D пробежался по

, а дальше как сделать чтобы в каждой строке инкремент появился?

Вот такая конструкция генерирует примерно твой код:
.item.item-$*5>lorem1
Если нужно править уже готовый код, поищи как выделять в Sublime текст по столбцам. Но Emmet с уже готовым кодом не работает.

Для всех: зачем изобретать велосипед? Отличная и огромная таблица примеров использования Emmet - на оффсайте

Разобрался