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



我正在使用带有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>

我的问题是:

  1. 如何完全删除</html>
  2. 如何删除<html>标签后的所有lang="en"属性?
  3. 如何将默认样式路径更改为css/style.css
  4. 如何保持上面我想要的结果中显示的空白?

获取基本的 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 插件的首选项中更改"展开缩写"键设置

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

我还没有测试过,但是您是否尝试过在部分前面加上转义码,例如选项卡t来修复输出的格式?

相关内容

最新更新