IT技術にまつわる実験ノート

「長編を書くより、短編を数多く完成させてください。それが上達への近道です」 by 手塚治虫

自作Webアプリ「IT勉強会用 名刺ジェネレーター」を公開しました!ぜひご活用ください😀

https://it-benkyoukai-meishi.herokuapp.com/

atom-html-preview を使ってみる

インストール

Ctrl +, のショートカットで設定画面を開いて、左メニューの「インストール」をクリック。入力欄に atom-html-preview を入力して「パッケージ」ボタンをクリックする。あとは「Install」ボタンをクリックすれば、インストールできる。インストール数は 62 万回以上の人気パッケージとのこと。

f:id:matt-note:20181123033816p:plain

 

使ってみる

右クリックして「Preview HTML」をクリックする。

f:id:matt-note:20181123034129p:plain

 

すると、以下のようになる。ただし、この状態だと幅が狭いので、レスポンシブデザインでデスクトップ時のデザインがわからない。

f:id:matt-note:20181123034015p:plain

 

使ってみたところ、live reload される。ファイルに文字を入力すると、デザインにも反映される。ファイルを保存する前に、デザインに反映される。とはいえ、文字を入力するたびにリロードされるので、ちょっと面倒。

f:id:matt-note:20181123035548p:plain

 

タブでも開くことができる。デスクトップ時のデザインはこちらで見ることができる。ただし、こちらでは live reload されない。残念。

f:id:matt-note:20181123034606p:plain

 

 

まとめ

atom-html-preview を使うと、Atom エディタからサクッとデザインの確認をすることができる。とはいえ、ブラウザで確認する必要もある。個人的には、アンインストールする可能性が高い。

 

参考