2015/04/06 Sublime Text

【Sublime Text3】SideBarEnhancementsでF12ブラウザプレビューする方法

お久しぶりです。環境を移行する際に忘れないように覚書。
Sublime Text3でxampなどのローカルサーバで設定したURLをDreamweaverのようにF12プレビューする方法。
SideBarEnhancementsがインストールされていてprojectの設定が完了している事が前提です。

ローカルサーバで設定したURLを指定する

[サイドバー右クリック] ⇒ [Project] ⇒ [Edit Project Preview URLs]

{
    "C:/xampp/htdocs/test": {
        "url_testing":"http://test.localhost/",
        "url_production":"http://test.com/"
    }
}

ローカルサーバでのファイルのパス、プレビューするURLを設定します。
[url_testing]がF12で開くURLで[url_production]がalt + F12で開くURLになります。

ショートカットキーを変更する

Sublime Text3では[F12]にgoto_definitionが設定してあるため、ショートカットキーを変更する必要があります。

[Preferences] ⇒ [Key Bindings -User]

[
// f12でブラウザプレビュ
{ "keys": ["f12"],
    "command": "side_bar_open_in_browser" ,
    "args":{"paths":[], "type":"testing", "browser":""}
},
{ "keys": ["alt+f12"],
    "command": "side_bar_open_in_browser",
    "args":{"paths":[], "type":"production", "browser":""}
}
]

プレビューするブラウザを指定する

デフォルトでは既定のブラウザが開きます。ブラウザを指定したい場合は下記を設定します。

[Preferences] ⇒ [package Setting] ⇒ [side Bar]

{
    "default_browser":"chrome"
}

まとめ

DreamweaverからSublime Text3に移行する際に設定していしておけば違和感なく移行できるかとおもいます。
でわでわ。

SideBarEnhancements