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

【问题标题】：How to configure the Emmet abbreviation for doc for a customized html boilerplate?如何为自定义的 html 样板配置 doc 的 Emmet 缩写？
【发布时间】：2013-11-29 08:13:32
【问题描述】：

我将 Emmet 与 Sublime Text 2 一起使用，并尝试以特定方式自定义 doc 的缩写。这里是Emmet's documentation。

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>？
如何删除lang="en"标签后的所有lang="en"属性？
如何将默认样式路径更改为css/style.css？
如何保持上面我想要的结果中显示的空白？

【问题讨论】：

标签： html boilerplate emmet

【解决方案1】：

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

【讨论】：

【解决方案2】：

获取基本的 HTML5 模板

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

您需要知道您的“扩展缩写”键是什么：

在 Atom 中：TAB
在括号中：command+alt+enter (Mac) 或 CTRL+alt+enter (Win & Linux)

1) 确保您的文本编辑器设置为 HTML。用 hbs mustache 进行编辑是行不通的，因此您可能希望先使用暂存器 html 文件来创建模板

2) 首先输入 ! 然后“扩展缩写”键

3) 如果没有创建视口

使用 meta:vp 插入“视口”，然后使用“扩展缩写”键
删除 'user-scalable=no' 和 minimum-scale maximum-scale 看起来像 Googles <meta name=viewport content="width=device-width, initial-scale=1">

4) 使用 link:css 然后 'expands abbreviation' 键插入样式和其他链接

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

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

【讨论】：

命令 html:5 在 Emmet 中有一个别名 !。如果您只是输入一个感叹号并展开它，您将获得与html:5 相同的模板。

【解决方案3】：

我还没有测试过，但是您是否尝试过在部分前面加上转义码，例如标签\t 来修复输出的格式？

【讨论】：

嗨@knice。我最近一直在做的只是硬编码我想要的模板，而不是使用 Emmet 的动态语法，我从来没有像我想要的那样工作。此外，我想要的 html 样板模板已从上面更改。我最近一直在使用的东西看起来像这样：gist.github.com/brianzelip/af721d3c5e9a03ff417b