今回は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なども同じショートカットで瞬時に整形することができる。
エラーが出た場合
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, // インデント記号の数を指定