在前端界,作为快速生成代码的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. php 分享两种给图片加水印的方法

    本文章向码农们介绍 php 给图片加水印的两种方法,感兴趣的码农可以参考一下本文章的源代码. 方法一:PHP最简单的加水印方法 <?php // http://www.manongjc.com ...

  2. Hibernate高级查询QBC条件设置——Restrictions用法 引自：http://www.cnblogs.com/evon168/archive/2010/10/29/1863059.html

    方法说明 方法 说明 Restrictions.eq ＝ Restrictions.allEq 利用Map来进行多个等于的限制 Restrictions.gt > Restrictions.ge ...

  3. HDU 4292 Food

    Food Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  4. Android的消息处理机制，handler，message，looper（一）

    当应用程序启动时,Android首先会开启一个主线程(也就是UI线程),主线程为管理界面中的UI控件.在程序开发时,对于比较耗时的操作,通常会为其开辟一个单独的线程来执行,以尽可能减少用户的等待时间. ...

  5. Loadrunner性能指标分析

    Transactions(用户事务分析)----用户事务分析是站在用户角度进行的基础性能分析. Transation Sunmmary(事务综述)----对事务进行综合分析是性能分析的第一步,通过分析 ...

  6. 普通session vs MemcachedSession vs RedisSession

    一.普通session(数据存储在内存中) #!/usr/bin/env python # -*- coding:utf-8 -*- from hashlib import sha1 import o ...

  7. USACO Section 2.4 回家 Bessie Come Home

    题目描述 现在是晚餐时间,而母牛们在外面分散的牧场中. 农民约翰按响了电铃,所以她们开始向谷仓走去. 你的工作是要指出哪只母牛会最先到达谷仓(在给出的测试数据中,总会有且只有一只最快的母牛). 在挤奶 ...

  8. startUML常用的组合片段

    1.  常用的组合片段 片段类型 名称 说明 Opt 选项 包含一个可能发生或可能不发生的序列. 可以在临界中指定序列发生的条件. Alt 抉择 包含一个片段列表,这些片段包含备选消息序列. 在任何场 ...

  9. java基础回顾(四)——锁机制

    关键字Synchronized 1.对于同步的方法或者代码块来说,必须获得对象锁才能够进入同步方法或者代码块进行操作: 2.如果采用method级别的同步,则对象锁即为method所在的实例对象,如果 ...

  10. Solarwinds Orion NPM实战视频演示

    Orion Network Performance Monitor是全面的带宽性能监控和故障管理软件,能监控并收集来自路由器.交换机.服务器和其他SNMP设备中的数据,您可以直接从Web浏览器上观察您 ...