В треде про использование БЭМ на небольших проектах Николай Громов пожаловался, что написание BEMJSON требует больше времени, чем написание HTML с помощью emmet
.
И хотя время на набор кода не кажется чем-то существенным ни в процентном соотношении со временем на обдумывание или отладку, ни в абсолютных значениях, подумалось, что потратить несколько часов на написание аналога emmet
для BEMJSON — это неплохой способ провести вечер ;)
Так появился пакет bemmet, который умеет разворачивать аббривиатуры вроде b1>__e1*2>b3_theme_islands+_state_active{hello}
в BEMJSON:
{
block: 'b1',
content: [
{
block: 'b1',
elem: 'e1',
content: [
{
block: 'b3',
mods: { theme: 'islands' },
content: {}
},
{
block: 'b1',
mods: { state: 'active' },
content: 'hello'
}
]
},
{
block: 'b1',
elem: 'e1',
content: [
{
block: 'b3',
mods: { theme: 'islands' },
content: {}
},
{
block: 'b1',
mods: { state: 'active' },
content: 'hello'
}
]
}
]
}
Через опции можно конфигурировать кастомный нейминг — под капотом используется bem-naming.
Метод stringify()
поддерживает опции про индентацию и кавычки — используется stringify-object.
Попробовать bemmet
в действии можно с помощью online-демки. Вы также можете сразу установить его в свой редактор с помощью плагинов для Sublime Text и Atom.
Буду благодарен, если кто-нибудь сделает плагины и для других редакторов.
Приятного использования!
Спасибо!
:fire:
Классная штука, спасибо! Что-то у меня в sublime 2 в первый раз (в пустом документе) нормально разворачивает, а когда внутри пытаюсь вставить вылетает ошибка: bemmet Error: [TypeError: Cannot read property 'modName' of undefined] или бывает про 'block'
@alukos у меня не воспроизводится. можно более подробное описание последовательности действий? а лучше — видео. попробую починить.
@tadatuta magic - раз десять по разному пробовал не получалось, сел записать видео - все работает ) ура!
Если вы пользуетесь (или хотели пользоваться, но не смогли, т.к. были баги или не было автоиндента), то самое время обновиться — я выпустил новые версии
bemmet
,atom-bemmet
иsublime-bemmet
.Самописный разбор аббревиатур на регекспах был заменен на полноценный парсер из
emmet
, исправлена куча багов, добавлена поддержка автоиндентации.Выпустил первую версию плагина для Idea https://github.com/amel-true/bemmet-idea/
Пишите пожелания, а лучше PR =)
@amel-true Крутотень! Может отдельный пост напишешь, а @vithar потом на него сошлется из всяких соцсетей?
@tadatuta сначала потестирую, проверю под win и сам посижу подольше, а потом можно отдельным постом презентовать.
Подскажите, bemmet только раскукоживает аббревиатуры, или еще умеет скукоживать bemjson в аббревиатуру?
Кажется, было бы не сложно собрать имея что-то вроде https://github.com/bem/bem-sdk/tree/master/packages/bemjson-to-decl Интересует же именно к idea? Там на java надо код писать... :-(