今回はSublimeText3の超絶便利プラグイン「HTML-CSS-JS Prettify」を紹介する。
コンテンツ
HTML-CSS-JS Prettifyとは?
SublimeText3でインストールできる、ソースコードのインデントを綺麗に整形するプラグインだ。
ソースコードの整形は、基本的にオンラインのツールを使うことが多いと思うが、このプラグインを入れておけばエディタ内のショートカットキーで一気に自動整形してくれる。
インストールの前に
「HTML-CSS-JS Prettify」はNode.jsで動くため、マシンにNode.jsがインストールされている必要がある。
Web系のエンジニアであれば既にインストールしているであろうが、分からなければターミナル(コマンドプロンプト)を起動して下記のコマンドを打ち込もう。
node -v
バージョン情報が返ってくれば、Node.jsはインストールされている。
返ってこなければインストールされていないので、別途インストールする必要がある。
※インストール方法については他のサイトを参照してくれ。
パッケージのインストール
では早速エディタにプラグインをインストールしていこう。
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2019/10/9d98a235a8122aca13e4d3910e66de27.jpg?resize=1024%2C440&ssl=1)
「cmd + shift + P」でコマンドパレットを開き「install 」と入力。
「Install Package」を選択しよう。
しばらく待つと、更に入力ボックスが現れるので「HTML-CSS-JS Prettify」と入力しパッケージをインストールする。
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2019/10/1107a3eb872cddfb39c4daa6cc1cef74.jpg?resize=1024%2C502&ssl=1)
HTMLの整形
実際にどのように整形されるか、当ブログから一部抜粋したソースをサンプルとし確認してみよう。
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2019/10/6204d1f603d9890fd7207e3cbbf7a27e.jpg?resize=882%2C1024&ssl=1)
WordPressから出力された、インデントが整理されていない汚いコードだ。
コードの整形は「cmd + shift + H」のショートカットで実行できる。
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2019/10/5861bc2e940bb88acf247ea2f2c58619.jpg?resize=974%2C1024&ssl=1)
また、圧縮されたCSSやJSなども同じショートカットで瞬時に整形することができる。
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2019/10/bc1a0fcad51c343042af3e1421ebe356.jpg?resize=1024%2C738&ssl=1)
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2019/10/341409be64fde1dcb153e931ce104175.jpg?resize=1024%2C741&ssl=1)
エラーが出た場合
Node.jsをnodebrewでインストールしている場合、整形のショートカット実行時に以下のようなエラーが発生する場合がある。
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2019/10/56d5f0453bbf844730d817a2e9dea2fe.jpg?resize=1024%2C506&ssl=1)
「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」を選択する。
![](https://i0.wp.com/chusotsu-program.com/wp-content/uploads/2019/10/5fec4f400bb4f706fa56ded928fdc4ea.jpg?resize=1024%2C457&ssl=1)
ここで開かれる設定ファイルで、インデントのルールを自由に変更できる。
デフォルトでインデントは「スペース4つ」となっているが、例えばこれを「タブ1つ」に変更する場合はコードを以下のように書き換えれば良い。
// ▼デフォルト
// "indent_char": " ",
// "indent_size": 4,
"indent_char": "\t", // インデントにタブを使用
"indent_size": 1, // インデント記号の数を指定