在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中正确的功能来创建自定义片段？或者我是在错误地使用该功能。

- Samuel

---

这只是一个引号问题。将样式属性中的双引号更改为单引号即可。哇！问题解决了。 - Studocwho

嗯，那就是预先存在的答案所说的内容... - Mark

Answer 1

我在需要将长串代码转化为VS Code代码片段的情况下，找到了一个很好的解决方案。这个解决方案是 代码片段生成器应用。更好的是，它也支持Sublime和Atom选项。

- Samuel

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

- Mark

---

也许我的问题并没有反映出真正的问题，但我会尽力再次解释。电子邮件开发严重依赖跨越多行的表格，例如：https://codepen.io/reallygoodemails/pen/zjajvX。在这种情况下，VS Code如何适应这些长达100行的代码片段？ - Samuel

好的，我解决了你的“结果/期望结果”问题。你想知道代码片段是否是处理“大量代码行”的正确方式？我会说不是。可以查看任务运行器和HTML部分，其中将HTML代码块注入到目标HTML文件中。 - Mark

你回答了我的问题，我想在某种程度上是正确的。但你没有解释一个情况，即如何处理可能跨越100行的多行代码。 - Samuel

Answer 3

我相信Visual Studio Code中的Emmet功能可以非常有帮助，也非常强大，能够用最少的打字生成HTML代码片段。

比如说，我正在创建Tic-Tac-Toe游戏，需要在我的HTML文件中创建一个大小为3x3的表格。我正在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 的预览，如下面的快照所示：

- RBT

---

Emmet 不提供自定义代码片段。请阅读 OP。 - Millhorn