bata's log

フロントエンド系のTipsとかメモ

EmmetでHTML5の閉じタグが削除されてしまう問題

SublimeTextでHTMLコーディングをする場合、(個人的な見解として)Emmetは必須パッケージですが、HTML5で(control + e)した場合に<img /><br />の閉じタグのスラッシュを削除してしまいます。

<!-- xhtmlの場合 -->
<img src="" alt="" />

<!-- html5の場合 -->
<img src="" alt="">

html5は閉じタグを入れなくてもOKなのですが、閉じタグを入れる派の人にとっては面倒なデフォルト設定なのでユーザー設定で閉じタグを入れるように設定しました。

解決方法

Sublime Text -> Preference -> Package Settings -> Emmet -> Settings - User
上記メニューで開いたEmmet.sublime-settingsに下記の記述を追加します。

{
    "syntaxProfiles": {
        "html": {
            "self_closing_tag": "xhtml"
        }
    }
}

これでOKです。
Sublime Textはソースコードを読めば大概の事は解決できるので本当に使いやすいです。


余談ですがUserのEmmet.sublime-Settingsに設定を追加する場合は、デフォルトのファイルのカスタマイズ部分をコピーしてしまってから編集するとよいと思います。

{

    ///////////////////////////////
    // Emmet customization
    // Each section has the same meaning as the same-named JSON file
    // described here:
    // http://docs.emmet.io/customization/
    ///////////////////////////////


    // Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json
    "snippets": {
        "variables": {
            "lang": "ja",
            "locale": "ja-JP",
            "charset": "UTF-8",
            "indentation": "\t",
            "newline": "\n"
        },

        "html": {
            // "abbreviations": {
            //     "example": "<div class='example' title='Custom element example'>"
            // }
            "snippets": {
                "script": "<script type=\"text/javascript\" src=\"\"></script>",
                "php": "<?php  ?>"
            }
        }
    },

    // Emmet preferences
    // List of all available preferences:
    // http://docs.emmet.io/customization/preferences/
    "preferences": {
        // "css.valueSeparator": ": ",
        // "css.propertyEnd": ";"
    },

    // Output profiles for syntaxes
    // http://docs.emmet.io/customization/syntax-profiles/
    "syntaxProfiles": {
        // Enable XHTML dialect for HTML syntax
        // "html": "xhtml"
        //
        // Write chained CSS abbreviations on single line:
        // "css": "css_line"
        "html": {
            "self_closing_tag": "xhtml"
        }
    }
}