Создание пользовательских фрагментов HTML в VS Code

Question

Я нахожусь в процессе перехода от Dreamweaver (я знаю, что это ужасно, но он использует) для разработки электронной почты для VS Code.Одна из удобных функций Dreamweaver - использование пользовательских фрагментов.VS Code предлагает пользовательских фрагментов , но он работает иначе, чем Dreamweaver snippets и требует немного больше кропотливой работы из того, что я вижу.Ниже описано, что происходит в VS Code.

Пользовательский фрагмент кода VS

{
        "Preheader": {
            "prefix": "preheader",
            "body": [
                "<span style="display:none !important; mso-hide: all; color:#FEE4DC; max-height: 0px; overflow: hidden;">text goes here</span>"
            ],
            "description": "preheader for email"
    }
}

Результат

<span style=

Ожидаемый результат

<span style="display:none !important; mso-hide: all; color:#FEE4DC; max-height: 0px; overflow: hidden;">text goes here</span>

Кажется, мне нужно уйти, чтобы получить ожидаемый результат?Это было бы немного обыденно, так как в процессе разработки электронной почты у меня могли быть массивные строки кода :(

Использую ли я правильную функцию в VS Code для создания фрагментов клиента? Или неправильно использую функцию.

Answer 1

Итак, я нашел хорошее решение моей проблемы в ситуации, когда длинные строки кода нужно было бы перевести в фрагмент кода VS.Это решение Приложение генератора фрагментов .Что замечательно, так это то, что он также имеет опции для Sublime и Atom.

Answer 2

Я полагаю, Функция Emmet в коде Visual Studio может быть очень полезна, и она очень эффективна при создании фрагмента кода HTML с минимальным набором текста.

Допустим, я создаю Крестики-нолики , где мне нужно создать таблицу размером 3 * 3 в моем HTML-файле.Я редактирую файл HTML в коде Visual Studio.Вот что я пишу в редакторе:

table>tr*3>td*3

Теперь нажмите Tab.Вот то, что вы получаете в мгновение ока:

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Даже при вводе emmet вы также можете увидеть предварительный просмотр того, как будет выглядеть HTML, как показано на снимке ниже:

Answer 3

Это просто ваши цитаты, попробуйте:

"<span style='display:none !important; mso-hide: all; color:#FEE4DC; max-height: 0px; overflow: hidden;'>text goes here</span>"

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

Или, если вы хотите использовать двойные кавычки в html, вы можете избежать внутренних кавычек, таких какитак:

"<span style=\"display:none !important; mso-hide: all; color:#FEE4DC; max-height: 0px; overflow: hidden;\">text goes here</span>"