LoginSignup
4

More than 5 years have passed since last update.

【Sublime Text】<br>タグをショートカットキー入力【Emmet】

Last updated at Posted at 2014-12-21

EmmetとMacroを利用したキーバインドによる簡単タグ入力

Dream Weaverなどにあったショートカットキーによるタグ入力を再現したい場合に有効です。
ここでは、タイトルにもあるように主にbrタグ挿入の方法を例に解説していきます。
もともとバシャログさんで紹介されていたこちらの方法で実装していたのですが、XHTML,HTML5で使い分けが面倒だったので、Emmetを利用した形式に変更しました。
(Sublime Text2で動作を確認していますが、3でも同様のことが出来るんじゃないかと思います。)

Howto

前提としてEmmetが必要なのでPackage Control:Install PackageでEmmetをインストールしてください。
これから解説するマクロを導入することで、brタグ挿入を実現することが出来ます。

Macro

emmet_br.sublime-macro
[
    {
        "args":
        {
            "characters": " br"
        },
        "command": "insert"
    },
    {
        "args":
        {
            "characters": " "
        },
        "command": "insert"
    },
    {
        "args":
        {
            "by": "characters",
            "forward": false
        },
        "command": "move"
    },
    {
        "args":
        {
            "action": "expand_abbreviation"
        },
        "command": "run_emmet_action"
    },
    {
        "args":
        {
            "by": "words",
            "forward": false
        },
        "command": "move"
    },
    {
        "args":
        {
            "by": "words",
            "forward": false
        },
        "command": "move"
    },
    {
        "args":
        {
            "by": "words",
            "forward": false
        },
        "command": "move"
    },
    {
        "args": null,
        "command": "left_delete"
    },
    {
        "args":
        {
            "by": "word_ends",
            "forward": true
        },
        "command": "move"
    },
    {
        "args":
        {
            "by": "word_ends",
            "forward": true
        },
        "command": "move"
    },
    {
        "args":
        {
            "by": "word_ends",
            "forward": true
        },
        "command": "move"
    },
    {
        "args": null,
        "command": "right_delete"
    }
]

これを拡張子.sublime-macroで保存してC:\Users\ユーザー名\AppData\Roaming\Sublime Text バージョン\Packages\Userに入れます。(Windowsの場合)
これで、Tool > Macrosからemmet_brコマンドを実行出来るようになりますが、ショートカットで打つのが目的なのでキーバインドを設定しましょう。

Keymap

Default(Windows).sublime-keymap
{
    "keys": ["shift+enter"], "command": "run_macro_file", "args": {
        "file": "Packages/User/emmet_br.sublime-macro"
    }
}

Preferences > Key Bindings - User に上記のコードを登録します。
ショートカットキーはお好みで変更してください。
Emmetでbrと打って展開したときと同様、Doctypeで打ち分けしてくれるので便利です。

なお、Emmetによるexpandの仕様上、英数字のあとにbrと打って実行すると、直前の英数字までタグとして認識してくれやがるので、それを回避するために

  1. [スペース]br[スペース]と入力
  2. brの後ろまでカーソルを移動
  3. expand
  4. ctrl押しながら前に戻りつつ前の[スペース]を除去
  5. また、ctrl押しながらカーソルキーを元の位置に戻す
  6. 後ろの[スペース]を除去

ということをやっています。
そのため入力位置の後ろにタグや記号が続く場合、ショートカットキーを入力するとbrタグが入力されたあとに、ちょっとだけカーソル位置がズレます。そこだけ若干注意です。
後ろに続くのが文字や末尾の場合はカーソル位置に変化はないです。
※改良版にしたため、上記のカーソル位置のズレはなくなりました。

直前の英数字をタグとして認識させないように回避するのが若干面倒ですが、これを応用すればbrタグ以外のあらゆるタグに活用することが出来ます。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4