emmet для BEMJSON - Githubissues

tadatuta commented 9 years ago

В треде про использование БЭМ на небольших проектах Николай Громов пожаловался, что написание 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.

Буду благодарен, если кто-нибудь сделает плагины и для других редакторов.

Приятного использования!

mursya commented 9 years ago

Спасибо!

voischev commented 9 years ago

:fire:

alukos commented 8 years ago

Классная штука, спасибо! Что-то у меня в sublime 2 в первый раз (в пустом документе) нормально разворачивает, а когда внутри пытаюсь вставить вылетает ошибка: bemmet Error: [TypeError: Cannot read property 'modName' of undefined] или бывает про 'block'

tadatuta commented 8 years ago

@alukos у меня не воспроизводится. можно более подробное описание последовательности действий? а лучше — видео. попробую починить.

alukos commented 8 years ago

@tadatuta magic - раз десять по разному пробовал не получалось, сел записать видео - все работает ) ура!

tadatuta commented 8 years ago

Если вы пользуетесь (или хотели пользоваться, но не смогли, т.к. были баги или не было автоиндента), то самое время обновиться — я выпустил новые версии bemmet, atom-bemmet и sublime-bemmet.

Самописный разбор аббревиатур на регекспах был заменен на полноценный парсер из emmet, исправлена куча багов, добавлена поддержка автоиндентации.

melikhov-dev commented 7 years ago

Выпустил первую версию плагина для Idea https://github.com/amel-true/bemmet-idea/

Пишите пожелания, а лучше PR =)

tadatuta commented 7 years ago

@amel-true Крутотень! Может отдельный пост напишешь, а @vithar потом на него сошлется из всяких соцсетей?

melikhov-dev commented 7 years ago

@tadatuta сначала потестирую, проверю под win и сам посижу подольше, а потом можно отдельным постом презентовать.

thrnd commented 6 years ago

Подскажите, bemmet только раскукоживает аббревиатуры, или еще умеет скукоживать bemjson в аббревиатуру?

qfox commented 6 years ago

Подскажите, bemmet только раскукоживает аббревиатуры, или еще умеет скукоживать bemjson в аббревиатуру?

Кажется, было бы не сложно собрать имея что-то вроде https://github.com/bem/bem-sdk/tree/master/packages/bemjson-to-decl Интересует же именно к idea? Там на java надо код писать... :-(

bem-site / bem-forum-content-ru

emmet для BEMJSON #542