web-dev-qa-db-ja.com

Sublime Text 2を使用してHTMLコードを再フォーマットする方法

私は私が再フォーマットしたいいくつかの不完全にフォーマットされたHTMLコードを持っています。 Sublime Text 2のHTMLコードを自動的に再フォーマットして見やすく読みやすくするコマンドはありますか？

htmlsublimetext2sublimetextindentationreformat
1243
Ravi Ram

これを行うためにプラグインは必要ありません。すべての行を選択してください（CtrlAその後、メニューから編集→行→再インデントを選択します。あなたのファイルが.htmlや.phpのようなHTMLを含む拡張子で保存されている場合、これは機能します。

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

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

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

2012
peter

SublimeでHTMLをフォーマットする方法は半ダースかそこらあります。私は最もポピュラーなプラグインのそれぞれをテストしました（私のブログで書いた 記事を参照してください 詳細を見てください）、ここでいくつかの最もポピュラーなオプションの簡単な概要です：

不制な命令

長所：

  • Sublimeと一緒に出荷されるので、プラグインのインストールは不要

短所：

  • 余分な空白行を削除しません
  • 縮小されたHTML、複数のオープンタグを含む行は処理できません
  • <script>ブロックを正しくフォーマットしません

タグ

長所：

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

短所：

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

HTMLTidy

長所：

  • PHPタグを処理します
  • フォーマットを微調整するためのいくつかの設定

短所：

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

HTML美化

長所：

  • ST2/ST3をサポート
  • 単純でバイナレーのない依存関係
  • OS X、Win、およびLinuxのサポート

短所：

  • インラインコメントでちょっとしたチョーク
  • 最小化/圧縮コードを拡張する

HTML-CSS-JSきれい

長所：

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

短所：

  • Node.jsが必要
  • 組み込みPHPには向いていません

どれが一番いいですか？

HTML-CSS-JS Prettifyが私の本の勝者です。文句を言うほど多くの優れた機能はありません。

360
Josh Earl

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

パッケージコントロールを使ってインストールすることができます。 https://sublime.wbond.net

パッケージ制御をインストールした後。パッケージ管理（設定 - >パッケージ管理）に移動し、installと入力します。 、ヒット enter。それからtagとタイプしてヒット enter。

Tagをインストールした後、テキストをハイライトしてショートカットを押す Ctrl+Alt+F。

175
dardub

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

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

完了しました。

47
Peter Zhu

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

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

これにより、毎回HTML Tidyが実行されます。これには欠点があるかもしれません、私はSublime自身にはかなり新しいですが、それは私が欲しいものをするようです:)

39
Anneke

問題はHTMLに関するものだけでなく、Sublime Text 2用にJavascriptコードを自動フォーマットする方法についての情報も追加したいと思います。

あなたはすべてのあなたのコードを選択することができます（ctrl + ASublime Textのデフォルトに追加してコードをフォーマットする方法をカスタマイズ可能な設定にしたい場合は、アプリケーション内の機能を使用し、再インデント（Edit - > Line - > Reindent）またはJsFormatフォーマットプラグインのSublime Text 2を使用できます。タブ/インデント設定.

https://github.com/jdc0589/JsFormat

あなたは簡単にインストールすることができますJsFormatパッケージコントロールを使うことで（Preferences - > Package Control）それからパッケージコントロールを開くそれからタイプインストール、ヒット enterそれからjs formatとタイプしてヒット enter、これで終わりです。 （パッケージコントローラはインストールのステータスをSublimeの左下のバーに成功とエラーと共に表示します）

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

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

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

これが誰かに役立つことを願っています。

20
Gokhan Tank

SublimeHtmlTidyというプラグインがあり、これはかなりうまくいきます

https://github.com/welovewordpress/SublimeHtmlTidy

13
Christian Hagelid

私にとっては、HTML Prettifyソリューションは非常に単純でした。私は HTML Prettify page に行きました。

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

ブーム。完了しました。素晴らしく見える

12
insaineyesay

単純に行く

編集 - >タグ - >文書上のタグの自動フォーマット

10
Ricardo Martins

私は HTMLBeautify というパッケージを作成しました。私はそれを1997年に見つけたPerlスクリプトを基にして作成しました - 私はそれを更新して、最新の新しくなったタグのすべてに対応するようにしました。 :)

それをチェックして、あなたがどう思うか教えてください！

https://github.com/rareyman/HTMLBeautify

8
Ross

ニースのオープンソースである CodeFormatterプラグイン があります。これは（再インデントとともに）汚れたコードを1行でも美しくすることができます。

6
side2k

私はまだコメントする特権を持っていないので、これは@ peterの answer 上記の回答に関連する単なる追加情報です。

ヘッダの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]-->
6
newtriks

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

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

5
Allen Bargi

私は tidy をカスタムビルドシステムと一緒に使ってHTMLをきれいにしています。

私の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では私はtidyをインストールするのにmacportを使いました、Windowsではあなたはそれを自分でダウンロードして、そしてtidyがあるビルドシステムの作業ディレクトリを指定しなければならないでしょう：

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

またはPATHに追加してください。

3
rchl

あなたはショートカットキーを設定することができます F12 簡単です。

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

詳細を参照してください ここ 。

3
Sumeta Pongpanna