SublimeTextで保存した瞬間にブラウザプレビューを更新してくれるパッケージ「Browser Refresh」の使い方

0
0
26
0

    2014/11/16

sublimetext 自動更新000.jpg

「一日5記事書いたらブログをいじれる」という自分ルールを設定して以来、全くブログをいじれていません。PITE.(@infoNumber333)です。
このルール撤廃したほうがいいのかな…

一応気持ちを新たにブログを改造しようと、今まで使っていたCoda2からSublime Textに乗り換え作業を行っている途中なのですが、まだ環境を構築する段階でダラダラしています。

とりあえず今日はSublime Textに「ファイルを保存すると同時にブラウザのプレビューを更新してくれる」という超絶便利なパッケージ(プラグイン)、「Browser Refresh」を導入したのでご紹介。

これはめちゃめちゃ捗る予感!

「Package Control」からダウンロード

Sublime Textでは「パッケージ」というものをインストールすることによって機能を拡張することができます。WordPressで言うとプラグインみたいなものです。ガンダムで言うとハイパーハンマーみたいなものです。

Sublime Textでプラグインをインストールするなら必ず「Package Control」を最初に入れよう! | iPhone・Macの情報発信ブログ~Number333~

「Package Control」の使い方やインストール方法などは上記の記事で解説してありますのでまだ入れていない方は参考にして下さい。

この「Package Control」から「Browser Refresh」と検索してインストールしましょう。

Browser Refreshを設定

Browser Refreshはただブラウザを更新するだけのプラグインなので、この設定を少しいじって「保存」と「更新」を同時に行いたいと思います。

sublimetext 自動更新004.jpg

Sublime Textのメニューから「Preferences」を選択。

sublimetext 自動更新001.jpg

その中の「Pakage Control」を選択。

sublimetext 自動更新002.jpg

この中に「Browser Refresh」があるのでクリックします。

sublimetext_自動更新003-2.jpg

すると「Browser Refresh」の設定コードが開きます。
この一番上の段の「command+shift+r」の部分を「command+s」に書き換えればファイルを保存すると同時にブラウザも更新してくれるようになります。設定はこれだけ!

これで「コード書く」→「保存」の流れでそのまま変更後のWebページが確認できてしまうという素晴らしいパッケージです。

Sublime Textを使っている方は是非お試しを!

Pite(@infoNumber333)はこう思うよ。

環境だけは整ってきたんだけど肝心のやる気が起きません…。頑張れオレ!
更新情報はLINE@で!
ここまでお読みいだきありがとうございます!更新情報や限定コンテンツはLINE@でお届けしていますので、右のボタンから登録をお願いします!あなたのスマホに記事を直接お届け。

CATEGORY - デザイン

total

26

share!

シェアしてくれるとめっちゃよろこびます。

SublimeTextで保存した瞬間にブラウザプレビューを更新してくれるパッケージ「Browser Refresh」の使い方

monographはiPhone・Macなどのガジェットを中心に管理人PITE.の気になるモノを幅広く紹介するブログメディアです。月間50〜70万PV。気軽に楽しんで行って下さい。

Copyright© iPhone・Macの情報発信ブログ "monograph" , 2013 All Rights Reserved.