在前端界,作为快速生成代码的Emmet插件相当给力。最近在学bootstrap，需要频繁生成html头文件，我就想着自定义模板。国内只有基础教程，只好自己读英文文档了。

Emmet国内基础教程地址：

http://www.w3cplus.com/tools/emmet-cheat-sheet.html

http://blog.wpjam.com/m/emmet/

读了一些发现一个解决方案，原文是自定义emmet模板。

工具栏打开Preferences -> Package Settings -> Emmet -> Setting - Default菜单(我这里是line 101)，这个是参考

// Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json

"snippets": {

    // "html": {

    //  "abbreviations": {

    //      "example": "<div class='example' title='Custom element example'>"

    //  }

    // }

}

用户配置文件中修改。我们打开Preferences -> Package Settings -> Emmet -> Setting - User文件，添加如下代码：

{

    // Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json

    "snippets": {

        "html": {

            "abbreviations": {

                "example": "<div class='example' title='Custom element example'>",

                "mydoc": "html>(head>meta[charset='utf-8']+title{${1:文档标题}})+body",

                "!!": "!!!+mydoc[lang='zh-Hans']"

            }

        }

    }

}

注：

　　1.example是快捷键，后面是生成的内容

　　2.引用mydoc的内容 mydoc[lang='zh-Hans']中可以指定语言

自定义模板

　　可写入自己需要的css,js文件(库)

代码如下:

{

    // Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json

    "snippets": {

        "html": {

            "snippets": {

                "myfavicon": "<!-- favicon，可更改图片类型 -->\n<link rel=\"shortcut icon\" type=\"image/ico\" href=\"/favicon.ico\" />\n",

                "mycompat": "<!-- 优先使用 IE 最新版本和 Chrome -->\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\" />\n",

                "360compat": "\n<!-- 360 使用Google Chrome Frame -->\n<meta name=\"renderer\" content=\"webkit\">\n",

                "mykeywords": "<!-- SEO页面关键词 -->\n<meta name=\"keywords\" content=\"your keywords\">\n",

                "mydesc": "<!-- SEO页面描述 -->\n<meta name=\"description\" content=\"your description\">\n",

                "myviewport": "<!-- 开启响应式 -->\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",

            },

            "abbreviations": {

                "example": "<div class='example' title='Custom element example'>",

                "mydoc": "html>(head>meta[charset='utf-8']+title{${1:文档标题}}+360compat+mycompat+myviewport+mykeywords+mydesc+myfavicon)+body>jq+u",

                "!!": "!!!+mydoc[lang='zh-cmn-Hans']",

                "$": "<script src=\"http://libs.baidu.com/jquery/1.9.0/jquery.js\"></script>",

                "jq": "<script src=\"http://libs.baidu.com/jquery/1.9.0/jquery.js\"></script>",

                "u": "<script src=\"http://libs.baidu.com/underscore/1.3.3/underscore.js\"></script>",

                "_": "<script src=\"http://libs.baidu.com/underscore/1.3.3/underscore.js\"></script>"

            }

        }

    }

}

snippets是指head头部的片段

addbreviations是body内的片段

在mydoc中引用要使用的片段，最终!!引用mydoc，如果需要多套模板，可按需定制。

生成如下代码：

<!DOCTYPE html>

<html lang="zh-cmn-Hans">

<head>

    <meta charset="utf-8">

    <title>文档标题</title>

    <!-- 360 使用Google Chrome Frame -->

    <meta name="renderer" content="webkit">

    <!-- 优先使用 IE 最新版本和 Chrome -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <!-- 开启响应式 -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- SEO页面关键词 -->

    <meta name="keywords" content="your keywords">

    <!-- SEO页面描述 -->

    <meta name="description" content="your description">

    <!-- favicon，可更改图片类型 -->

    <link rel="shortcut icon" type="image/ico" href="/favicon.ico" />

</head>

<body>

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

    <script src="http://libs.baidu.com/underscore/1.3.3/underscore.js"></script>

</body>

</html>

下面是本人定制的模板：

{

    // Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json

    "snippets": {

        "html": {

            "snippets": {

                "myfavicon": "<!-- favicon，可更改图片类型 -->\n<link rel=\"shortcut icon\" type=\"image/ico\" href=\"/favicon.ico\" />\n",

                "bscss3":"<link rel=\"stylesheet\" href=\"http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css\">",

                "mycompat": "<!-- 优先使用 IE 最新版本和 Chrome -->\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\" />\n",

                "360compat": "\n<!-- 360 使用Google Chrome Frame -->\n<meta name=\"renderer\" content=\"webkit\">\n",

                "mykeywords": "<!-- SEO页面关键词 -->\n<meta name=\"keywords\" content=\"your keywords\">\n",

                "mydesc": "<!-- SEO页面描述 -->\n<meta name=\"description\" content=\"your description\">\n",

                "myviewport": "<!-- 开启响应式 -->\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",

            },

            "abbreviations": {

                "mydoc": "html>(head>meta[charset='utf-8']+title{${1:文档标题}}+mycompat+myviewport+mykeywords+mydesc+bscss3)+body>bsjq2+bs3",

                "!!bs": "!!!+mydoc[lang='zh-cmn-Hans']",

                "bsjq2":"<script src=\"http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js\"></script>",

                "bs3":"<script src=\"http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js\"></script>"

            }

        }

    }

}

