Как добавить БЭМ елемент с помощью emmet?

Question

[Yevhenii K]

Использую VS Code + emmet + bem.

Как видно с примера, когда я хочу добавить в уже существующий блок елемент с классом .card__inner, то вместо неого получаем блок с модификатором.
.card__inner+TAB ----> <div class="card card--inner"></div>

Как добавить елемент c классом .card__inner?

И второй вопрос, как добавлять коментарий с помощью |c для определенных тегов, а не для всех которые содержат класс или id?

Answer 1

[motr]

в settings дописать:

"emmet.syntaxProfiles": {
    "html": {
      "filters": "html, bem"
    }
  },
  "emmet.preferences": {
    "bem.elementSeparator": "__",
    "bem.modifierSeparator": "--",
    "bem.shortElementPrefix": "-",
    "lorem.defaultLang": "en"
  },

синтаксис такой:

По поводу второго вопроса, надо курить настройки emmet, а именно фильтры

filter.commentTrigger: - list of attributes that should trigger comment output. Default value is id, class

И в vscode, в "emmet.preferences": {} прописывать то, что вы хотите видеть в комменте
Например:

"emmet.preferences": {
    "filter.commentBefore": "<!-- [#ID][.CLASS] -->\n",
    "filter.commentAfter": "\n<!-- [#ID][.CLASS] end -->"
},

Ещё, чтобы не писать постоянно |c для вывода коммента, можно опять же дописать настройку:

"emmet.syntaxProfiles": {
    "html" : {
      "filters" : "html, c"
    }
},

Comments

[Yevhenii K]

В настройках все это прописано. Когда я создаю с помощью еммет блок и его елементы проблем нет, но когда мне нужно создать елемент в уже существующем блоке он выводит класс блок + модификатор. Тоесть, теперь каждое нижнее подчеркивание выводит класс блок+модификатор.

[motr]

Женя К, похоже это проблема самого vscode. сделал то же самое в саблайме, работает.
з.ы. как называется тема установленная у вас?

[Yevhenii K]

motr, Тоже проверил, это еще один баг emmet в VS code.

Тема An Old Hope Classic