今回はSublimeText3の超絶便利プラグイン「HTML-CSS-JS Prettify」を紹介する。

HTML-CSS-JS Prettifyとは?

SublimeText3でインストールできる、ソースコードのインデントを綺麗に整形するプラグインだ。

ソースコードの整形は、基本的にオンラインのツールを使うことが多いと思うが、このプラグインを入れておけばエディタ内のショートカットキーで一気に自動整形してくれる。

インストールの前に

「HTML-CSS-JS Prettify」はNode.jsで動くため、マシンにNode.jsがインストールされている必要がある。

Web系のエンジニアであれば既にインストールしているであろうが、分からなければターミナル(コマンドプロンプト)を起動して下記のコマンドを打ち込もう。

node -v

バージョン情報が返ってくれば、Node.jsはインストールされている。

返ってこなければインストールされていないので、別途インストールする必要がある。
※インストール方法については他のサイトを参照してくれ。

パッケージのインストール

では早速エディタにプラグインをインストールしていこう。

「cmd + shift + P」でコマンドパレットを開き「install 」と入力。

「Install Package」を選択しよう。

しばらく待つと、更に入力ボックスが現れるので「HTML-CSS-JS Prettify」と入力しパッケージをインストールする。

HTMLの整形

実際にどのように整形されるか、当ブログから一部抜粋したソースをサンプルとし確認してみよう。

WordPressから出力された、インデントが整理されていない汚いコードだ。

コードの整形は「cmd + shift + H」のショートカットで実行できる。

また、圧縮されたCSSやJSなども同じショートカットで瞬時に整形することができる。

圧縮されたCSS
整形されたCSS

エラーが出た場合

Node.jsをnodebrewでインストールしている場合、整形のショートカット実行時に以下のようなエラーが発生する場合がある。

「OK」を押すと、プラグインの設定ファイルが開かれるので「node_path」の部分を次のように修正する。

// "osx": "/usr/local/bin/node"
// 上記のコードを下記に変更
"osx": "/Users/{ユーザー名}/.nodebrew/current/bin/node"

Macの場合はこれでエラーは解消されるはずだ。
※Windowsユーザーは各自Node.jsのパスを自力で調べてくれ。

おまけ:インデントのルール設定

「cmd + shift + P」でコマンドパレットを開き「set prettify」と入力し、サジェストされた結果の中から「Set Prettify Preferences」を選択する。

ここで開かれる設定ファイルで、インデントのルールを自由に変更できる。

デフォルトでインデントは「スペース4つ」となっているが、例えばこれを「タブ1つ」に変更する場合はコードを以下のように書き換えれば良い。

// ▼デフォルト
// "indent_char": " ",
// "indent_size": 4,


"indent_char": "\t", // インデントにタブを使用
"indent_size": 1, // インデント記号の数を指定