生成如下代码：

<!DOCTYPE html>

<html lang="zh-cmn-Hans">

<head>

    <meta charset="utf-8">

    <title>文档标题</title>

    <!-- 优先使用 IE 最新版本和 Chrome -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <!-- 开启响应式 -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- SEO页面关键词 -->

    <meta name="keywords" content="your keywords">

    <!-- SEO页面描述 -->

    <meta name="description" content="your description">

    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">

</head>

<body>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</body>

</html>

注：

　　1.插入代码时，编辑器没有json一项，我选的XML

　　2.个人并不喜欢重写(抄袭)别人的代码，只是emmet自定义模板我找了好久，不容易，希望给需要的朋友一点帮助。

　　3.如有其他问题请在下方留言。

SublimeText插件Emmet的自定义模板的更多相关文章

  1. sublime text插件emmet自定义模板

    首先要找到 snippets.json这个文件,路径是preferences>browse packages,看看有没有emmet目录. 如果没有,可能是您没有安装emmet插件,或者您安装了但 ...

  2. Sublime Text3—常用插件Emmet

    摘要 安装请看上一篇Sublime Text-安装,和sublime自带快捷键一起用,写html简直快的飞起. 下面整理的是常用的,完整的可看emmet官方文档. 一.生成标签 1.快速生成文档结构 ...

  3. Django自定义模板

    定义simple_tag步骤 一.创建templatetags文件 首先在app下创建templatetags文件:名字不许叫这个,不能改变. 二.在文件中创建一个py文件 文件名自定义 三.在创建的 ...

  4. 学习CodeIgniter框架之旅（一）自定义模板目录

    在常用的框架本身都已经做好了分层和目录结构,但这在很多时候不满足项目的需求甚至在某些情况下变得不合理,因此很多时候需要自定义目录结构,在此就看看如果在CodeIgniter框架中自定义模板目录: 在C ...

  5. .NET/ASP.NETMVC 深入剖析 Model元数据、HtmlHelper、自定义模板、模板的装饰者模式（三）

    阅读目录: 7.HtmlHelper.HtmlHelper<T>中的ViewModel的类型推断 8.控制ViewModel中的某个属性的呈现(使用PartialView部分视图细粒度控制 ...

  6. 使用requireJS，backboneJS，和underscoreJS完成自定义模板封装

    使用requireJS,backboneJS,和underscoreJS完成自定义模板封装 原来的代码 当我们进行一个列表的数据填充的时候,是这样做的: //获取美食列表 function getFo ...

  7. DISCUZ 自定义模板

    DISCUZ 自定义模板 模板安装和维护 安装新模板 将模板template打包放在对应目录:template/ 后台 -> 界面 -> 风格管理 , 安装模板 后台 -> 界面 - ...

  8. 谈谈yii2-gii如何自定义模板

    作者:白狼 出处:http://www.manks.top/article/yii2_gii_custom_template本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位 ...

  9. SharePoint 2013 自定义模板页后在列表里修改不了视图

    前言 最近系统从2010升级至2013,有自定义模板页.突然发现在列表中切换不了视图,让我很费解. 我尝试过以下解决方案: 去掉自定义css 去掉自定义js 禁用所有自定义功能 结果都没有效还是一样的 ...

随机推荐

  1. 菜鸟-手把手教你把Acegi应用到实际项目中(6)

    在企业应用中,用户的用户名.密码和角色等信息一般存放在RDBMS(关系数据库)中.前面几节我们采用的是InMemoryDaoImpl,即基于内存的存放方式.这节我们将采用RDBMS存储用户信息. Us ...

  2. maven skip tests

    DskipTests=true is short form of -Dmaven.test.skip=true

  3. 网络安全学习和CTF必不可少的一些网站

    [转载备用] 原文地址  http://blog.csdn.net/ida0918/article/details/52730662 http://www.sec-wiki.com/skill/ 安全 ...

  4. 翻译：wiki中的business logic词条

    Business logic 业务逻辑 From Wikipedia, the free encyclopedia 来自Wikipedia,自由的百科全书 In computer software, ...

  5. Android开发-API指南-设备兼容性

    Device Compatibility 英文原文:http://developer.android.com/guide/practices/compatibility.html 采集日期:2014- ...

  6. Android7.0 Phone应用源码分析（一） phone拨号流程分析

    1.1 dialer拨号 拨号盘点击拨号DialpadFragment的onClick方法会被调用 public void onClick(View view) { int resId = view. ...

  7. 业务gis 搭建一个skyline 的js模板 （一）

    刚刚我们说的是二维的系统,如果要展示三维,我们是不是也需要这样,答案是必须的,是一定要,如果你是基于skyline做三维开发,业务开发人员要去搞那套api估计要吐血,所以我们必须得封装起来,这里不介绍 ...

  8. python分析log

    最近做的一个项目,系统log下会生成如下的log(部分): [-- ::] Processing File transfer configured from ship to shore.... [-- ...

  9. Java中几种常见的排序方式

    冒泡排序是一种简单的排序算法.它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成.这个算法的名字 ...

  10. Alfresco安装与配置图解

    Alfresco安装与配置图解 Alfresco是一款开源的企业内容管理系统(ECM),为企业提供了日常的文档管理.工作流(可以和企业目前的OA协同接合使用).工作记录管理.知识管理.网络内容管理.图 ...