ネット偽善者でもいいじゃない

悩んでるなら面白いマンガ読もう

SublimeTextでブラウザを開くショートカット、ブラウザプレビューパッケージが便利!Macで設定

ブラウザをショートカットキーで開きたい

Sublime Text3を使ってて

HTMLとかCSSとかを確認するのに、ショートカットでブラウザ確認出来ないかなぁ

あわよくば、複数のブラウザを一遍に確認出来ないかなぁと思ってたのでググってみた

view in browserというパッケージをダウンロードすれば良いみたい

 

 

出来た…Sublimetext3でブラウザプレビュー View in Browser

を参照にしました

Macを使ってる

Windowsでの記事だったのと、超初心者な僕はちょっとだけ躓いたので

最後の設定までを書いてみました

(パッケージをダウンロードするだけでなく、自分でユーザー設定をしないといけなかったです)

 

パッケージのインストール

これは上記のサイトと同じ方法で出来ました

(ただMacなのでちょっとだけコマンドが違う)

--------------------

Shift+Command+Pでパッケージコントロールを開く

Install Packageと打ち込むとInstall Packageが表示されるので

Enterボタンを押すorクリック

f:id:Yhei:20140827135908p:plain

view in browserと打ち込むと、view in browserが表示されるのでEnter or クリック

パッケージがインストールされます

 

ショートカットキーの設定

インストールが終了したら、Sublime Textのメニューから

Preferences > Package Settings > View in Browser > Key Bindings Userと辿っていって

Key Bindings Userを開く

f:id:Yhei:20140827140348p:plain

 

Key Binding User内(最初は何も書いてない)に下のコードをコピーアンドペーストする

[
{ "keys": [ "ctrl+shift+v" ], "command": "view_in_browser" },
{ "keys": [ "ctrl+shift+f" ], "command": "view_in_browser", "args": { "browser": "firefox" } },
{ "keys": [ "ctrl+shift+c" ], "command": "view_in_browser", "args": { "browser": "chrome" } },
{ "keys": [ "ctrl+shift+i" ], "command": "view_in_browser", "args": { "browser": "iexplore" } },
{ "keys": [ "ctrl+shift+s" ], "command": "view_in_browser", "args": { "browser": "safari" } }
]

f:id:Yhei:20140827140737p:plain

こんな感じ

で、保存します(Command+Sもしくはファイルメニューから上書き保存)

 

貼り付けるコードはGithub内の

adampresley/sublime-view-in-browser · GitHub

を参考にしました。

(上記のリンクはwindows用だったのでAltキーを使ってますがMacにはAltキー無いのでCtrl+Shiftに置き換えました)

(Ctrlはcontrolボタンのことです。左側のshiftボタンの一個上にあると思います)

【追記】 macにもaltキーありますね・・・optionキーがその役割みたいです(;´Д`)

 

-------------------------

 

これで、HTMLソースなどをSublime Textで書いたあと例えば

Ctrl+Shift+cでgoogle chrome

Ctrl+Shift+sでsafari

開くようになりました!

firefoxを開く時は Ctrl+Shift+f

IEを開く時は Ctrl+Shift+i

が初期値になってるはずです

firefoxとinternet exploreは使ってないのですが、開発者の方は色々と確認しなければいけないので便利なのではないでしょうか

 

これでデフォルトのブラウザが何なのかとか気にせず良くなったので

作業が捗りそうです