ショートカット一発!圧縮(min化)されたCSSやJavaScriptのソースコードを見やすく整形しちゃうよ!

フロントエンジニアのみなさーん!今日も色んなサイトのHTMLを覗き見していますかー!!
HTMLを見ていると、求人情報が書いてあったり、アスキーアートが書いてあったりすることがあって、こういうのを見つけると楽しいですね!

アメリカのブログサービスtumblrのHTMLは、「tumblr」って大きく書かれていてインパクトがありますねー。
tumblr

また、日本でも同じようなことをしているサイトは多く、音楽配信サービスの老舗、「muzie」のHTMLは、「muzie」って大きく書かれていますね!
muzie

musizeは2017年にサービスが終了していました。

さてさて、前回の記事「え!?わずか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)する

prettify

CSSやJavaScriptの圧縮されたファイルを開いて、

右クリック → HTML/CSS/JS Prettify → Pretify Code

もしくは、

■Mac
⌘(Command) + ⇧(Shift) + H

■Win
Ctrl + Shift + H

で整形されます!

※node.jsをインストールしておかないとダメだそうです。

一瞬で整形されましたね!!
圧縮されたサイトなどのソースをコピペして確認する際に有効ですね。

便利な「Pretify Code」プラグイン、是非活用して素敵な整形ライフを過ごしましょう。

ABOUTこの記事を書いた人

とみっち

数年前までバンド活動してました。現在はブログを運営して暮らしています。サウンドクリエイター / Webクリエイター。息子は6歳。長野市出身。埼玉県内を転々(東松山→志木→川越)、現在は本庄移住して法人化しました。4人で会社やってます。コロナが落ち着いたら都内に拠点作ります! 【興味】音/Web/車(GolfR Variant等)/田舎/旅/酒 ※自然の音からデスメタルまで聴きますw 【主な運営サイト】 ザ・サイベース おと風景 とみっちWeb 詳しいプロフィール