Sublime TextでHTMLを整形する方法｜初心者でも簡単にコードを美しくするコツ

Excel

HTMLを書いていると、気づかないうちにコードがごちゃごちゃになってしまうことがありますよね。とくに長くなったファイルは、インデント（字下げ）やタグの階層が崩れると、どこからどこまでがどのブロックか分からなくなってしまいます。

そこで役立つのが、人気のテキストエディタ「Sublime Text」のHTML整形機能です。この記事では、Sublime TextでHTMLをきれいに整形（フォーマット）する方法を、初心者でも分かるように丁寧に解説します。

「作業効率を上げたい」「見やすいコードを書きたい」と思っている方は、ぜひ最後まで読んでください。

スポンサーリンク

HTMLを整形する理由とメリット

なぜHTMLの整形が必要なのか

HTMLの整形は、単に見た目をそろえるだけでなく、バグの早期発見やメンテナンス性の向上にもつながります。

たとえば、インデントがずれていると、閉じタグを見落としてしまうことがあります。また、複数人で作業するときにも、コードの書き方が統一されていないと混乱を招きます。

整形を自動で行えば、こうしたリスクを減らせます。

実際によくある問題例

  • インデントが崩れたまま開発を続けてしまい、結局バグ修正に時間がかかってしまった
  • チームで同じファイルを触るときに、整形ツールを入れてなかったため、誰がどこを直したのか分かりにくくなった
  • ネストが深くなりすぎて、どのdivがどこまで続いているのか把握できなくなった

整形することで得られるメリット

整形されたHTMLコードには、以下のようなメリットがあります：

  • 可読性の向上: タグの階層が視覚的に分かりやすくなる
  • バグの早期発見: 閉じタグの漏れやネストの間違いを発見しやすい
  • チーム開発の効率化: 統一されたコードスタイルで作業できる
  • メンテナンス性の向上: 後から見直すときも理解しやすい

Sublime TextでHTMLを整形するためのプラグイン

標準機能の限界

Sublime Textには標準で高度なHTML整形機能はありません。そのため、多くの人は「プラグイン」を使ってHTMLをきれいに整形しています。

おすすめプラグイン2選

代表的なのは次の2つです：

HTML-CSS-JS Prettify

HTMLだけでなくCSSやJavaScriptもまとめて整形できます。Web制作現場では最も使われているプラグインの一つです。

Emmet

整形だけでなく、HTMLを爆速で書ける補完ツールとしても人気です。フロントエンドエンジニアは標準で入れているケースが多いです。

どちらを選ぶべきか

初心者の方には「HTML-CSS-JS Prettify」がおすすめです。理由は以下の通りです：

  • 設定が簡単
  • HTMLだけでなくCSSやJavaScriptも同時に整形できる
  • 日本語ドキュメントが充実している
  • トラブルシューティングの情報が豊富

HTML-CSS-JS Prettifyの導入と使い方

導入ステップ

「HTML-CSS-JS Prettify」は、Sublime Textのパッケージコントロールから簡単にインストールできます。

ステップ1：パッケージコントロールを開く

Ctrl + Shift + P（MacはCmd + Shift + P）を押して、「Install Package」と入力します。

ステップ2：プラグインを検索してインストール

検索欄にHTML-CSS-JS Prettifyと入力し、選択してEnterを押します。

ステップ3：整形を実行する

整形したいファイルを開いて右クリック → 「Format Code」を選択するか、ショートカットキー（例：Ctrl + Alt + F）で一発整形できます。

基本的な使い方

プラグインがインストールされたら、以下の手順で整形を実行します：

  1. HTMLファイルを開く
  2. 整形したい箇所を選択（全体を整形したい場合はCtrl + Aで全選択）
  3. 右クリックメニューから「Format Code」を選択
  4. 自動でインデントがそろい、読みやすいコードに変換される

実際の整形例

たとえば、以下のようなぐちゃぐちゃなHTMLコードが：

<div><p>こんにちは</p><ul><li>項目1</li><li>項目2</li></ul></div>

このように整形されます：

<div>
    <p>こんにちは</p>
    <ul>
        <li>項目1</li>
        <li>項目2</li>
    </ul>
</div>

設定をカスタマイズする方法

基本設定の変更

HTML-CSS-JS Prettifyの設定は、以下の手順で変更できます：

  1. メニューバーの「Preferences」→「Package Settings」→「HTML-CSS-JS Prettify」→「Settings – User」を選択
  2. 設定ファイルが開くので、必要な項目を追加・変更
  3. ファイルを保存して設定完了

よく使う設定項目

インデント幅の設定

{
    "html": {
        "indent_size": 2
    }
}

タブかスペースかの設定

{
    "html": {
        "indent_char": " ",
        "indent_with_tabs": false
    }
}

行の最大幅の設定

{
    "html": {
        "wrap_line_length": 80
    }
}

プロジェクトごとの設定

チームでコーディング規約がある場合は、プロジェクトのルートディレクトリに.jsbeautifyrcファイルを作成することで、プロジェクト固有の設定を適用できます。

HTML整形でよくあるトラブルと解決法

よくあるトラブル

プラグインが動かない

プラグインがインストールされていても、Sublime Textを再起動していないと動かない場合があります。

解決法: Sublime Textを一度終了し、再度開いてください。

設定ファイルが読み込めない

設定ファイル（.jsbeautifyrcなど）の記述に間違いがあると、整形が期待通りに動かないことがあります。

解決法: 設定ファイルのJSON形式が正しいか確認してください。オンラインのJSON検証ツールを使うと便利です。

特定のファイル形式で整形されない

JSXやVueファイルでは、HTML-CSS-JS Prettifyでは期待通りに整形されない場合があります。

解決法: 各言語専用のプラグインを使用してください。たとえば、Vue.jsなら「Vue Syntax Highlight」と組み合わせると良いでしょう。

トラブルシューティングの手順

  1. Sublime Textの再起動: まずはこれを試してみてください
  2. プラグインの再インストール: パッケージコントロールから一度削除し、再度インストール
  3. 設定ファイルの確認: JSON形式が正しいか、タイポがないかチェック
  4. コンソールでエラー確認: `Ctrl + “（バッククォート）でコンソールを開き、エラーメッセージを確認

その他の便利な機能

ショートカットキーのカスタマイズ

よく使う整形機能には、自分で使いやすいショートカットキーを割り当てることができます。

「Preferences」→「Key Bindings」から、以下のような設定を追加できます：

[
    {
        "keys": ["ctrl+shift+f"],
        "command": "htmlprettify"
    }
]

保存時の自動整形

ファイルを保存するたびに自動で整形したい場合は、設定ファイルに以下を追加します：

{
    "format_on_save": true
}

ただし、この設定は大きなファイルでは動作が重くなる可能性があるので、プロジェクトの規模に応じて使い分けてください。

まとめ

Sublime Textは軽量で高速なテキストエディタですが、プラグインを活用すればHTMLも美しく整形できます。整形することで、バグを減らし、チーム開発もしやすくなります。

今回のポイント：

  • HTML整形は見た目だけでなく、バグ予防やメンテナンス性向上に効果的
  • 「HTML-CSS-JS Prettify」が初心者におすすめ
  • 設定をカスタマイズすることで、より使いやすくなる
  • トラブルが起きたら、まずはSublime Textの再起動を試す

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました