Sublime Text 2を使用してHTMLコードを再フォーマットするにはどうすればよいですか？

再フォーマットしたいフォーマットの悪いHTMLコードがいくつかあります。Sublime Text 2のHTMLコードを自動的に再フォーマットして見栄えをよくし、読みやすくするコマンドはありますか？

これを行うのにプラグインは必要ありません。すべての行（Ctrl A）を選択し、メニューから[編集]→[行]→[インデント解除]を選択します。これは、ファイルが.htmlやなどのHTMLを含む拡張子で保存されている場合に機能します.php。

これを頻繁に行う場合、このキーマッピングが役立つことがあります。

{ "keys": ["ctrl+shift+r"], "command": "reindent" , "args": { "single_line": false } }

ファイルが保存されない場合（例：スニペットを新しいウィンドウに貼り付けたばかりの場合）、インデントの言語を手動で設定できlanguage of choiceます。再表示オプションを選択する前に、[表示]→[構文]→ を選択します。

SublimeでHTMLをフォーマットする方法は6つほどあります。私は最も人気のあるプラグインのそれぞれをテストしました（詳細については、私のブログで書いた記事を参照してください）。しかし、最も人気のあるオプションのいくつかの概要を以下に示します。

再インデントコマンド

長所：

• Sublimeに同梱されるため、プラグインのインストールは不要

短所：

• 余分な空白行を削除しません
• 縮小されたHTML、複数の開いたタグがある行を処理できません
• <script>ブロックを適切にフォーマットしない

鬼ごっこ

長所：

• ST2 / ST3をサポート
• 余分な空白行を削除します
• バイナリ依存なし

短所：

• PHPタグのチョーク
• <script>ブロックを正しく処理しない

HTMLTidy

長所：

• PHPタグを処理します
• 書式を微調整するためのいくつかの設定

短所：

• PHPが必要（Webサービスにフォールバック）
• ST2のみ
• 放棄された？

HTMLBeautify

長所：

• ST2 / ST3をサポート
• 単純でバイナレイ依存なし
• OS X、Win、Linuxのサポート

短所：

• インラインコメントで少しチョーク
• 最小化/圧縮されたコードを展開します

HTML-CSS-JS Prettify

長所：

• ST2 / ST3をサポート
• HTML、CSS、JSを処理します
• Sublimeのメニューとの優れた統合
• 高度にカスタマイズ可能
• プロジェクトごとの設定
• 保存時にフォーマット

短所：

• Node.jsが必要
• 埋め込みPHPには不向き

どれが一番いいですか？

HTML-CSS-JS Prettifyが私の本の勝者です。たくさんのすばらしい機能、不満はほとんどありません。

私が見つけた唯一のパッケージはTagです。

パッケージコントロールを使用してインストールできます。https://sublime.wbond.net

パッケージコントロールをインストールした後。パッケージコントロール（[ 設定] -> [ パッケージコントロール]）に移動し、タイプinstallしてヒットしenterます。次に、タイプtagしてヒットしenterます。

タグをインストールした後、テキストを強調表示し、ショートカットCtrl+ Alt+ を押しますF。

私はこのプラグインをお勧めします：HTML / CSS / JS Prettify、それは本当に機能します。

インストール後、コードを選択してを押すだけCtrl+Shift+Hです。

できた！

一般的なヒントです。HTMLを自動整頓するために私がしたことは、パッケージHTML_Tidyをインストールしてから、次のキーバインドをデフォルト設定（私が使用しているもの）に追加することです。

{ "keys": ["enter"], "command": "html_tidy" },

これにより、すべての入力時にHTML Tidyが実行されます。これには欠点があるかもしれませんが、私はSublimeを使うのは初めてですが、私がやりたいことをしているようです:)

質問はHTMLに関するものですが、JavascriptコードをSublime Text 2用に自動フォーマットする方法についても説明します。

すべてのコードを選択して（ctrl+ A）、アプリ内機能を使用してreindent（Edit-> Line-> Reindent）するか、JsFormatフォーマットプラグインを使用Sublime Text 2して、 Sublime Textのデフォルトのタブ/インデント設定。

https://github.com/jdc0589/JsFormat

パッケージコントロール（-> ）を使用してJsFormatを簡単にインストールできます。パッケージコントロールを開き、「install」、「hit」と入力します。次に、タイプしてを押すと、完了です。（パッケージコントローラーのインストールのステータスが、左下のバーに成功とエラーで表示されます）PreferencesPackage Controlenterjs formatenterSublime

次の行をキーバインディングに追加します（Preferences-> Key Bindings User）

{ "keys": ["ctrl+alt+2"], "command": "js_format"}

私はctrl+ alt+ を使用し2ています。このショートカットキーは何にでも変更できます。これまでのところ、それJsFormatは試す価値のある良いプラグインです！

これが誰かを助けることを願っています。

SublimeHtmlTidyと呼ばれるプラグインがあります。

https://github.com/welovewordpress/SublimeHtmlTidy

私にとって、HTML Prettify解決策は非常に簡単でした。HTML Prettifyページに行きました。

1. 必要としました Sublime Package Manager
2. ここにパッケージマネージャをインストールするための指示に従ってください
3. 入力cmd + shift + pしてメニューを表示します
4. 入力した prettify
5. 選んだHTML prettifyメニューの選択を

ブーム。できました。素晴らしく見える

単に行く

編集->タグ->ドキュメントのタグの自動フォーマット

HTMLを再フォーマットする適切な作業を行うHTMLBeautifyというパッケージを作成しました。私はそれを1997年に見つけたPerlスクリプトに基づいて作成しました。私はそれを更新して、すべての新しい最新のタグに対応できるようにしました。:)

ぜひチェックして、感想を聞かせてください！

https://github.com/rareyman/HTMLBeautify

これはあなたが探しているものだと思います：

https://github.com/victorporof/Sublime-HTMLPrettify

私はまだコメントする権限がありませんので、これは上記の回答に対する@peterの回答に関連する単なる追加情報です。

ヘッダーのIE 条件付きコメントが完全にインライン化されていない場合、HTMLが期待どおりに配置されないことがわかりました。

<!--[if lt IE 7]>
<p class='chromeframe'>Your browser is <em>unsupported</em>. <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p>
<![endif]-->
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 

素敵なオープンソースのCodeFormatterプラグインがあり、（再インデントとともに）すべてが1行である場合でもダーティコードを美化できます。

私は、HTMLを美しくするために、カスタムビルドシステムと共にtidyを使用しています。

Packages / User /ディレクトリにHTMLTidy.sublime-buildがあります：

{
  "cmd": ["tidy", "-config", "$packages/User/tidy_config.cfg", "$file"]
}

同じディレクトリにあるtidy_config.cfgファイル：

indent: auto
tab-size: 4
show-warnings: no
write-back: yes
quiet: yes
indent-cdata: yes
tidy-mark: no
wrap: 0

ビルドシステムを選択してctrl+ bまたはcmd+bをファイルコンテンツを再フォーマットします。これに関する小さな問題の1つは、ST2がファイルを自動的に再読み込みしないため、他のファイルに切り替えて（または他のアプリケーションに切り替えて）結果を確認する必要があることです。

MacではMacportsを使用してtidyをインストールしましたが、Windowsでは自分でダウンロードし、ビルドシステムでtidyが配置されている作業ディレクトリを指定する必要があります。

"working_dir": "c:\\HTMLTidy\\"

または、PATHに追加します。

ショートカットキーをF12簡単に設定できます!!!

{ "keys": ["f12"], "command": "reindent" , "args": { "single_line": false } }

詳細はこちら。