Sublime Text 插件 Emmet 自定义 html 模板

Emmet

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具。Emmet 自带的 HTML 模板不适合本地开发，我们需要自定义一套自己的模板。

扩展自定义配置

打开 Sublime Text软件，菜单栏选择【Preferences - Package settings - Emmet - Settings User】，如果该文件为空，则可以直接粘贴下面的代码进去，如果不为空，则可以参考下面的代码格式，对现有配置属性进行增加。

配置项更新内容

• 调整了默认语言为 zh-CN；
• 新增了一些常用的 meta 属性；
• 为 style、script 等标签加上了 type 属性；
• 重写默认的 html:5 快捷属性，使其内容更完善，更符合项目开发而非练习；
• 新增 !:x 快捷方法，可以快速创建 WebApp 所需的基础代码；

{
    "snippets": {
        // 变量
        "variables": {
            "lang": "zh-CN",
            "locale": "zh-CN",
            "charset": "UTF-8"
        },

        // HTML 模板
        "html": {
            "abbreviations": {
                // 浏览器内核和渲染
                "meta:compat": "",
                "meta:rw": "",
                "meta:br": "meta:vp+meta:compat+meta:rw",
                
                // 站点描述和关键字
                "meta:description|meta:dt": "",
                "meta:keywords|meta:kt": "",
                "meta:dkt": "meta:kt+meta:dt",

                // 移动端适配 META
                "meta:mso": "",
                "meta:msox5": "",
                "meta:mfdt": "",
                "meta:mmth": "",
                "meta:mtc": "",
                "meta:mac": "",
                "meta:masbs": "",
                "meta:app": "meta:mso+meta:msox5+meta:mfdt+meta:mmth+meta:mtc+meta:mac+meta:masbs",
                    
                
                // 带 type 属性的样式表外链标签
                "link": "",
                "link:css": "",
                
                // 站点收藏图标
                "link:favicon": "",
                "link:xicon": "",
                
                // 带 type 属性的样式和脚本标签
                "style": "


    
    

清空内容，再输入 !:x，然后执行 tab 格式化，代码输出：

清空内容，再输入 html:5s，然后执行 tab 格式化，代码输出：

以后我们可以继续新增片段进去，为了防止和原始的配置冲突，最好都添加一个私有前缀或后缀。

另外可增补的 meta 标签如：