1370

書式を変更したい書式の整っていない HTML コードがあります。Sublime Text 2 の HTML コードを自動的に再フォーマットして、見栄えを良くして読みやすくするコマンドはありますか?

4

16 に答える 16

2131

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

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

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

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

于 2012-06-04T21:47:04.373 に答える
392

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

再インデント コマンド

長所：

  • 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 は、私の本の勝者です。素晴らしい機能がたくさんあり、文句を言う必要はありません。

于 2014-01-18T16:29:50.477 に答える
181

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

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

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

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

于 2012-01-13T23:12:36.873 に答える
42

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

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

これにより、入力するたびにHTMLTidyが実行されます。これには欠点があるかもしれません、私はSublimeにまったく慣れていませんが、それは私が望むことをしているようです:)

于 2012-11-01T15:17:52.360 に答える
27

質問は HTML に関するものですが、Sublime Text 2 の Javascript コードを自動フォーマットする方法についても情報を提供したいと思います。

すべてのコードを選択 ( CTRL+ A) し、アプリ内機能の reindent( Edit-> Line-> ) を使用するか、コードをフォーマットする方法についてさらにカスタマイズ可能な設定が必要な場合は、ReindentJsFormat フォーマット プラグインを使用できます。 Sublime Text 2Sublime Text のデフォルトのタブ/インデント設定。

https://github.com/jdc0589/JsFormat

パッケージ コントロール ( -> )を使用してJsFormatを簡単にインストールできます。パッケージ コントロールを開いて、 installと入力し、 を押します。次に、 を入力してヒットすると、完了です。(パッケージ コントローラは、インストールのステータスを成功とエラーと共に左下のバーに表示します)PreferencesPackage Control ENTERjs formatENTERSublime

次の行をキー バインドに追加します ( Preferences-> Key Bindings User) 。

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

私はCTRL+ ALT+を使用し2ています。このショートカット キーは好きなように変更できます。これまでのところ、JsFormat試してみる価値のある優れたプラグインです!

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

于 2013-06-24T11:34:08.927 に答える
15

SublimeHtmlTidyと呼ばれるプラグインがあります。これはかなりうまく機能します

https://github.com/welovewordpress/SublimeHtmlTidy

于 2012-09-08T11:00:20.763 に答える
15

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

  1. が必要Sublime Package Manager
  2. ここでパッケージマネージャーをインストールするための指示に従いました
  3. CMD+ SHIFT+と入力Pしてメニューを表示します
  4. タイプされたprettify
  5. メニューでHTML prettify選択を選択

ブーム。終わり。素晴らしく見える

于 2014-07-27T16:01:06.393 に答える
11

に行くだけです

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

于 2012-10-09T00:23:20.437 に答える
9

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

それをチェックして、あなたの考えを教えてください！

https://github.com/rareyman/HTMLBeautify

于 2013-01-21T18:46:39.050 に答える
8

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

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

于 2012-01-14T12:59:30.777 に答える
7

素敵なオープン ソースCodeFormatter プラグインがあり、(再インデントに沿って) すべてが 1 行であってもダーティ コードを美しくすることができます。

于 2014-04-23T07:34:39.763 に答える
7

私はまだコメントする特権を持っていないので、これは上記の@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]-->
于 2012-11-21T10:10:06.350 に答える
6

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に追加します。

于 2012-02-18T22:46:52.433 に答える
3

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

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

詳細はこちらをご覧ください。

于 2014-11-21T15:55:25.730 に答える