Visual Studio Code (Emmet): добавить закрывающий тег

Question

Так что я бы хотел, чтобы Visual Studio Code (с помощью Emmet) мог преобразовать что-то вроде

.wrapper

в это

<div class="wrapper"></div><!-- /.wrapper -->

Я полагаю, что есть решения для того, как сделать это в Sublime Text и Webstorm, поэтому было бы здорово узнать, есть ли такое для кода Visual Studio. Спасибо!

Answer 1

Вы знаете, что вы можете просто добавить |c в конец вашего .wrapper, чтобы получить комментарий, добавленный в конце, например:

<div class="wrapper"></div>
<!-- /.wrapper -->

К сожалению, это ставит завершающий комментарий на новую строку.Если это неприемлемо, см. удаление разрыва строки перед комментарием и см. фильтр комментариев emmet для изменения фильтра для комментариев в vscode.

И установите это в своих настройках.json:

"emmet.preferences": {
    "filter.commentAfter": "<!-- /[#ID][.CLASS] -->"
}

Я только что удалил символ новой строки \ n из примера фильтра комментариев.

В качестве альтернативы, это можно сделать довольно легко с помощью сниппета (в вашем файле html.json snippets):

"emmet with comment": {
    "prefix": ".",
    "body": [
        "<div class='$1'>$2</div><!-- /.$1 -->"
    ],
    "description": "expand with comment"
}

Затем введите . , нажмите tab и введите свое имя класса, оно войдет в оба $ 1. Снова нажмите , чтобы добраться до позиции курсора $ 2.[Возможно, вам придется нажать escape , если вы получите предложения после ввода имени класса.]

Чтобы использовать завершение вкладки, измените его в своих настройках:

  // When enabled, Emmet abbreviations are expanded when pressing TAB.
 "emmet.triggerExpansionOnTab": false,

к истине.