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

随机推荐

安装 chardet ，出现ImportError: No module named setuptools
原因:在linux的机子上没有setuptools 可能此机子上的python版本过低 http://www.cnblogs.com/kkgreen/archive/2012/08/02/262042 ...
制作chm无搜索标签解决方法
chm无搜索标签解决方法: 1.hpp文件中设置Full-text search=Yes 2.下面[windows]有个数字设置为0x420, 网上普通流传的是0x20 === chm制作一般要三个文 ...
使用python通过selenium模拟打开chrome窗口报错出现 "您使用的是不受支持的命令行标记:--ignore-certificate-errors
#在程序前加上这段代码 from selenium import webdriver options = webdriver.ChromeOptions() options.add_experimen ...
算法练习1 用c#编写的一个判定一组数是否是有序的
//判定数组是否有序 //总的程序代码如下: using System; using System.Collections.Generic; using System.Linq; using Syst ...
学习记录 java 链表知识
01.import java.util.HashMap; 02.import java.util.Scanner; 03.import java.util.Stack; 04. 05./** 06. ...
devexpress中ASPxGridView控件初始化赋值
写在ASPxGridView中OnCellEditorInitialize="ASPxGridView_progoods_CellEditorInitialize" 事件中: / ...
check version cordova
cordova plugin add https://github.com/whiteoctober/cordova-plugin-app-version.git 这个插件很简单,但是要注意点的是:需 ...
dell ipmi sol
http://blog.arnoudvermeer.nl/post/52375062605/howto-setup-ipmi-sol-on-a-dell-r-series-server http:// ...
_config.json
{ "AUTH": "66D86F40DF42A6103C2B0C2F16E41472DABF0594C79859E5EF51E06B377215F3B464E3F0F3 ...
二十二、OGNL的一些其他操作
二十二.OGNL的一些其他操作投影 ?判断满足条件动作类代码: ^ $ public class Demo2Action extends ActionSupport { public ...

SublimeText插件Emmet的自定义模板

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

随机推荐

热门专题