Можно ли контролировать последовательность атрибутов при развороте в HTML?

[nicothin]

Очень хочется иметь атрибут class всегда самым первым аьрибутом.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[sergeche]

Обычно все атрибуты выводятся в порядке их указания в аббревиатуре, за исключением случаев, если для аббревиатуры задан сниппет с другими атрибутами. Тут только менять сами сниппеты и добавлять им пустой атрибут class в нужное место.

[nicothin]

@sergeche label.clasname → <label for="" class="clasname"></label> a.classname → <a href="" class="classname"></a> a[class=classname href="goo"] → <a href="goo" class="classname"></a>

Обычно все атрибуты выводятся в порядке их указания в аббревиатуре,

нет )

а как создать такой сниппет, который сделает, к примеру: a.classname → <a class="classname" href=""></a>?

[sergeche]

Потому что для a сниппет: https://github.com/emmetio/emmet/blob/master/lib/snippets.json#L691

Решение: либо удалить этот сниппет (переопределить у себя пустым занчением: "a": null), либо модифицировать его: "a": "<a class=\"\" href=\"\">, но тогда атрибут class будет всегда выводиться. Либо сделать новый сниппет, который не будет содержать никаких атрибутов в элементе <a>.

[nicothin]

Хм... написал "a": null, — http://take.ms/BHuO6 ничего не изменилось: a.classname → <a href="|" class="classname"></a>

написал "a": "<a class=\"\" href=\"\">" — http://take.ms/98CIZ неюзабельно: a.classname → <a class="" href="">|

написал "a": "<a>", не-не-не-не, Дэвид Блейн, НЕТ: a.classname → <a>

Правильно ли я понимаю, что ответ на мой вопрос — «никак»? Или я что-то делаю не так? )

[sergeche]

Сделать удобно — никак, нужно менять ядро, чтобы можно было задавать приоритеты сортировки у атрибутов

[nicothin]

В каком файле копать-то? :)

[sergeche]

Как вариант: https://github.com/emmetio/emmet/blob/master/lib/filter/html.js#L21 В принципе, можно и свой фильтр написать, который сгенерирует правильный вывод, и подключить его как расширение, чтобы не трогать ядро.

[nicothin]

Вариант с фильтром — вариант гораздо лучше (терпеть не могу лезть в ядро приложения). Где почитать про API? Или какие-то примеры, может?

[nicothin]

Вопрос актуален по сию пору. @sergeche каковы шансы этой задачи попасть в TODO-лист?

[sergeche]

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

[DDyst]

Переопределил сниппет для a (http://s020.radikal.ru/i717/1703/c0/8127577c2b25.png), без фильтров работает, как надо: a.xxx --> <a class="xxx" href=""></a> Но при использовании фильтра bem результат получается некорректным, имя класса дублируется: a.xxx|bem --> <a class="xxx xxx" href=""></a> div.yyy>a.-xxx|bem --> <a class="yyy__xxx -xxx" href=""></a> Возможно ли как-то этого избежать? @sergeche

[sergeche]

@DDyst эта возможность есть в новой версии ядра, которая пока есть в альфа-версии для Atom

[yeah-not]

А как ее посмотреть/опробовать? )

[sergeche]

https://github.com/emmetio/atom-plugin

[yeah-not]

Сергей, намекните хоть в каком файле искать эту самую возможность - я смотрю структура файлов изрядно изменилась О_о... Кастомизировать пока можно напрямую в ядре только правильно? Да, и |bem - теперь как? Зы.. А я думал, что emmet уже не может быть лучше, а тут такое грядет!!))

[Prepros]

1. Заходим в пользовательские настройки Emmet: Preferences -> Package Settings -> Emmet -> Settings User
2. Вставляем следующий снипет:

{
  "snippets": {
    "html": {
      "abbreviations": {
        "a": "<a class='' href=''>"
        }
      }
    }
}

[yeah-not]

Ну и получаем все ссылки всегда с классами :)

[sergeche]

Сделал начальную реализацию объединения атрибутов в обратном порядке при резолвинге сниппетов: сначала те, что написали в аббревиатуре, потом те, что объявлены в сниппете (см. ссылку на коммит выше). Это похоже на ожидаемое поведение?

Другой вариант: объявлять в сниппете неявные атрибуты (с восклицательным знаком в начале): "foo": "my-tag[title !class]" Суть неявных атрибутов в том, чтобы они выводились только в том случае, если у них есть значение. То есть по сути с помощью неявных атрибутов можно указать порядок, в котором должны выводится атрибуты, независимо от того, в каком порядке они были объявлены в аббревиатуре

[Alexeytyurin143]

Чуваки есть решение В конфиге vs code прописать такое "emmet.preferences": { "output.reverseAttributes": true }

[BISCVI]

В VS Code есть файл где хранятся все пользовательские настройки, называется settings.json вставляешь этот код: "emmet.preferences": { "output.reverseAttributes": true }, и атрибут "class" располагается впереди других атрибутов.

Было так: <img src="" alt="" class="logo__image"> Стало так: <img class="logo__image" src="" alt="">