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

Question

我正在从Dreamweaver （我知道它很糟糕，但它有它的用途）转移到 VS Code 的电子邮件开发过程中。Dreamweaver 提供的一项方便的功能是使用自定义片段。VS Code 也提供自定义代码段，但它的工作方式与Dreamweaver代码段不同，并且从我所见，需要付出更多努力。以下是 VS Code 中发生的事情。

VS Code 自定义代码段

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

这只是你的报价，尝试：

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