SublimeText插件Emmet的自定義模板

時間 2020-06-03

標籤 sublimetext 插件 emmet 自定義模板简体版

原文原文鏈接

在前端界,做爲快速生成代碼的Emmet插件至關給力。最近在學bootstrap，須要頻繁生成html頭文件，我就想着自定義模板。國內只有基礎教程，只好本身讀英文文檔了。css

Emmet國內基礎教程地址：html

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

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

讀了一些發現一個解決方案，原文是自定義emmet模板。css3

工具欄打開Preferences -> Package Settings -> Emmet -> Setting - Default菜單(我這裏是line 101)，這個是參考git

// 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文件，添加以下代碼：github

{
    // 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']"
            }
        }
    }
}

注：web

　　1.example是快捷鍵，後面是生成的內容chrome

　　2.引用mydoc的內容 mydoc[lang='zh-Hans']中能夠指定語言json

自定義模板

　　可寫入本身須要的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>