Sublime Text で CSS や HTML、Javascript のソースを整形するプラグイン

2016/02/04

YUI Compressor でスペースや改行コードが圧縮された .min ファイルの解析を依頼されました。圧縮前の元のファイルはどこへいったのか訪ねてみると、不要と思って誤って削除してしまったそうです。これは困りましたね。元のファイルが無ければ変更を加えるのも大変です。

そこでソースコードを解析して自動フォーマットしてくれる Sublime Text のプラグインを探してみたところ、丁度良いものが見つかったので紹介します。ちなみに Sublime Text (テキストエディタ)については、こちらのページをご覧ください。

【導入&日本語化】Sublime Text はプログラミングに最適なエディタ!
長年テキストエディタとして サクラエディタ を使用してきたのですが、もう一歩踏み込んだ機能が欲しくて、新たなテキストエディタとの出会いを求めていた昨今。ようや...

ソースコード自動整形プラグイン HTML-CSS-JS Prettify

自動整形とは要するにソースコードのインデント設定を綺麗にする機能です。ネストしているのに同一階層のように見えてしまっては、ソース解析も手間取ってしまいますよね。正しい階層構造にフォーマットしてあげることで、プログラムの可読性が向上します。

もちろん修正して改めてサーバーへアップするのであれば .min 形式に圧縮してあげることで、サーバー間のデータ通信量を減らすこともできます。.min へ圧縮するための Sublime Text のプラグインについてはこちらをご覧ください。

Sublime Text で Javascript や CSS を圧縮し簡単かつ迅速に .min ファイルを作る方法
Web サイトの表示を高速化する最も有効的手段は、データ通信量を抑えることです。ブログのような場合は、画像ファイルを大量に扱っているのでなかなかデータ量を減らすのは難...

HTML-CSS-JS Prettify のインストール

Sublime Text そのもののインストール、およびプラグインをインストールするための Package Control を導入されていない方は、以下のページを参照ください。

【導入&日本語化】Sublime Text はプログラミングに最適なエディタ!
長年テキストエディタとして サクラエディタ を使用してきたのですが、もう一歩踏み込んだ機能が欲しくて、新たなテキストエディタとの出会いを求めていた昨今。ようや...

それでは早速インストールしてみましょう。

  1. メニューから ツール(T) > コマンドパレット を選択
  2. Package Control: Install Package を選択
  3. 別のパレットが立ち上がるので HTML-CSS-JS Prettify を検索し、選択
    html-css-js-prettify02

選択するとでプラグインが自動的にインストールされるので、作業はこれだけで完了です。

ソースコードを整形する

それでは整形したいソースファイルを開いてください。対象は HTML、CSS、JavaScript ファイルです。開いたらメニューからプラグインを実行します。

[ツール(T)] → [HTML/CSS/JS Prettify] → [Prettify Code]

html-css-js-prettify03

問題なければこれで整形されるのですが、大半のマシン環境では次のようなエラーメッセージが表示されます。

Node.js was not found in the default path. Please specify the location.

Node.js が指定されたパスにありませんよ!といった内容です。実はこのプラグイン、整形するために別のアプリを利用しているのです。Node.js ってなんだ?どうやってインストールすればいいの?という方は、こちらのページに記載している内容に従ってソフトをインストールしていただければ使えるようになります。

Windows に Node.js をインストールする方法
Node.js とは一言で言うと「サーバーサイド JavaScript 環境」です。クライアント言語である JavaScript をサーバーサイドスクリプトとして処理...

Node.js をインストール後、改めて整形処理を行ってみてください。もし再起動してもエラーが生じるようであれば、Node.js のインストール先のパスとプラグインの設定ファイル記載のパスが相違している可能性があるので、設定内容を確認してみましょう。

[ツール(T)] → [HTML/CSS/JS Prettify] → [Set `node` Path]

ここで表示される「node_path」の windows で指定されるパスが、Node.js のパスと等しいか確認してください。

html-css-js-prettify04

もし異なっていた場合、開いたファイルを直接上書きして更新してください。更新後は Sublime Text の本体を再起動することで、保存した設定パスが適用されます。

それでは改めて、メニューから [Prettify Code] を選択して実行してみてください。

こんなに読みづらいコードが……
html-css-js-prettify05

こんなに綺麗になりました!
html-css-js-prettify06

これで受け取った .min ファイルも無事解析できそうです。

このブログの運営者

気力・体力勝負なシステム業界のエンジニアを経て、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。目指すところへの道のりは険しいですが、自分が自分らしくあるために、一歩ずつ進んでいきます!

このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。更新情報は、Twitter や Facebook ページを参照ください。よろしければフォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします

最近のエントリー

プラグインを使わず WordPress の投稿ページで PHP の外部ファイルを呼び出す方法

Feedly ボタンが機能していない?!正しい URL の情報に変更する方法

Twitter で過去のツイートを閲覧・削除する方法

赤ちゃんが泣き止む動画「ふかふかかふかのうた」は生後3ヶ月の赤ちゃんにも効果抜群だった!

これで迷わない!東京ディズニーランドの喫煙所マップ一覧【写真付き】

iTunes でアートワークが反映されないのは WAV 形式が原因!AAC に変換すれば反映される!

【徹底比較】WiMAX 2+ ギガ放題プランの最安値はどこ?【2017年10月版】

おすすめのモバイルルーター・ポケット WiFi を比較!選ぶポイントは利用目的に合わせること!

公共料金の支払いはクレジットカードと口座振替のどっちがお得?

iPhone 8・8 Plus は 7・7 Plus のスマホケースをそのまま使えるのか?