我正在使用带有Sublime Text 2的Emmet,并尝试以特定方式自定义doc
的缩写。这是 Emmet 的文档。
Emmet的doc
可以通过从头开始一个新的html5页面时扩展!
字符来启动。以下是扩展!
字符时 Emmet 的默认输出:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
我正在尝试配置doc
以便它的输出是:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
<header>
</header>
<footer>
</footer>
<script src="js/"></script>
我的snippets.json
文件尝试所需的输出,如下所示:
{
"html": {
"abbreviations": {
"doc": "(html+meta[charset=UTF-8]+title{${1:Document}}+meta:vp+link:css)>header+footer+script:src"
}//abbreviations
}//html
}//root
但是输出很糟糕,如下所示:
<!doctype html>
<html lang="en"></html>
<meta charset="UTF-8" lang="en">
<title lang="en">Document</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" lang="en">
<link rel="stylesheet" href="style.css" lang="en">
<header lang="en"></header>
<footer lang="en"></footer>
<script src="" lang="en"></script>
我的问题是:
- 如何完全删除
</html>
? - 如何删除
<html>
标签后的所有lang="en"
属性? - 如何将默认样式路径更改为
css/style.css
? - 如何保持上面我想要的结果中显示的空白?
获取基本的 HTML5 模板
确保在文本编辑器中安装了 Emmet 包/插件(例如 Atom 或括号)
您需要知道您的"扩展缩写"键是什么:
-
在原子中:选项卡
-
括号中:command+alt+enter(Mac)或CTRL+alt+enter(Win和Linux)
1) 确保您的文本编辑器设置为 HTML。在说 hbs 胡子中编辑不起作用,所以您可能希望先使用暂存器 html 文件来创建模板
2)首先键入!
然后"扩展缩写"键
3) 如果未创建视口
-
插入"视口"与元:VP,然后"扩展缩写"键
-
删除"用户可扩展=否"和最小比例最大比例,使其看起来像谷歌
<meta name=viewport content="width=device-width, initial-scale=1">
4)使用link:css插入样式和其他链接,然后"扩展缩写"键
它有点"简单的西蒙",但它对我有用。
注意:您可以随时在 Emmet 插件的首选项中更改"展开缩写"键设置
- 您不应该删除
</html>
标签,您需要编写正确的缩写。像这样的东西:html>(head>meta[charset=UTF-8]+title{${1:Document}})+body>header+footer+script[src="js/"]
- 见上文
- 覆盖
link:css
缩写或仅使用link[href="..."]
- 使用
{$nl}
我还没有测试过,但是您是否尝试过在部分前面加上转义码,例如选项卡t
来修复输出的格式?