SublimeText插件Emmet的自定义模板

在前端界,作为快速生成代码的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的自定义模板的更多相关文章

sublime text插件emmet自定义模板
首先要找到 snippets.json这个文件,路径是preferences>browse packages,看看有没有emmet目录. 如果没有,可能是您没有安装emmet插件,或者您安装了但 ...
Sublime Text3—常用插件Emmet
摘要安装请看上一篇Sublime Text-安装,和sublime自带快捷键一起用,写html简直快的飞起. 下面整理的是常用的,完整的可看emmet官方文档. 一.生成标签 1.快速生成文档结构 ...
Django自定义模板
定义simple_tag步骤一.创建templatetags文件首先在app下创建templatetags文件:名字不许叫这个,不能改变. 二.在文件中创建一个py文件文件名自定义三.在创建的 ...
学习CodeIgniter框架之旅（一）自定义模板目录
在常用的框架本身都已经做好了分层和目录结构,但这在很多时候不满足项目的需求甚至在某些情况下变得不合理,因此很多时候需要自定义目录结构,在此就看看如果在CodeIgniter框架中自定义模板目录: 在C ...
.NET/ASP.NETMVC 深入剖析 Model元数据、HtmlHelper、自定义模板、模板的装饰者模式（三）
阅读目录: 7.HtmlHelper.HtmlHelper<T>中的ViewModel的类型推断 8.控制ViewModel中的某个属性的呈现(使用PartialView部分视图细粒度控制 ...
使用requireJS，backboneJS，和underscoreJS完成自定义模板封装
使用requireJS,backboneJS,和underscoreJS完成自定义模板封装原来的代码当我们进行一个列表的数据填充的时候,是这样做的: //获取美食列表 function getFo ...
DISCUZ 自定义模板
DISCUZ 自定义模板模板安装和维护安装新模板将模板template打包放在对应目录:template/ 后台 -> 界面 -> 风格管理 , 安装模板后台 -> 界面 - ...
谈谈yii2-gii如何自定义模板
作者:白狼出处:http://www.manks.top/article/yii2_gii_custom_template本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位 ...
SharePoint 2013 自定义模板页后在列表里修改不了视图
前言最近系统从2010升级至2013,有自定义模板页.突然发现在列表中切换不了视图,让我很费解. 我尝试过以下解决方案: 去掉自定义css 去掉自定义js 禁用所有自定义功能结果都没有效还是一样的 ...

随机推荐

OC基础(21)
Foundation框架介绍 NSString基本概念字符串读写字符串比较字符串搜索字符串截取字符串替换字符串与路径字符串与基本数据类型转换 *:first-child { margin ...
Kung fu
1. originPeople in Primitive society(原始社会)in order to survive,they have to hunt for food efficiently ...
Laxcus大数据管理系统2.0（2）- 第一章基础概述 1.1 基于现状的一些思考
第一章基础概述 1.1 基于现状的一些思考在过去十几年里,随着互联网产业的普及和高速发展,各种格式的互联网数据也呈现爆炸性增长之势.与此同时,在数据应用的另一个重要领域:商业和科学计算,在各种新兴 ...
opencv_协方差矩阵与协方差讲解
统计学的基本概念学过概率统计的孩子都知道,统计里最基本的概念就是样本的均值,方差,或者再加个标准差.首先我们给你一个含有n个样本的集合,依次给出这些概念的公式描述,这些高中学过数学的孩子都应该知道吧 ...
解决spawn-fcgi child exited with: 1
spawn-fcgi -d /data/web/ad/ -f /data/web/ad/code.py -a -P /data/openresty_81/nginx/pid/ad.pid 出错的时候请 ...
Mac 平台下功能强大的Shimo软件使用指南
年初自从换了MAC工作站后,彻底享受了Apple产品给我们带来的完美体验,可能是刚转过来不适应,在访问网络设备时觉得远程连接不方便,例如ssh,vpn登陆都不是很方便,后来又安装了openvpnfor ...
百度编辑器Ueditor自动换行，添加<p>的问题
百度编辑器Ueditor其实蛮好用的,后来使用了一段时间发现,每次打开后又保存,发现都会往内容的前后都增加一个空白的<p></p>.刚开始以后是百度编辑器的问题,找了很长时间也 ...
Qt事件处理机制
研一的时候开始使用Qt,感觉用Qt开发图形界面比MFC的一套框架来方便的多.后来由于项目的需要,也没有再接触Qt了.现在要重新拾起来,于是要从基础学起. Now,开始学习Qt事件处理机制. 先给出原文 ...
检查字符串长度检查字符串是否为空用正则表达式验证出版物的ISBN号用正则表达式验证邮证编码验证字符串中是否含有汉字
<?php /** * 常用的正则表达式来验证信息.如:网址邮箱手机号等 */ class check { /** * 正则表达式验证email格式 * * @param string $s ...
trap在shell中捕捉信号
一.trap捕捉到信号之后,可以有三种反应方式:(1)执行一段程序来处理这一信号(2)接受信号的默认操作(3)忽视这一信号二.trap对上面三种方式提供了三种基本形式:第一种形式的trap命令在sh ...

SublimeText插件Emmet的自定义模板

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

随机推荐

热门专题