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 禁用所有自定义功能结果都没有效还是一样的 ...

随机推荐

程序员必备：Oracle日常维护命令
上一篇讲了Linux的日常维护命令,这篇讲讲Oracle的日常维护命令.工作中需要使用Oracle数据库的童鞋们,相信或多或少都需要对Oracle做一些基本的维护操作,例如导入导出总该有吧?( ...
将tomcat设为开机自动启动
参考网址:http://jingyan.baidu.com/article/a65957f4b12b8724e77f9b5a.html 方法一 1.Tomcat的使用之前必须得Jre,至于是怎么装的, ...
LoadRunner界面分析（三）
1.Anaysis基础知识 2.Analysis 报告 3.Analysis分析基础 4.IP欺骗需要使用ip欺骗的原因:1.当某个IP的访问过于频繁,或者访问量过大是,服务器会拒绝访问请求,这时候 ...
关于AS3获取当前URL和浏览器信息
原文链接: http://www.baidu.com/link?url=8-mS_wTlQi5MGvLQ8Oqf34wA-glS4roi0AmMswussY3kpkXoVUnOQQOaj-NGf2Ik ...
only one is important
今天早上还是去了图书馆,看了一早上的hello world(intel opencl),清楚了程序编写的基本流程,但是,仍和以前一样,貌似看懂了,其实什么也不会,没有发现什么问题.中午,回来取了我的笔 ...
phpDoc使用说明
技术文档可以使人们更好得使用他人的代码库,然而,作为开发人员,编写文档确是一件让人头疼的事情.PHPDoc是PHP文档注释的一个标准,它可以实现为代码生成API文档. PHPDoc注释规范: 块注释的 ...
学习记录彻底搞清 C#中a++与++a的区别
首先 a++和++a 的定义:看个例子A: a=5; b=++a; // 相当于a=a+1;b=a; 结果是a=6,b=6B: a=5; b=a++; // 相当于b=a;a=a+1; 结果是a=6, ...
ASP.NET MVC4 学习系统三（控制器Controller）
控制器(Controllers) 在MVC架构模式的上下文里,控制器响应用户的输入(比如,用户点击“保存”按钮),并协调模型.视图以及(经常)数据访问层.在ASP.NET MVC程序里,控制器就 ...
poj2503 哈希
这题目主要是难在字符串处理这块. #include <stdio.h> #include <string.h> #include <stdlib.h> #defin ...
SQL更新表的字段
Oracle: alter table CAPIAGENTLOG modify(clientcode nvarchar2()) SQL Server: alter table CAPIAGENTLOG ...

SublimeText插件Emmet的自定义模板

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

随机推荐

热门专题