在 VS Code 中创建自定义 HTML 片段

Question

我正在从 Dreamweaver （我知道它很糟糕，但它有它的用途） 从电子邮件开发迁移到 VS Code。 Dreamweaver 提供的一个方便的功能是使用自定义 sn-ps。 VS Code 也提供了custom snippets，但它与Dreamweaver snippets 的工作方式不同，而且我所看到的需要更多的努力。下面是 VS Code 中发生的事情。

VS Code 自定义 sn-p

{
        "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 中的正确功能来创建客户 sn-ps？或者我使用的功能不正确。

Answer 1

我相信 Visual Studio Code 中的 Emmet feature 非常有用，而且它在生成 HTML 代码 sn-p 时也非常强大。

假设我正在创建Tic-Tac-Toe game，我需要在我的 HTML 文件中创建一个大小为 3*3 的表格。我正在 Visual Studio Code 中编辑 HTML 文件。这是我在编辑器中写的：

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 2

因此，在需要将长行代码转换为 VS 代码片段的情况下，我找到了一个很好的解决方案。这个解决方案是snippet generator app。很棒的是它也有 Sublime 和 Atom 的选项。

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>"