フロントエンジニアのみなさーん！今日も色んなサイトのHTMLを覗き見していますかー！！
HTMLを見ていると、求人情報が書いてあったり、アスキーアートが書いてあったりすることがあって、こういうのを見つけると楽しいですね！
音楽配信サービスの老舗、muzieさんのHTMLは、「muzie」って大きく書かれていてインパクトがありますねー。
それにしても、
<meta name="robots" content="index,nofollow,noarchive">
というのは、どういう意図があるんでしょうね・・。リンク先は検索エンジンに辿らせないように設定中！？
さてさて、前回の記事「え！？わずか1秒でCSS / JavaScriptファイルを圧縮！Sublime Text3にYUI Compressorを入れてみた。」で、ファイルを圧縮するやり方を紹介しました。
逆に、圧縮（min化）されたファイルを整形（prettify）するやり方を今回は説明しますー！
今回もSublime Text3のプラグインを使用します。
Sublime Text3にプラグイン「HTML/CSS/JS Prettify」をインストール
■Mac
⌘(Command) + ⇧(Shift) + P
■Win
Ctrl + Shift + P
もしくはTools → Command Palette を選択します。
コマンドパレットを呼び出して、「install」と入力します。
「Package Control: Install Package」と表示されますので、Enterキーを押します。
パッケージ名を入力する画面となりますので、「HTML/CSS/JS Prettify」と入れてください。これで今回も楽々プラグインがインストールできちゃいます。
Sublime Textって、プラグインを入れるのに病み付きになりますよね・・・！
「HTML/CSS/JS Prettify」を使って圧縮（min化）されたファイルを整形（prettify）する
CSSやJavaScriptの圧縮されたファイルを開いて、
右クリック → HTML/CSS/JS Prettify → Pretify Code
もしくは、
■Mac
⌘(Command) + ⇧(Shift) + H
■Win
Ctrl + Shift + H
で整形されます！
※node.jsをインストールしておかないとダメだそうです。
一瞬で整形されましたね！！
圧縮されたサイトなどのソースをコピペして確認する際に有効ですね。
便利な「Pretify Code」プラグイン、是非活用して素敵な整形ライフを過ごしましょう。
※後日追記 圧縮されたファイルを見やすく整形する方法も紹介しました！
「ショートカット一発！圧縮（min化）されたCSSやJavaScriptのソースコードを見やすく整形しちゃうよ！」を参考にしてください！