blocks|key|2442785|text|这只是你的报价，试一下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2442786|"<span+style='display:none+!important;+mso-hide:+all;+color:#FEE4DC;+max-height:+0px;+overflow:+hidden;'>text+goes+here"|code-block|syntax|javascript|2442787|注意双引号和单引号的交替。而且，看起来你也不能以相反的方式使用它(外部的单引号=否)。|2442788|或者，如果您想在html中使用双引号，可以转义内部引号，如下所示：|2442789|"<span+style=\"display:none+!important;+mso-hide:+all;+color:#FEE4DC;+max-height:+0px;+overflow:+hidden;\">text+goes+here"|2442790|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

It is just your quotes, try:

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

Note the alternation of double and single quotes. Also it doesn't seem as if you can have it the other way around (single quotes around the outside = no).

Or, if you want double quotes in your html, you can escape the internal quotes like so:

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

blocks|key|2442805|text|因此，我找到了一个很好的解决方案，在需要将长行代码转换为VS代码片段的情况下解决我的问题。这个解决方案是snippet+generator+app。最棒的是它也有Sublime和Atom的选项。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2442806|entityMap|0|LINK|mutability|MUTABLE|url|https://snippet-generator.app/^0|1G|L|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

So I found a nice solution to my problem in a situation where long lines of code would need to translate into a VS Code Snippet. This solution is <a href="https://snippet-generator.app/" rel="noreferrer">snippet generator app</a>. Whats great is that it also has options for Sublime and Atom too.

blocks|key|5458|text|我相信Visual+Studio+Code中的Emmet+feature可以非常有帮助，它在生成HTML代码片段时也非常强大，只需最少的输入。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5459|假设，我正在创建Tic-Tac-Toe+game，其中我需要在我的HTML文件中创建一个大小为3*3的表。我正在Visual+Studio代码中编辑HTML文件。下面是我在编辑器中写的内容：|5460|table>tr*3>td*3|code-block|syntax|javascript|5461|现在按tab键。这是你在瞬间得到的结果：|5462|<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>|5463|即使在输入emmet时，您也可以看到HTML的预览，如下面的快照所示：|5464|​|5465|📷|atomic|5466|5467|entityMap|0|LINK|mutability|MUTABLE|url|https://code.visualstudio.com/docs/editor/emmet|1|https://playtictactoe.org/|2|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/96345976e1cc416d67462f0726316649.png|imageAlt^0|N|D|0|0|8|G|1|0|0|0|0|0|0|0|1|2|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@$A|1D|B|1E|1|1F]]|C|$]]|$1|D|3|E|5|6|7|1G|8|@]|9|@$A|1H|B|1I|1|1J]]|C|$]]|$1|F|3|G|5|H|7|1K|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1L|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|1M|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|1N|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|1O|8|@]|9|@]|C|$]]|$1|S|3|T|5|U|7|1P|8|@]|9|@$A|1Q|B|1R|1|1S]]|C|$]]|$1|V|3|R|5|6|7|1T|8|@]|9|@]|C|$]]|$1|W|3|-4|5|6|7|1U|8|@]|9|@]|C|$]]]|X|$Y|$5|Z|10|11|C|$12|13]]|14|$5|Z|10|11|C|$12|15]]|16|$5|17|10|18|C|$19|1A|1B|-4]]]]

I believe <a href="https://code.visualstudio.com/docs/editor/emmet" rel="nofollow noreferrer">Emmet feature</a> in Visual Studio Code can be very helpful and it is very powerful too in generating HTML code snippet with bare minimum typing.

Let's say, I'm creating <a href="https://playtictactoe.org/" rel="nofollow noreferrer">Tic-Tac-Toe game</a> where I need to create a table of size 3*3 in my HTML file. I'm editing the HTML file in Visual Studio Code. Here is what I write in the editor:

<pre><code>table&gt;tr*3&gt;td*3
</code></pre>

Now press tab. Here is what you get in a flicker of second:

<pre><code>&lt;table&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;/td&gt;
 &lt;td&gt;&lt;/td&gt;
 &lt;td&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;/td&gt;
 &lt;td&gt;&lt;/td&gt;
 &lt;td&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;/td&gt;
 &lt;td&gt;&lt;/td&gt;
 &lt;td&gt;&lt;/td&gt;
 &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

Even while typing the emmet, you also get to see the preview of how the HTML would look like as shown in the snapshot below:

<a href="https://i.stack.imgur.com/4UtsH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4UtsH.png" alt="enter image description here"></a>

I'm in the process of moving away from Dreamweaver (I know its terrible but it has it uses) for email development to VS Code. One handy feature Dreamweaver offered was the use of custom snippets. VS Code offers <a href="https://code.visualstudio.com/docs/editor/userdefinedsnippets" rel="nofollow noreferrer">custom snippets</a> too but it works differently to <a href="https://helpx.adobe.com/dreamweaver/using/reuse-code-with-snippets.html" rel="nofollow noreferrer">Dreamweaver snippets</a> and requires a little more hard work from what I can see. Below is what is happening in VS Code.

VS Code custom snippet

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

Result

<pre><code>&lt;span style=
</code></pre>

Expected result

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

It seems I have to do some escaping to get the expected result? This would be a little mundane as I could have massive lines of code in my email development process :( 

Am I using the correct feature in VS Code to create customer snippets? or am using the feature incorrectly.

Creating custom HTML snippets in VS Code

Visual Studio

我正在从Dreamweaver (我知道它很糟糕，但它有它的用途)迁移到VS代码的电子邮件开发的过程中。Dreamweaver提供的一个方便的功能是使用自定义代码片段。VS代码也提供了，但它的工作方式与不同，从我所看到的情况来看，它需要更多的努力。下面是VS Code中正在发生的事情。与代码自定义代码片段{      ...

问在VS代码中创建自定义HTML代码片段
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在VS代码中创建自定义HTML代码片段EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在VS代码中创建自定义HTML代码片段
EN