HTML/CSS/JS Prettify は、ソースコードのインデントを綺麗にする整形し、見やすくするプラグインです。正しい階層構造にフォーマットして、ソースコードの可読性を向上します。非常に便利です。Sublime Text 2/3 両方に対応しています。
対応しているファイルは、HTML・CSS・JavaScript・JSONです。Web開発者、ブログやサイト運営者で、Sublime Text を使っている方には必須ですね。
インデントの崩れた汚いソースコードを整形して、見やすくしましょう。
公式サイトはこちら:
HTML-CSS-JS Prettify - Packages - Package Control
インストール・設定
1. node.jsをインストール
既にインストールされている場合は、必要ありません。
2. プラグイン HTML-CSS-JS Prettify をインストール
2-1. Ctrl + Shift + Pキー
2-2. installと入力 → 「Package Control: Install Package」
2-3. prettifyと入力 → 「HTML-CSS-JS Prettify」
3. Node.js のパスを設定
Node.js の実行ファイル node.exe のパスを指定する必要があります。
次の3つの方法があります。どれも同じです。
- 「Tools」メニュー → 「HTML/CSS/JS Prettify」 → 「Set `node` Path」
- 右クリック → 「HTML/CSS/JS Prettify」 → 「Set `node` Path」
Ctrl+Alt+hキー,nキー
node_pathの中のパスを書き換えます。私の環境では、"C:/Program Files/nodejs/node.exe" でした。
ソースコード整形を実行
次の4つの方法があります。どれも同じです。
Ctrl+Shift+Hキー- 「Tools」メニュー → 「HTML/CSS/JS Prettify」 → 「Prettify Code」を選択
- 右クリック → 「HTML/CSS/JS Prettify」 → 「Prettify Code」を選択
Ctrl+Shift+Pキー → “HTMLPrettify” と入力して選択
実行前
実行後
とても見やすくなりましたね。整形しておくなら、コーディングミスも減ります。
「ファイル保存時に自動整形」などの設定
ファイルを保存する前にいつもコードを整形する方は、その処理を自動化できれば便利ですね。
HTML-CSS-JS Prettify には、以下のタイミングで自動整形する設定があります。
- ファイルの保存時
- ファイルのオープン時 (Sublime Text 3 のみ)
- フォーカスを得た時 (Sublime Text 3 のみ)
- フォーカスを失った時 (Sublime Text 3 のみ)
- ソースコードの編集時 (Sublime Text 3 のみ)
自動整形の設定を有効にするには、次の方法で設定ファイルを開きます。どれも同じです。
- 「Tools」メニュー → 「HTML/CSS/JS Prettify」 → 「Plugin Options - Default」
- 右クリック → 「HTML/CSS/JS Prettify」 → 「Set
nodePath」 Ctrl+Alt+hキー,oキー
そして、
"format_on_save""format_on_open""format_on_focus""format_on_focus_lost""format_while_editing"
の値を変更します。trueで有効、falseで無効です。
まとめ
以上、JSONにも対応した、インデントを整形する Sublime Text 2/3 のプラグイン HTML/CSS/JS Prettify でした。
ぐちゃぐちゃになった汚いソースコードや、.minに圧縮されたソースコードを一瞬で整形できるのは便利ですね。可読性を向上させ、タグの閉じ忘れなどのミスを減らしましょう。
