Question

我正在使用Emmet和Sublime Text 2，我试图以特定的方式自定义doc的缩写。这是Emmet's documentation。

当从头开始新的html5页面时，可以通过扩展doc字符来启动Emmet的!。扩展!字符时，以下是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>？
如何删除lang="en"代码后的所有<html>属性？
如何将默认样式路径更改为css/style.css？
如何保持上面所需结果中显示的空白区域？

Answer 1

获取基本的HTML5模板

确保在文本编辑器中安装了Emmet软件包/插件（例如Atom或Brackets）

你需要知道你的'扩展缩写'键是什么：

：TAB
：命令+ alt +输入（Mac）或CTRL + alt +输入（Win＆amp; Linux）

1）确保您的文本编辑器设置为HTML。编辑说hbs小胡子不起作用，所以你可能希望使用暂存器html文件来创建模板

2）首先输入 ! 然后'展开缩写'键

3）如果未创建视口

使用 meta：vp 插入'viewport'然后'展开缩写'键
将'user-scalable = no'和最小比例最大比例删除为Googles <meta name=viewport content="width=device-width, initial-scale=1">

4）要使用 link：css 插入样式和其他链接，然后'展开缩写'键

它有点'简单的西蒙'，但它对我有用。

注意：您始终可以在Emmet插件的首选项中更改当时的“扩展缩写”键设置

Answer 2

您不应删除</html>标记，您需要编写正确的缩写。这样的事情：html>(head>meta[charset=UTF-8]+title{${1:Document}})+body>header+footer+script[src="js/"]
见上文
覆盖link:css缩写或只使用link[href="..."]
使用{$nl}

Answer 3

我还没有对它进行过测试，但您是否尝试使用转义码为这些部分添加前缀，例如标签\t来修复输出的格式？

如何为自定义的html样板配置doc的Emmet缩写？

3 个答案: