我想在SublimeText 2中为emmet制作自定义html代码缩写。例如,我可以使用link:css扩展为:
<link rel="stylesheet" href="style.css">
现在我想使用link:media扩展到:
<link rel="stylesheet" media="only screen and (min-width:000px) and
(max-width:000px)" href="style.css">
我以为我找到了解决方案的一部分:
C:\Users\Username\AppData\Roaming\Sublime Text 2\Packages\Emmet
并在此文件中:Emmet.sublime-settings,我在标题为“snippets”的部分下添加了此代码:{...
// can be improved
"html": {
"abbreviations": {
"link:mqm": "<link rel=\"stylesheet\" type=\"text/css\" media=\"only screen and (min-width:",
"mqx": "and (max-width:"
}
}
......但它不起作用。另外,我真的想要这样做:我想将“link:mqm”和“mqx”组合成一个缩写 - link:media - 当击中TAB一次时,将导致“min-width”之后,所以我可以放入第一个像素值,并在第二次点击TAB时,它将转到“max-width”之后,这样我就可以放入第二个像素值。
有人做过类似的事吗?
答案 0 :(得分:0)
好的,我找到了解决方案。
首先,在此位置有一个snippets.json文件:
C:\Users\Username\AppData\Roaming\Sublime Text 2\Packages\Emmet\emmet
它列出了所有缩写,所以我查看了“html”,然后我找到了“link:css”。这个我用作我自己代码片段的模板。
接下来,我在这个位置打开了文件Emmet.sublime-settings:
C:\Users\Username\AppData\Roaming\Sublime Text 2\Packages\Emmet
我发现“settings”部分实际上增加了(或者我应该说“覆盖”)前面提到的“settings.json”文件。现在在“设置”部分,我添加了以下代码:
"html": {
"abbreviations": {
"link:media": "<link rel=\"stylesheet\" type=\"text/css\" media=\"only screen and (min-width:${1:50}px) and (max-width:${2:500}px)\" href=\"${3:style}.css\" />"
}
},
......它就像我想要的那样工作。