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

Question

我正在远离 Dreamweaver （我知道它很糟糕，但它确实有用） 用于电子邮件开发到 VS 代码。 Dreamweaver 提供的一项便利功能是使用自定义片段。 VS Code 提供了 custom snippets too but it works differently to 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

这只是你的报价，试试：

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

Answer 2

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

Answer 3

我相信 Emmet feature 在 Visual Studio 代码中非常有用，它在生成 HTML 代码片段方面也非常强大，只需最少的输入。

比方说，我正在创建 Tic-Tac-Toe game，我需要在 HTML 文件中创建大小为 3*3 的 table。我正在 Visual Studio 代码中编辑 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 的外观，如下面的快照所示：

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

Creating custom HTML snippets in VS Code

html

dreamweaver

code-snippets

visual-studio-code